HTML5: Your visual blueprint™ for designing rich web pages and applications

CROP A CANVAS IMAGE

You can crop an image before drawing it into the canvas using a similar procedure to the one described in the section “Draw an Image on the Canvas,” except this time you must specify four more parameters to the drawImage() method:

context.drawImage(image, srcX, srcY, srcW, srcH, destX, destY, destW, destH);

srcX, srcY, srcW, and srcH specify the region of the source image that you are copying from. Likewise, destX, destY, destW, and destH specify the region of the canvas you are copying to. If srcW and srcH do not equal destW and destH, the cropped image will also be scaled.

EXTRA

A sprite sheet is a single image file that contains multiple frames of the same object at various animation states.

This sprite sheet contains ...