javascript

Chapter 21: Upcoming API s
restore() method, which pops the settings stack and restores all of the settings. You can keep calling
save() to store more settings on the stack and then systematically go back through them using
restore() . Here is an example:
context.fillStyle = “#ff0000”;
context.save();
context.fillStyle = “#00ff00”;
context.translate(100, 100);
context.save();
context.fillStyle = “#0000ff”;
context.fillRect(0, 0, 100, 200); //draws blue rectangle at (100, 100)
context.restore();
context.fillRect(10, 10, 100, 200); //draws green rectangle at (110, 110)
context.restore();
context.fillRect(0, 0, 100, 200); //draws red rectangle at (0,0)
In this code, the fillStyle is set to red and then save() is called. Next, the fillStyle is changed to
green, and the coordinates are translated to (100,100). Once again, save() is called to save these settings.
The fillStyle property is then set to blue and a rectangle is drawn. Because the coordinates are
translated, the rectangle actually ends up being drawn at (100,100). When restore() is called,
fillStyle is set back to green, so the next rectangle that’s drawn is green. This rectangle is drawn at
(110,110) because the translation is still in effect. When restore() is called one more time, the
translation is removed and fillStyle is set back to red. The last rectangle is drawn at (0,0).
Note that save() saves only the settings and transformations applied to the drawing context, but not
the contents of the drawing context.
Working with Images
The 2D drawing context has built - in support for working with images. If you have an existing image that
should be drawn on the canvas, you can do so using the drawImage() method. This method can be
called with three different sets of arguments based on the desired result. The simplest call is to pass in an
HTML < img > element, as well as the destination x and y coordinates, which simply draws the image at
the specified location. Here is an example:
var image = document.images[0];
context.drawImage(image, 10, 10);
This code gets the first image in the document and draws it on the context at position (10,10). The image
is drawn in the same scale as the original. You can change how the image is drawn by adding two more
arguments: the destination width and destination height. This scales the drawing without affecting the
transformation matrix of the context. Here’s an example:
context.drawImage(image, 50, 10, 20, 30);
When this code is executed, the image is scaled to be 20 pixels wide by 30 pixels high.
691