Performance issue with canvas paths, esp. when using multiple colors

26 views
Skip to first unread message

Eric Fredricksen

unread,
Apr 12, 2012, 6:03:21 PM4/12/12
to Chromium HTML5
TL;DR: Drawing using canvas paths gobbles CPU when strokeStyle is used
to change colors. Why?

This is on OS/X 10.7.3, Google Chrome 18.0.1025.151

I'm rendering a game in Chrome to a 2D canvas context, using lots of
code like:

ctx.beginPath();
ctx.lineTo(x1,y1);
ctx.lineTo(x2,y2);
...
ctx.stroke();

Over time the perfomance degrades. CPU gets hogged about every second
for about 1/4 second. Profiling in Chrome reveals nothing different
from the normally functioning case. (In particular, the garbage
collector doesn't seem to be busier than ususal.)

The reason I think the drawing code has something to do with it, is
that if I draw in different colors this behavior shows up right away.
That's in spite of the fact that in performance testing, changing
colors caused only a marginal increase in rendering time (say, 10%).

So my only theory is that there's some resource being exhausted
internal to Chrome, outside of what the javascript profiler can see.

Reloading the page doesn't restore performance, but navigating to a
new page, then to the original URL does. Switching away from the tab
restores performance.

CPU usage goes way up on `kernel_task` and `Google Chrome Helper` when
rendering in different colors (from a percent or two each when the
game isn't running):

white mixed colors
kernel_task 15% 35%
Google Chrome Helper 18% 25%
Google Chrome Renderer 25% 18%

Any insight on why changing colors causes this, and what I can do
about it? Besides going monochrome?
Reply all
Reply to author
Forward
0 new messages