Jump Start HTML5

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.

Images

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");
ctx.drawImage(img,10,10);

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 ...