How to: Draw an Image in HTML5 Canvas

I will show you an example how to set up a canvas and draw in it using "HTML5 canvas and image object".

First, you must insert a canvas in the html body:

<canvas id="mycanvas" width="200" height="200"></canvas>

Then you can draw the image using 2D canvas context and image object. Like this:

var canvas = document.getElementById('mycanvas');
var drawingContext = canvas.getContext('2d');
var img = new Image();
img.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidEBkMVnAtEEzw8S26ScVRKgr4KzU4dsFBwtj-hPKTXgmM2zNYxYErmDligVS6XcWjEem_v_9k1s00Vo8ObVKQtDZV90LYX_J895q6lTJRQwHDsDuOFiPcU9VHBuCMvXgTeEHN_6WKQws/s1600/car-logo.png";
drawingContext.drawImage(img, 50, 50);

In the code above we get the canvas element by using the id. Then we created the 2D context instance by calling getContext function of the context element.


The we created a new image instance and then we assigned the image url to the src property of the Image object.

Finally we draw the image by calling the drawImage() function of the canvas context. The first parameter of the function is an image object, the second is the x-position and the third is the y-position.

Click to draw an image
Your browser does not support the canvas element.