Draw an image using HTML5 Canvas
Hello friends, today I am going to tell you how to draw an image using HTML5 Canvas. Before moving ahead, first of all let us understand the basic of canvas. The HTML5 canvas is used to draw graphics using Javascript. For graphics we have the only container <canvas>. In order to draw graphics we must use the script. Canvas is used for drawing boxes, circles, paths, text and adding images.
drawImage() method is used to draw an image using HTML5 Canvas. This method requires an image object and a destination point. The top left corner of the point defines the destination point which is relative to the top left corner of the canvas. We must firstly create an image and should wait for it to load before instantiating drawImage(), as this method requires an image object. This can be accomplished by using the onload property of the image object. Below is the example given, though which you can draw an image using HTML5 canvas. Just copy the code below and paste it on your file and save it and run it.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="Canvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById('Canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
</html>
After executing the code you will see the image is drawn on the canvas. You can manage the width and height of the canvas according to the size of the image. Canvas can be drawn by using the following open tag <canvas> and it is closed by </canvas>.
Thanks for reading.
0 Comment(s)