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

SCALE A CANVAS IMAGE

You can scale 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 two more parameters to the drawImage() method, a destination width and height:

context.drawImage(image, destX, destY, destW, destH);

destX, destY, destW, and destH specify the destination region of the canvas you are copying to. If destW and destH do not match the image’s original width and height, it will be scaled when drawn onto the canvas.

EXTRA

The image’s aspect ratio cannot be locked by drawImage() alone. So if you want to maintain the height and width aspect while scaling, you will have to cross-multiply using one destination dimension ...