Hacker News new | past | comments | ask | show | jobs | submit login

Have you tried turning off the

#glows { filter: blur(5px) }

Canvas can be fast but if you step into the unoptimized areas the slowdowns can be substantial. Blurring can slow things down a lot. Drawing strokes with a thickness other than one also seems to be an issue. I had one game running at 10fps on an i7 with fancy 3d card, it ran at 30fps on a $200 arm ChromeBook.

This wee game prototype http://www.fingswotidun.com/ld42/post/ runs fine on fairly modest cellphones but the puff of smoke on death kills performance due to the multiply composite mode not being accelerated.

The only thing you can really be sure of is that drawing images is fast. Untransformed images are very fast, rotated and scaled images, less so but still quite impressively fast.

This http://www.fingswotidun.com/ld42 uses only unscaled images and ran at full FrameRate on an 900Mhz Arm9 Mali400.

For reference. A machine that handles only a few fps on Acolytefight handles 40,000 bunnies on this https://lemon07r.github.io/kha-html5-bunnymark/




OMG... that's exactly what the problem was. I turned that off and performance is 60fps on Firefox once again. Now I need to figure out how to I detect the conditions that I need to turn it on/off... it actually works fine on some Firefox Windows installations at least.

https://bugzilla.mozilla.org/show_bug.cgi?id=925025

Looks like Firefox does the blur in software whereas the other browsers do it in hardware, but apparently you can turn on gfx.webrender.all to make Firefox do it in hardware, not that it seems to work for me...

Edit: It's just easier to turn off blur in Firefox always. So I'm doing that. Turns out there is a clever way to detect Firefox from CSS. Thanks so much for the suggestion!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: