4.1. Drawing Images

The drawImage() method lets you draw all or part of an image, anywhere inside a canvas, and it lets you scale the image along the way. You can also draw into an offscreen canvas, which lets you do clever things with images, such as panning an image, or fading an image into a canvas. We discuss several uses for offscreen canvases in this chapter.

4.1.1. Drawing an Image into a Canvas

Let’s start by drawing an image into a canvas, as shown in Figure 4.2 and listed in Example 4.1.

Figure 4.2. Drawing an image into a canvas

Example 4.1. Drawing an image

---

Click here to view code image

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    image = new Image();

image.src = 'fence.png';
image.onload = function(e) {
   context.drawImage(image, 0, 0);
};