HTML and CSS Reference
In-Depth Information
document.body.appendChild(canvas);
return canvas;
}
var small_canvas = createCanvas("small", 100, 100);
var large_canvas = createCanvas("large", 300, 300);
var small_context = small_canvas.getContext("2d");
var large_context = large_canvas.getContext("2d");
var img = new Image();
img.onload = function() {
// note: using different (sw,sh) and (dw,dh) dimensions here shrinks the image
small_context.
drawImage(img, 0, 0, 300, 300, 0, 0, 100, 100)
;
// just grab the top-left 300×300 area from the image
large_context.
drawImage(img, 0, 0, 300, 300)
;
};
img.src = "http://somewhere/to/my/image.jpg";
Figure 9-11
illustrates these parameters.
Figure 9-11. Explaining the (dx,dy,dw,dh) and (sx,sy,sw,sh) parameters of drawImage(...)
Once you've drawn an image into your element, that image data is no different from
any other bitmap image data that you could draw. This means that you can easily draw
over the top of your drawn image, using all the same capabilities as previously
discussed.
