HTML5 Canvas Shape Caching with KineticJS

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.

new window

Code Editor

Modified on April 9th, 2013 by Eric Rowell
comments powered by Disqus