javascript - 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

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));