Resizing Images to display in HTML5 Canvas

Question

I'm trying to get an image to be displayed on an HTML5 Canvas while keeping the aspect ratio and having the image reduced (if larger than the canvas). I've look around at some answers but seem to be missing something and wondered if you guys can help.

I'm using the function "calculateAspectRatioFit" suggested by one of the Stackoverflow answers, but it seems to not resize the image for me, as it did in the answer - so I may be doing something wrong :)

Here's my code:

  function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
    var rtnWidth = srcWidth*ratio;
    var rtnHeight = srcHeight*ratio;

    return { width: rtnWidth, height: rtnHeight };
  }

    var canvasImage = new Image();
    canvasImage.src = "http://www.greenwallpaper.org/backgrounds/simply-green-502085.jpeg";
    var ctx = this.getContext('2d');
    var parentWidth = self._widgetSize[0];
    var parentHeight = self._widgetSize[1];

    canvasImage.onload = function() {
      var imgSize = calculateAspectRatioFit(canvasImage.width, canvasImage.height, parentWidth, parentHeight);

      ctx.clearRect(0, 0, parentWidth, parentHeight);
      ctx.drawImage(canvasImage, 0, 0,imgSize.width, imgSize.height);
    };

The image is displayed but is larger than the HTML5 Canvas. What I am after is to have the image the same width as the Canvas, and if the height is larger than the height of the canvas then it overflows and is hidden...I just want to fill the width and keep the aspect ratio.

Can anyone help point out what I am missing?

Appreciate your help :)

---Update 30/11--- I've just added the answer to my code and I get the following: (this is the 2nd answer)

  var canvasImage = new Image();
  canvasImage.src = "http://www.greenwallpaper.org/backgrounds/simply-green-502085.jpeg";
  var ctx = this.getContext('2d');
  canvasImage.onload = scaleAndDraw(this, ctx, canvasImage);

  function scaleAndDraw(canvas, ctx, srcImage) {
  // Image is 2560x1600 - so we need to scale down to canvas size...
  // does this code actually 'scale' the image? Image of result suggests it doesn't.

    var aspect = getAspect(canvas, srcImage);
    var canvasWidth = (srcImage.width * aspect);
    var canvasHeight = (srcImage.height * aspect);
    ctx.drawImage(srcImage, 0, 0, canvasWidth|0, canvasHeight|0);
  }
  function getAspect(canvas, image) {
    return canvas.size[0] / image.width;
  }

So the code for displaying the image works, but the image is keeping it's dimensions and is not resizing to the dimensions of the canvas.

Hopefully the image will help you see the problem I am having. Larger images do not seem to rescale to fit in the canvas while keeping aspect ratio.

Any thoughts? :)

Answer 1

Your code works for me as long as I supply sane parentWidth,parentHeight values:

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight); var rtnWidth = srcWidth*ratio; var rtnHeight = srcHeight*ratio; return { width: rtnWidth, height: rtnHeight }; } var parentWidth = 100; //self._widgetSize[0]; var parentHeight = 50; //self._widgetSize[1]; var canvasImage = new Image(); canvasImage.onload = function() { var imgSize = calculateAspectRatioFit(canvasImage.width, canvasImage.height, parentWidth, parentHeight); ctx.clearRect(0, 0, parentWidth, parentHeight); ctx.drawImage(canvasImage,30,30,imgSize.width, imgSize.height); }; canvasImage.src = "http://www.greenwallpaper.org/backgrounds/simply-green-502085.jpeg"; 

 body{ background-color: ivory; padding:10px; } #canvas{border:1px solid red;} 

 <canvas id="canvas" width=300 height=300></canvas>