html5 canvas redraw on resize

Question

I have two canvas elements and need them to be resized on buttons click.

<div class="sDetails"><div>
                        <div id="canvasDiv" style="width: 310px;"><canvas id="canvasGraph"></canvas></div></div>
<div class="kDetails"><div><div>
<div id="canvasDiv" style="width: 310px; height: 240px;"><canvas id="canvasGraph"></canvas></div></div>

and the script:

   var sketch;var sketch_sl;var onPaint;var canvas=null;var ctx=null;var tmp_ctx=null;
    function drawCanvas(div) {
        canvas = document.querySelector(div + " #canvasGraph");
        ctx = canvas.getContext('2d');
        sketch = document.querySelector(div + " #canvasDiv");
        sketch_sl = getComputedStyle(sketch);
        canvas.width = parseInt(sketch_style.getPropertyValue('width'));
        canvas.height = parseInt(sketch_style.getPropertyValue('height'));
        tmp_canvas = document.createElement('canvas');
        tmp_ctx = tmp_canvas.getContext('2d');
        tmp_canvas.id = 'tmp_canvas';
        tmp_canvas.width = canvas.width;
        tmp_canvas.height = canvas.height;
        sketch.appendChild(tmp_canvas);

the redraw function:

// here I must redraw my lines resized 2 times ( *cScale ) where cScale=2 or =1
function drawScales(ctx, canvas) 
        ctx.strokeStyle = 'green';
        ctx.fillStyle = 'green';
        ctx.beginPath();
        ctx.moveTo(5, 0);
        ctx.lineTo(0, canvas.height);
        scaleStep = 24*cScale;

for some reason it works really bad, old positions stay. Is there a way to completely delete the whole canvas and append it or redraw it completely?

I tried canvas.width=canvas.width, tried ctx.clearRect(0, 0, canvas.width, canvas.height);tmp_ctx.clearRect(0, 0, canvas.width, canvas.height);, tried $(".sDetails #canvasGraph")[0].reset();

logically, drawCanvas(".sDetails");drawLines(ctx, canvas); should redraw it from scratch but it will not.

Rici

Why do you need to redraw canvas on resize? Do its dimensions really depends on window size? If so, why you set fixed dimensions (width/height) on canvas with css style? – Busiek

@Busiek I have a coordinates system and when a button is pressed, the canvas gets two times wider making the capture of x-coordinates more precise when the users draws on it.. – Rici

Answer 1

I decided to use a scale variable to resize my scales. I resize the canvas canvas.width *= 2; and then I redraw my scales.

var scaleStep;

and use add it into the code: ctx.lineTo(12*24*cScale+12, canvas.height-24); where the scaling needs to be done. The scaleStep is 2 when maximizing the canvas and 1 when returning to the original size.

Rici

Answer 2

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>Resize left canvas</div>
<input id=myslider1 type=range><br>
<div>Resize right canvas</div>
<input id=myslider2 type=range><br>
<h4 id=mouse>Mouse coordinates:</h4>
<canvas id="canvas1" width=300 height=300></canvas>
<canvas id="canvas2" width=300 height=300></canvas>

Mystagogue

Thank you! Though I am not sure scaling will work for me. I have a coordinates system and when a button is pressed, the canvas gets two times wider making the capture of x-coordinates more precise when the users draws on it. If I scale it, will it take coords according to the scaled canvas. That is if x value was 3 and a captured point was 12px, after scaling it must be 3 and 24px. Will it work like that with scaling? – Rici

Sure! The browser always reports mouse coordinates in unscaled values. To adjust for a scaled canvas, just divide the browser's mouse coordinate by the current canvas scaling factor. That gives you the mouse coordinate in scaled canvas terms. mouseX/=scale; and mouseY/=scale; – Mystagogue

@CodeGust. I misspoke in my comment above. I meant to say divide the mouse coordinates reported by the browser by the scaling factor. I've added to my demo to show how mouse coordinates can be correctly calculated even from a scaled canvas. – Mystagogue

Answer 3

If you need scale-independent positions you could use normalized values ([0, 1]) instead and use the size of canvas as the scale factor. This way you can scale and store values without too much concern about the actual target size.

You would also be able to use the mouse positions almost as is and normalize by just dividing them on canvas size.

For example:

When rendering, a point of (1,1) will always draw in lower-right corner as you would do (1 * canvas.width, 1 * canvas.height).

When you store a point you would use the mouse position and divide it on the canvas dimension, for example, if I click in the lower right corner of a canvas of size 400x200, the points would be 400/400 = 1, 200/200 = 1.

Note that width and height would be exclusive (ie. width-1 etc.), but for sake of simplicity...

Example

In this example you can start with any size of the canvas, draw points which are normalized, change size of canvas and have the points redrawn proportionally relative to the original position.

var rng = document.querySelector("input"),
    c = document.querySelector("canvas"),
    ctx = c.getContext("2d"),
    points = [];

// change canvas size and redraw all points
rng.onchange = function() {
  c.width = +this.value;
  render();
};

// add a new normalized point to array
c.onclick = function(e) {
  var r = this.getBoundingClientRect(),   // to adjust mouse position
      x = e.clientX - r.left,
      y = e.clientY - r.top;
  points.push({
    x: x / c.width,                       // normalize value to range [0, 1]
    y: y / c.height
  });                                     // store point
  render();                               // redraw (for demo)
};

function render() {
  ctx.clearRect(0, 0, c.width, c.height); // clear canvas
  ctx.beginPath();                        // clear path
  for(var i = 0, p; p = points[i]; i++) { // draw points as fixed-size circles
    var x = p.x * c.width,                // normalized to absolute values
        y = p.y * c.height;
    
    ctx.moveTo(x + 5, y);
    ctx.arc(x, y, 5, 0, 6.28);
    ctx.closePath();
  }
  ctx.stroke();
}

canvas {background:#ddd}

<h3>Click on canvas to add points, then resize</h3>
<label>Width: <input type="range" min=50 max=600 value=300></label><br>
<canvas></canvas>

Degree