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, 20         


        

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