0

When canvas size is large, lines drawn do not appear at all.

Example: http://jsfiddle.net/yu5gxgpt/3/

<canvas id="Grid" width="20000" height="16000">
</canvas>

var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(10, 20);
context.lineTo(100, 20);
context.strokeStyle = "#FF0000";
context.lineWidth = 1;
context.stroke();

Lines do not show up for Grid1. If I reduce the size of Grid1, then the lines will be drawn. Why is that?

Browser tested: Chrome on OSX

ChrisU
  • 236
  • 2
  • 9
  • 1
    On my machine the line works fine on IE11 & Edge but fails on Chrome and FF. Browsers have size limits on canvas elements. Sounds like you've reached the size limit on Chrome. IMHO, since canvases with overly large size use much larger resources, I would recommend you refactor your code to use 1 or more smaller canvas instead of the overly large canvas. ;-) – markE Apr 28 '16 at 08:04
  • Ah that makes sense. Can you post that as an answer so I can mark it as such? Thanks! – ChrisU Apr 28 '16 at 08:11

1 Answers1

1

Looks like there are limitations to the canvas size depending on the browser: Maximum size of a <canvas> element

Community
  • 1
  • 1
iestync
  • 121
  • 6
  • The sizes in your cited answer are out-of-date. Please cite the current size limits for the various modern browsers – markE Apr 28 '16 at 19:22