How to proportionally resize an image in canvas?

Question

AFAIK, to resize a loaded image in HTML5 canvas would be done like this:

var img = new Image();
img.onload = function () {
  ctx.drawImage(img, 0, 0, 300, 200); // resizes image to 300px wide, 200px high
}
img.src = 'images/myimage.jpg';

But then I realised that the image wouldn't be proportionally correct. So then I tried using one parameter only (just like in HTML) but I found that didn't work either.

How do I proportionally resize the image?

Answer 1

I wrote a blog article on this topic last last year. You can read it here. Basically it provides a function for scaling an image with a proper aspect ratio. It includes supporting both landscape and portrait orientations and sizing between the two. You can even choose between "letterbox" and "pan and scan (zoom)" mode.

It was written with div positioning in mind, but could be easily be understood for canvas.

Near the bottom of the page is the "ScaleImage" function. That might be what you want. Then you can apply it as follows:

var img = new Image();
img.onload = function () {

  var result = ScaleImage(img.width, img.height, 300, 200, true);

  ctx.drawImage(img, result.targetleft, result.targettop, result.width, result.height); // resizes image to a target size of 300x200 using letterbox mode
}
img.src = 'images/myimage.jpg';

You can replace result.targetleft and result.targettop with "0" if you don't want the image centered.

Answer 2

Get the img.width and img.height, then calculate the proportional height according to what width you're sizing to.

For example:

ctx.drawImage(img, 300, 0, 300, img.height * (300/img.width));