Chapter 16Canvas & SVG: Canvas Images and Videos

You can use bitmap images and video with canvas. In this chapter, we’ll look at how you can copy images and videos onto your canvas.


You can copy a pre-defined bitmap image to your canvas using the drawImage() method. The same method can also be used to draw part of an image or alter its size. You can position the image on the canvas much in the same way as you would draw a line:

var c = document.getElementById("MyCanvas");
var ctx=c.getContext("2d");
var img = document.getElementById("yourimage");

As you can see here, the image (which is on our page with the ID "yourimage") is positioned at the x,y coordinates passed in the method: ctx.drawImage(img,x,y).

You ...

Get Jump Start HTML5 now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.