5.7 Embedding Images 137Figure 5.22 The source image of all “drawImage()” examples
In addition to pixel sizes, which we will encounter in the examples, Figure 5.22
shows the impressive 1000-meter-high rock face of El Capitan in Yosemite Na-
tional Park: The photo was taken from Taft Point. This picture is now drawn
onload onto the 600 × 400 pixel target canvas, using one of the three possible
sets of arguments. The first and simplest option determines the top-left corner
of the image in the target canvas with dx/dy. In our case, this is the position 0/0:
image.onload = function() {
context.drawImage(image,0,0);
};
Width and height are copied directly from the original image, and because our
image is bigger than the target canvas, it will come as no surprise that we only see
the top-left quarter of Taft Point on our canvas (see Figure 5.23).