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)
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>
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: