0

When I try to draw with canvas where the canvas element has a large height and width (somewhere in the five digits but I haven't found exactly) it doesn't seem to work:

<canvas id="canvasElement" height="15000" width="15000"></canvas>

http://jsfiddle.net/mrxxzqqr/1/

Whereas with a canvas of 10000 width and 10000 height it works (at least in Chrome):

<canvas id="canvasElement" height="10000" width="10000"></canvas>

http://jsfiddle.net/mrxxzqqr/

No errors, so I'm not sure why.

Elijah
  • 4,609
  • 3
  • 28
  • 36
  • I suggest not pushing the boundaries of canvas specifications for the sake of "flattening" your code. Responsiveness will suffer and large quantities of resources will be used. At this size, you may even preclude the browser from using GPU acceleration to assist in drawing. You're going down a dark path...just don't! – markE Sep 08 '14 at 23:43
  • How am I pushing the boundaries of the specification? Does it mention somewhere that canvas elements greater than 10,000px aren't supported? – Elijah Sep 09 '14 at 00:21
  • Keep in mind the browser uses a pixel array that is 4X the size of the canvas dimensions. That's nearly a gigabyte dedicated to just the pixel array for your 15K x 15K canvas. The GPU uses compositing to speed drawing which means the GPU would need multiple times that gigabyte to do compositing--not common on even high end GPUs. Just because theory says it's possible, practicality says it's not reasonable. – markE Sep 09 '14 at 00:56
  • 1
    Canvas tags have size limits. See this question/answers: http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element – Adrian Holovaty Sep 09 '14 at 20:40

1 Answers1

0

As noted in the comments, canvas has size limits that vary by browser:

Maximum size of a <canvas> element

Community
  • 1
  • 1
Elijah
  • 4,609
  • 3
  • 28
  • 36