8

I seem to have stumbled across a bug in Chrome's implementation of canvas. If you create a canvas element with a large width (e.g. 17000), any paths drawn to that canvas after a certain distance down the canvas get drawn as only a pixel or two in width. Also, the width can't be a whole pixel or it doesn't get drawn at all.

Here's an example illustrating the problem. The two rectangles should be the same width, but they aren't.

http://jsbin.com/ehuvew/2/edit

Has anyone encountered this? Does anyone know of a workaround?

Chmille4
  • 283
  • 2
  • 8
  • You seem to be right. Maybe a rounding error. Obvious workaround : make more than one canvas. – Denys Séguret May 25 '12 at 16:18
  • 8
    Check if the cutoff on this 'bug' is at/around 16,384, which'd indicate there's some bit-math gone wrong somewhere inside chrome. 17,000 is too arbitrary a value for such things. – Marc B May 25 '12 at 16:20
  • @MarcB You seem to be on to something. If I change the width to 16,384 it displays correctly, but 16,385 shows the incorrect behavior. – Chmille4 May 25 '12 at 16:38
  • So... canvas in chrome is limited to 14bits for size? interesting. – Marc B May 25 '12 at 16:48
  • 3
    @MarcB: [Webkit limits both dimensions to 32k and total area to 32k*8k](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/html/HTMLCanvasElement.cpp#73). I'm guessing OP has a square area of 16k*16k... – DCoder May 25 '12 at 17:03
  • @DCoder if you change from drawing paths to fillRect (as shown by Adil in a comment: jsbin.com/ehuvew/7/edit#javascript,html,live) then it displays correctly. So it seems to be an issue specifically with drawing paths and not just the size of the canvas. – Chmille4 May 25 '12 at 18:17
  • I ran into this a few years ago, I couldn't find any way to get it to work with larger than 16k*16k so I had to develop a system to draw individual paths to smaller off-screen canvases and then "stitch" them together as the user panned around the world. Since then I wrote a whole JS engine that renders infinite worlds to canvas (Isogenic Game Engine) but employs a whole scenegraph. Probably outside your scope I suspect (pun intended). – Rob Evans May 09 '13 at 20:28
  • I guess I'm a little late for this. This seems to be working currently in the new versions of browsers (Chromium 35.0.1916.153 on Linux). I'm guessing the browsers have increased the maximum size. I tried to increase the width upto 32767 and it works, but if I hit 32768, it doesn't work. That's the [maximum limit set in the code](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/html/HTMLCanvasElement.cpp#73) as linked by [DCoder](https://stackoverflow.com/users/1233508/dcoder). Firefox seems to have a limit around 16000 though. – Chirag Bhatia - chirag64 Jun 14 '14 at 14:33

1 Answers1

0

I checked and confirmed the behavior above described on chrome Versão 19.0.1084.52 (Ubuntu)

also checked the limits where it occurs and its 8192 pixels wide

it seems related to the chromium bug reported here: http://code.google.com/p/chromium/issues/detail?id=121405

neu-rah
  • 1,662
  • 19
  • 32