How to resize html canvas element?

Question

I have a canvas element defined statically in the html with a width and height. If I attempt to use JavaScript to resize it dynamically (setting a new width and height - either on the attributes of the canvas or via the style properties) I get the following error in Firefox:

uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: file:///home/russh/Desktop/test.html :: onclick :: line 1" data: no]

Is it possible to resize this element or do I have to destroy it and create a new element on the fly?

Solution 1

You didn't publish your code, and I suspect you do something wrong. it is possible to change the size by assigning width and height attributes using numbers:

canvasNode.width  = 200; // in pixels
canvasNode.height = 100; // in pixels

At least it works for me. Make sure you don't assign strings (e.g., "2cm", "3in", or "2.5px"), and don't mess with styles.

Actually this is a publicly available knowledge — you can read all about it in the HTML canvas spec — it is very small and unusually informative. This is the whole DOM interface:

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL();
  DOMString toDataURL(in DOMString type, [Variadic] in any args);

  DOMObject getContext(in DOMString contextId);
};

As you can see it defines 2 attributes width and height, and both of them are unsigned long.

Solution 2

Note that if your canvas is statically declared you should use the width and height attributes, not the style, eg. this will work:

<canvas id="c" height="100" width="100" style="border:1px"></canvas>
<script>
    document.getElementById('c').width = 200;
</script>

But this will not work:

<canvas id="c" style="width: 100px; height: 100px; border:1px"></canvas>
<script>
    document.getElementById('c').width = 200;
</script>

Solution 3

I just had the same problem as you, but found out about the toDataURL method, which proved useful.

The gist of it is to turn your current canvas into a dataURL, change your canvas size, and then draw what you had back into your canvas from the dataURL you saved.

So here's my code:

var oldCanvas = canvas.toDataURL("image/png");
var img = new Image();
img.src = oldCanvas;
img.onload = function (){
    canvas.height += 100;
    ctx.drawImage(img, 0, 0);
}

Solution 4

<div id="canvasdiv" style="margin: 5px; height: 100%; width: 100%;">
    <canvas id="mycanvas" style="border: 1px solid red;"></canvas>
</div>
<script>
$(function(){
    InitContext();
});
function InitContext()
{
var $canvasDiv = $('#canvasdiv');

var canvas = document.getElementById("mycanvas");
canvas.height = $canvasDiv.innerHeight();
canvas.width = $canvasDiv.innerWidth();
}
</script>

Solution 5

This worked for me just now:

<canvas id="c" height="100" width="100" style="border:1px solid red"></canvas>
<script>
var c = document.getElementById('c');
alert(c.height + ' ' + c.width);
c.height = 200;
c.width = 200;
alert(c.height + ' ' + c.width);
</script>

View more solutions

Comments

[RobKohr]

Note: when you change the canvas size it seems to clear the canvas (at least in chrome).

[Alexis]

yes. I agree. Is there a way to resize the canvas while also resizing (scaling) the images that is inside it?

[Anderson Green]

It would be helpful to post an example usage of this on jsfiddle.

[fuzzyTew]

ctx.getImageData() and ctx.putImageData() are lighter weight and designed for this task.

[Joseph Lennox]

@Alexis Changing it's style changes it's scaling. So canvas.style.width = "700px"; will change it's scaling but canvas.width = 700; will not.

[Rana Ghosh]

@JosephLennox That is super useful to know. You saved me a ton of mental effort by mentioning that.

[snapfractalpop]

@fuzzyTew I'm pretty sure that using getImageData() and putImageData() will be efficient, but will copy pixel by pixel, thus not scaling the old image data, whereas using drawImage() would allow for scaling.

[Tomáš Zato]

Why use toDataUrl? This causes unnecessary data conversion (raw=>png). You could use drawImage twice instead.

[ChrisPhoenix]

Yes, thanks, @JosephLennox. In jquery, $('#canvas').width(500) will rescale, while $('#canvas')[0].width = 500 will not rescale. I was doing the former and would have taken forever solving it without your comment.

[AndreKR]

It not just resets the canvas, it does so asynchronously. So redrawing in the same function as the size change has no effect. The redraw code has to be wrapped in setTimeout(() => { ... }, 0). This includes things like lineWidth = ....