HTML and CSS Reference
In-Depth Information
Figure 4-14.
drawImage()
method in action
Of course, it's possible that the resized imaged may be distorted if the width and height proportions aren't
maintained.
Yet another possibility while drawing images on a canvas is to draw just a portion of the source image
instead of the entire image. To accomplish this image cropping, you use another variation of the
drawImage()
method that takes the coordinates and dimensions of the image slice along with other
parameters discussed previously. Listing 4-13 make clear how to use this variation.
Listing 4-13.
Drawing Just Part of an Image
var canvas = $("#MyCanvas").get(0);
var context = canvas.getContext("2d");
var img = new Image();
$(img).load(function () {
context.drawImage(img, 0,0,200,40,0, 0, canvas.width/2 , canvas.height/2);
});
img.src = "images/html5.png";
The
drawImage()
method now takes four more parameters than the previous signature. The two
parameters after the
image
parameter indicate the x and y coordinates (0,0) of the source image at which
cropping should begin. The next two parameters indicate the width (200px) and height (40px) of the region
