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.

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

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

Answer 2

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 = px * c.width, // normalized to absolute values y = py * 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> 

Answer 3

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.