Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet

HTML5 Canvas Shape Caching with KineticJS

Discussion

One way to drastically improve drawing performance for complex KineticJS shapes is to cache them as images.  This can be achieved by using the toImage() method to convert a node into an image object, and then instantiating a new Kinetic.Image shape with the image object.

This particular tutorial of drawing 10 cached stars rather than drawing 10 individual stars sees about a 4x drawing performance boost.  Caching can be applied to any node, including the stage, layers, groups, and shapes.

Note: The toImage() method requires that the image is hosted on a web server with the same domain as the code executing it.

comments powered by Disqus