Maximum Size of a ≪Canvas≫ Element

Maximum size of a canvas element

Updated 10/13/2014

All tested browsers have limits to the height/width of canvas elements, but many browsers also limit the total area of the canvas element. The limits are as follows for the browsers I'm able to test:

Chrome:

Maximum height/width: 32,767 pixels

Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)

Firefox:

Maximum height/width: 32,767 pixels

Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)

IE:

Maximum height/width: 8,192 pixels

Maximum area: N/A

IE Mobile:

Maximum height/width: 4,096 pixels

Maximum area: N/A

Other:

I'm not able to test other browsers at this time. Refer to the other answers on this page for additional limits.

---

Exceeding the maximum length/width/area on most browsers renders the canvas unusable. (It will ignore any draw commands, even in the usable area.) IE and IE Mobile will honor all draw commands within the usable space.

What determines the max size of the canvas html element in IE11?

The Canvas Specification states "the element can be sized arbitrarily by a style sheet", so based on this and the information you shared from the link, IE must likely be implementing their own maximum size. This seems useful, but does not provide any sources to back up the numbers shown (the favourite answer).

What is the maximum size for an HTML canvas?

32,768 = 2¹⁵ and 2¹⁵ - 1 = 32,767 is the biggest number a short int can hold.

So Google Chrome probably uses the datatype short int for storing the sizes of a <canvas> element.

If you want to display larger <canvas> elements, you could try to use multiple ones.
You should also consider another implementation technique if you really need ~33k pixels!

Is there any way around the HTML5 canvas size limitation?

Pay a visit to SVG it seems to be well supported

You may want to use svg instead because you get rendering for free, so, scrolling and zooming should not be a problem as opposed to a canvas where you have to do pretty much everything yourself.

Maximum size of canvas element

Depends on the users who are going to use the canvas and what it is going to be used for. I would recommend the following:

@media (min-width: 300px) {
    .myCanvas{
        width:300px;
        height:533px;
    }
}
/*Large phone Size*/
@media (min-width: 600px) {
    .myCanvas{
        width:600px;
        height: 1066px;
    }
}
/*Tablet and Standard Size*/
@media (min-width: 1920px) {
        .myCanvas{
        width:1920px;
        height:1080px;
    }
}

Unfortunately, the above code won't work (which is a bummer) as the width and height need to be defined in the HTML tag, however you can still use these sizes for scaling purposes depending on who you're designing the canvas for.

How can i change default max canvas size?

Canvas size is device dependent. Have a look at Maximum size of a <canvas> element, this may help you to resolve the issue.

Setting canvas width 100% and max-width

The drawing API dimensions for the canvas element does not need to match the CSS dimensions that it occupies on the screen. This allows one to do sub pixel graphics if they so desired, (to create smooth motion with anti aliasing). So the canvas width of 100% means nothing it wants the number of pixels it should be using, I believe you get the default width of 400 as if no width was used at all. However it can be changed with javascript to any width you would like.

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = $(window).width(); 
canvas.height = 630;

Or to do anti-aliasing.

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = $(window).width()*2; 
canvas.height = 630*2;

Set the canvas width to a number higher that the space it has on the screen. Each canvas pixel only takes up 1/2 an actual pixel and movement looks more video like.

Update added jsfiddle

http://jsfiddle.net/juaovd7o/

<canvas id="myCanvas" width="284px" height="120px">hello</canvas>
<canvas id="myCanvas2" style="width:284px;height:120px;"></canvas>
<img src="http://whitedove-coding.com/static/whitedove-829.png" id="dove">

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.rect(0, 0, 284, 120);
      context.lineWidth = 4;
      context.strokeStyle = 'black';
      context.stroke();
 var canvas2 = document.getElementById('myCanvas2');
      canvas2.width=568;
      canvas2.height=240;
      var context2 = canvas2.getContext('2d');
      context2.beginPath();
      context2.rect(0, 0, 568, 240);
      context2.lineWidth = 4;
      context2.strokeStyle = 'black';
      context2.stroke();
var img=document.getElementById("dove");
      context2.drawImage(img,0,0);
      context.drawImage(img,0,0);

The width attrib will set both the css and the API width if they are not set by other means, but 100% width is not valid for the API so the API falls back to its default width of 400px.

Per your question, you need to use both the CSS width of 100% and set the canvas API with or to whatever number of pixels that will be? jquery $(window).width() gives us the pixel count of 100%.

Is there a practical limit to the number of canvas elements you can have on one page?

Each canvas consumes memory at least, not less than an image of the same size.

How big are those canvas, anyway?

Having 500 different images on the same page could slow down the PC, and if those images are scaled down via CSS (so you have additional CPU usage), the slowness is overwhelming (I already tested it).

quick test done:

Ive created 500 512x512 canvases, and the Windows memory usage was about 40MB. Not so much, really.

Now I should draw in each one via JS, maybe using them allocates much more memory.

-edit-

500 canvases, 512x512, in each one is drawn a triangle: http://jsfiddle.net/3U4hG/1/

Consumes about 0.5GB, about 1MB for each canvas, and considering that 512x512x4 (4 bytes per pixel) is 1MB, the memory usage can be easily determined.

---

Related Topics