调整HTML5画布元素的大小

Question

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

Answer 1

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 comes with its own little gotchas and browser specific quirks.

Answer 2

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.org/lab/js/canvas_resize/ (view source)

Answer 3

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.