How do you resize a HTML5 Canvas image when the window resizes

Question

I'm designing a Google Chrome App which has a html5 canvas for displaying images. Before displaying the image via ctx.drawImage( ...), I make sure the aspect ratio of the image is preserved etc. When the window is resized I've added an event listener and a function call to resize the canvas and image, here is the relevant code snippets:

var ctx = document.getElementById('canvas').getContext('2d');

window.onload = function() {
  ctx.canvas.width  = window.innerWidth-10;
  ctx.canvas.height = window.innerHeight-30;
  window.addEventListener('resize', resizeCanvas);
};

function resizeCanvas(){
  var imgData = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height);
  ctx.canvas.width  = window.innerWidth-10;
  ctx.canvas.height = window.innerHeight-85;
  ctx.putImageData(imgData, 0, 0); // Put the image data back onto the canvas
}

However this is not working. It appears the canvas is resizing correctly (since I've added a border on it and I can see it adjust), but the putImageData isn't updating the image? Any thoughts on why this might be happening?

UPDATE: as per the suggestion below: I changed the resize function, to try rescale the canvas - but now the image is not displayed at all once the window is resized

function resizeCanvas(){
    //var imgData = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height);

  ctx.scale(ctx.canvas.width/window.innerWidth,ctx.canvas.height/window.innerHeight);
  ctx.canvas.width  = window.innerWidth-10;
  ctx.canvas.height = window.innerHeight-85;
  //ctx.putImageData(imgData, 0, 0); // DO I NEED THIS NOW?
}

Thanks!

Answer 1

I'm not sure if its the most elegant way of doing this, but what I have working now is to completely redraw the original image, ie :

var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image;

window.onload = function() {
  ctx.canvas.width  = window.innerWidth-10;
  ctx.canvas.height = window.innerHeight-30;
  window.addEventListener('resize', resizeCanvas);
};

function drawMainStage(img){

  var h             = img.height;
  var w             = img.width;
  var image_ratio   = h/w;
  var canvas_ratio  = Math.round(ctx.canvas.height/ctx.canvas.width);

  if (ctx.canvas.width >= ctx.canvas.height){
    // Landscape canvas, scale using height of canvas
    if (h > ctx.canvas.height){

      // Image larger in at least one dimension compared to the canvas
      var width_scaled  = Math.round((ctx.canvas.height/h)*w);
      var height_scaled = ctx.canvas.height;

      if ( w > h ){
        if ( width_scaled > ctx.canvas.width ){
          height_scaled = Math.round((ctx.canvas.width/w)*h);
          width_scaled  = ctx.canvas.width;
        }
      }
      var x1 = ctx.canvas.width/2 - width_scaled/2;
      var y1 = ctx.canvas.height/2 - height_scaled/2;
      ctx.drawImage(img, 0,0, w,h, x1,y1, width_scaled, height_scaled);
    }
    else
    {
        // Images smaller than the canvas
        var x1 = Math.round(ctx.canvas.width/2  - w/2);
        var y1 = Math.round(ctx.canvas.height/2 - h/2);
        ctx.drawImage(img, x1,y1);
    }
 }
 // else {
 //TBD}

 function resizeCanvas(){
     ctx.canvas.width  = window.innerWidth-10;
     ctx.canvas.height = window.innerHeight-85;
     drawMainStage(img);  
 }

Answer 2

You can use another canvas to store the original image and use it to redraw on the canvas in the new dimensions. You can also use an image element (but this will require reloading the image).

var canvasImageName = "//www.somedomain.com/someimage.png";
var original_Image, canvas_Resize, ctx_Resize mycanvas, myctx;

$(document).ready(function()
{
     window.onresize = CanvasSizeChanged;

     original_Image = new Image;
     original_Image.src = canvasImageName;

     // canvas for image
     mycanvas = document.getElementById('mycanvas');
     myctx = canvas_Real.getContext("2d");

     // create canvas to be used for resizing
     canvas_Resize = document.createElement('canvas');
     ctx_Resize = canvas_Resize.getContext('2d');

     original_Image.onload=function()
     {
         // draw image on canvas
         myctx.drawImage(this, 0, 0);

         // also draw on background canvas
         ctx_Resize.drawImage(this, 0, 0);
     }
});

function CanvasSizeChanged()
{
    var w = mycanvas.parentNode.clientWidth;  // find parent dimensions

    var aspect = mycanvas.height/mycanvas.width;

    mycanvas.width = w;
    mycanvas.height = aspect*w;

    // redraw scaled image using your backed up canvas image
    myctx.drawImage(canvas_Resize, 0, 0, canvas_Resize.width, canvas_Resize.height, 
                                   0, 0, mycanvas.width, mycanvas.height); 
}