4.3. Drawing a Canvas into a Canvas

The application shown in Figure 4.7 draws an image into a canvas, and then draws some text, known as a watermark, on top of the image.

Figure 4.7. A watermark

When the user adjusts the scale with the slider in the upper-left corner, the application scales both the image and the text. You could scale the image and text together by drawing them into an offscreen canvas at the specified scale and subsequently copying the offscreen canvas back into the onscreen canvas; in this case, however, an offscreen canvas is not strictly necessary because drawImage() can draw a canvas back into itself, like this:

Click here to view code image

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    scaleWidth = ..., // Calculate scales for width and height
    scaleHeight = ...;

...
context.drawImage(canvas, 0, 0, scaleWidth, scaleHeight);
...