HTML5 Canvas Image Tutorial

To draw an image using HTML5 Canvas, we can use the drawImage() method which requires an image object and a destination point. The destination point defines the top left corner of the image relative to the top left corner of the canvas.

Since the drawImage() method requires an image object, we must first create an image and wait for it to load before instantiating drawImage().  We can accomplish this by using the onload property of the image object.

new window

Code Editor

Modified on April 8th, 2013 by Eric Rowell
comments powered by Disqus