SQL Server administration and T-SQL development, Web Programming with ASP.NET, HTML5 and Javascript, Windows Phone 8 app development, SAP Smartforms and ABAP Programming, Windows 7, Visual Studio and MS Office software
HTML5 Tutorials and HTML5 Code Samples and HTML component examples for Web Developers


HTML5 Canvas Load Image into Canvas Element

This HTML5 Canvas tutorial shows how to load image into canvas element using context.drawImage() method. HTML5 canvas tag provides a drawing space using Javascript programming. Besides drawing in Canvas to load image into canvas element is also possible. For example, you place a canvas element in HTML5 page and you want to set an image file (photo, etc) as background during your drawing experiences. You can use context of Canvas load image into canvas within in a few lines of HTML5 programming code.

context.drawImage() method draws image specified as an argument onto the canvas. drawImage() method also places the image within the coordinates specified as arguments in canvas element. The top-left corner of the image is placed using the coordinates specidied in drawImage() method parameters.

context.drawImage(Object image, number x, number y)
Code

Please note that the top-left corner of the canvas element is (0,0)

Here is the required HTML5 programming code to insert image into canvas element.

<script>
function uploadImage() {
 var canvas = document.getElementById("html5canvas");
 var context = canvas.getContext("2d");

 var imageObj = new Image();
 imageObj.src = "/images/windows-8-screenshots/consumer-beta-windows-8-start-screen.png";

 imageObj.onload = function () {
  context.drawImage(imageObj, 0, 0);
 };
}
</script>
Code

Here is how the above sample HTML5 code snipplet will work and upload a predefined image to canvas element.

Load image into canvas element by pressing below "Canvas Load Image" button:


Your browser does not support HTML5 Canvas element.
Please visit this page using an other web browser after reviewing HTML browser support test scores



HTML5


Copyright © 2004 - 2021 Eralper YILMAZ. All rights reserved.