html5 canvas redraw on resize

Answer 1

Resize the canvas element's width & height and use context.scale to redraw the original drawings at their newly scaled size.

• Resizing the canvas element will automatically clear all drawings off the canvas.

• Resizing will also automatically reset all context properties back to their default values.

• Using context.scale is useful because then the canvas will automatically rescale the original drawings to fit on the newly sized canvas.

• Important: Canvas will not automatically redraw the original drawings...you must re-issue the original drawing commands.

Illustration with 2 canvases at same size (their sizes are controlled by range controls)

Illustration with left canvas resized larger

Illustration with right canvas resized larger

Here's example code and a Demo. This demo uses range elements to control the resizing, but you can also do the resizing+redrawing inside window.onresize

var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");
var originalWidth=canvas1.width;
var originalHeight=canvas1.height;

var scale1=1;
var scale2=1;

$myslider1=$('#myslider1');
$myslider1.attr({min:50,max:200}).val(100);
$myslider1.on('input change',function(){
  var scale=parseInt($(this).val())/100;
  scale1=scale;
  redraw(ctx1,scale);
});
$myslider2=$('#myslider2');
$myslider2.attr({min:50,max:200}).val(100);
$myslider2.on('input change',function(){
  var scale=parseInt($(this).val())/100;
  scale2=scale;
  redraw(ctx2,scale);
});

draw(ctx1);
draw(ctx2);

function redraw(ctx,scale){

  // Resizing the canvas will clear all drawings off the canvas
  // Resizing will also automatically clear the context
  // of all its current values and set default context values
  ctx.canvas.width=originalWidth*scale;
  ctx.canvas.height=originalHeight*scale;

  // context.scale will scale the original drawings to fit on
  // the newly resized canvas
  ctx.scale(scale,scale);

  draw(ctx);

  // always clean up! Reverse the scale
  ctx.scale(-scale,-scale);

}

function draw(ctx){
  // note: context.scale causes canvas to do all the rescaling
  //       math for us, so we can always just draw using the 
  //       original sizes and x,y coordinates
  ctx.beginPath();
  ctx.moveTo(150,50);
  ctx.lineTo(250,150);
  ctx.lineTo(50,150);
  ctx.closePath();
  ctx.stroke();
  ctx.fillStyle='skyblue';
  ctx.beginPath();
  ctx.arc(150,50,20,0,Math.PI*2);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(250,150,20,0,Math.PI*2);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.beginPath();;
  ctx.arc(50,150,20,0,Math.PI*2);
  ctx.fill();
  ctx.stroke();
}

$("#canvas1, #canvas2").mousemove(function(e){handleMouseMove(e);});
var $mouse=$('#mouse');

function handleMouseMove(e){

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();


  var bb=e.target.getBoundingClientRect();
  mouseX=parseInt(e.clientX-bb.left);
  mouseY=parseInt(e.clientY-bb.top);

  if(e.target.id=='canvas1'){
    $mouse.text('Mouse1: '+mouseX/scale1+' / '+mouseY/scale1+' (scale:'+scale1+')');
  }else{
    $mouse.text('Mouse2: '+mouseX/scale2+' / '+mouseY/scale2+' (scale:'+scale2+')');
  }

}

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

Resize left canvas


Resize right canvas


Mouse coordinates: