HTML5: Your visual blueprint™ for designing rich web pages and applications

DRAW AN IMAGE ON THE CANVAS

You can draw an image onto any point in the canvas using drawImage(). This provides a convenient way to import image files stored on your web server into the canvas:

var image = document.getElementById(imageID);context.drawImage(image, destX, destY);

imageID identifies for the image in HTML, as in <img src='image.jpg' id='imageID'>. drawImage()’s destX and destY values indicate the point in the canvas where the image will appear.

Alternatively, if the image resource is not available as an HTML img element, you may download it dynamically using a new Image() object’s src attribute. This requires you to listen for the object’s load event, which tells you the resource has been downloaded and can be displayed:

var image ...