Skip to content Skip to sidebar Skip to footer
Home / Google Chrome / Html5 Canvas

How To Get Multiple Canvas Tags To Render Reliably In Chrome?

Post a Comment
Has anyone had problems with Google Chrome not rendering canvas tags when more than one canvas is used on a page? I've been having this happen. It occurs in some of my pages, but n

Solution 1:

EDIT: the discussion of the Chrome bug report (linked below) reveals a workaround: attach a unique CSS class to each canvas. I.e.

<canvas id="A" width=400 height=400 class=canvasA></canvas> <canvas id='B' width=400 height=400 class=canvasB></canvas>​

Turns out this is in fact a bug in Chrome: http://code.google.com/p/chromium/issues/detail?id=144686. A couple of details emerge from the bug comments:

  1. You can work around the bug by going to about:flags and activating the "Disable accelerated 2D canvas" option.

  2. Small canvases (e.g. 200 x 200) do not appear to exhibit the problem, because the problem seems to be GPU-related and Chrome does not attempt to use the GPU for small canvases.

Post a Comment for "How To Get Multiple Canvas Tags To Render Reliably In Chrome?"