Yay! It’s Christmas!
And just as we promised, here’s the first of our 12 days of CreativeJS posts.
Each day we’ll be bringing you a useful little nugget of information so digestible you’ll be able to stomach it even after an extra helping of sprouts! The first is a helpful tip for canvas optimisation.
You might have noticed on OSX that drawing bitmaps into a 2D canvas can be really really slow. Unless you draw them at a whole pixel position at their actual size.
Check out this bunny benchmark to see the difference.
So what if you want to rotate your image? I’d just pre-render the sprite at several preset rotations into a spare canvas, like a sprite sheet. Then you can use the extra arguments in drawImage to select which bit of the sheet you use.
For more info about this optimisation see this blog post.
And don’t forget to check back tomorrow for a tip on how to speed up your DOM elements.