Asked  7 Months ago    Answers:  5   Viewed   73 times

I'm working with a canvas element with a height of 600 to 1000 pixels and a width of several tens or hundreds of thousands of pixels. However, after a certain number of pixels (obviously unknown), the canvas no longer display shapes I draw with JS.

Does anyone know if there's a limit?

Tested both in Chrome 12 and Firefox 4.

 Answers

13

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.

Tuesday, June 1, 2021
 
relyt
answered 7 Months ago
18

You can store as much data as you like within in sessions. All sessions are stored on the server. The only limits you can reach is the maximum memory a script can consume at one time, which by default is 128MB.

(Similar answers: Ideal PHP Session Size? - some useful comments)

Wednesday, March 31, 2021
 
Corne
answered 9 Months ago
28

When you do this:

window.onload = init();

the function init() will be executed immediately (what causes the error, because getContext() gets called too early, i.e. before the DOM is loaded), and the return value of init() will be stored to window.onload.

So you want to actually do this:

window.onload = init;

Note the missing ().

Wednesday, July 21, 2021
 
Claudio
answered 5 Months ago
64

Ok, so you were almost there. When you iterate round your array of rectangles, you are iterating over the array key not the objects themselves (see How to Loop through plain JavaScript object with objects as members?). Plus, as @jimjimmy1995 pointed out, you need to set the fill using .fillStyle as .fillRect does not have a fill parameter.

This code will work:

function Shape(x, y, w, h, fill) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.fill = fill;
}

// get canvas element.
var elem = document.getElementById('myCanvas');

// check if context exist
if (elem.getContext) {

    var myRect = [];

    myRect.push(new Shape(10, 0, 25, 25, "#333"));
    myRect.push(new Shape(0, 40, 39, 25, "#333"));
    myRect.push(new Shape(0, 80, 100, 25, "#333"));

    context = elem.getContext('2d');
    for (var i in myRect) {
        oRec = myRect[i];
        context.fillStyle = oRec.fill;
        context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h);

    }

}
Thursday, August 5, 2021
 
jsmith
answered 4 Months ago
47

The standard says that SIZE_MAX must be at least 65535.

It specifies no upper bound, and gcc's implementation is perfectly valid.

Quoting the reference you cited (emphasis added):

Its implementation-defined value shall be equal to or greater in magnitude (absolute value) than the corresponding value given below, with the same sign.

Monday, August 9, 2021
 
Rocket
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share