Question

Is it possible to set the width and height of a canvas element and have the existing content scale to fit these new dimensions?

Right now the user uploads an image and my page creates a canvas element containing this image and whose dimensions are the same size as the image. I want to limit the size that I’m working with, however, so here is an example of what I want to have happen:

1. The user uploads an image that is 1600 x 1200 pixels (Not saved to server)
2. The data goes right to an html5 canvas object
3. The canvas height and width are set to 800 x 600 and the image content scales appropriately and then is displayed.

Right now if I set the canvas width and height it just crops the image at those dimension, not resizing as I would like. Thanks!

Answer 1

There are many ways to call drawImage

One is:

ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Where dx,dy,dw,dh are the destination x, y, width, and height.

If you make dw and dh always 800×600, the image will drawn will always automatically be scaled to 800×600.

Here’s a tiny example that will always draw any size image to 800×600 http://jsfiddle.net/jAT8Y/