How can I achieve, so that the HTML5 canvas element ist resizeable?

I would like to implement this element so that you can scale it in any size. The event of the scaling should be the mouse which snaps the edge and the user resizes the element.

I've already read about how you can achieve this on a object in the canvas element. But in my case I need this on the canvas element itself (<canvas>).

How can I achieve, so that the HTML5 canvas element ist resizeable?

I would like to implement this element so that you can scale it in any size. The event of the scaling should be the mouse which snaps the edge and the user resizes the element.

I've already read about how you can achieve this on a object in the canvas element. But in my case I need this on the canvas element itself (<canvas>).

• javascript
• html
• dom
• canvas
• resize

Share Improve this question Follow edited Aug 11, 2015 at 16:22 Pavlo 45k1414 gold badges8383 silver badges114114 bronze badges asked Jan 1, 2012 at 15:51 shubshub 1,05266 gold badges2121 silver badges3939 bronze badges 2

• This might be a duplicate: stackoverflow./questions/331052/… – Anderson Green Commented Dec 16, 2012 at 20:11
• take a look at my implementation: stackoverflow./a/23128583/1265753 – karaxuna Commented Apr 17, 2014 at 8:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

Setting a canvas's width or height properties has the effect of clearing the canvas. Even canvas.width = canvas.width; will cause you to lose everything in the canvas. Sometimes this is desirable, but in your case it probably isn't.

What you will probably need to do is something like this

 var myCanvas = document.getElementById('myCanvas');
 var tempCanvas = document.createElement('canvas');
 tempCanvas.width = myCanvas.width;
 tempCanvas.height = myCanvas.height;

 // save your canvas into temp canvas
 tempCanvas.getContext('2d').drawImage(myCanvas, 0, 0);

 // resize my canvas as needed, probably in response to mouse events
 myCanvas.width = newWidth;
 myCanvas.height = newHeight;

 // draw temp canvas back into myCanvas, scaled as needed
 myCanvas.getContext('2d').drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, myCanvas.width, myCanvas.height);

In most browsers, the scaling will be done with a bicubic scaling algorithm, causing it to get blurry. In some cases you can set a CSS property to cause nearest neighbor on the canvas if you want, but browser support for this is very spotty right now. You can instead manually do a nearest neighbor scale , as this question shows: How to stretch images with no antialiasing

Alternative CSS Approach

Another approach is to scale the canvas using CSS. In Chrome/Safari/IE you can just do:

<canvas style="zoom:200%" />

In Firefox, you can use a scale transform to achieve the same effect:

<canvas style="-moz-transform:scale(2)" />

In many ways this approach is easier, but it es with its own little gotchas and browser specific quirks.

I think you need to bind the onresize event to your body of document.

Then inside the the event you need to resize the canvas using window.innerWidth and window.innerHeight.

Have a look @ http://kile.stravaganza/lab/js/canvas_resize/ (view source)

Although it's a bit late to answer this question, I'd like to share what I found to solve the same question. Take it a look please.

panel.css

#Panel {
width:  100%;
height: 30%;
}

app.js

var widthG = 0, height=G = 0;
function updateScale() {
    widthG  = parseInt($('#Panel').width());
    heightG = parseInt($('#anel').height());
}
...

function updateCanvas() {
    ctx = $('#canvas').get(0).getContext('2d');
    ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
    ctx.canvas.width = widthG;
    ctx.canvas.width = heightG;
}

I also tried to re-assign these properties by css syntax, but it doesn't work.

$('#canvas').width(panelW);
$('#canvas').height(panelH);      

Hope this helps ppl suffered from the same question.