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.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

var layer = new Kinetic.Layer();

var star = new Kinetic.Star({
        innerRadius: 20,
        outerRadius: 50,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 5,
        numPoints: 5,
        x: 60,
        y: 60,
        draggable: true,
        shadowOffset: 5,
        shadowColor: 'black',
        shadowBlur: 5,
        shadowOpacity: 0.5
      });

layer.add(star);
      stage.add(layer);

// convert star node into a cached image
      star.toImage({
        // cached image will be 120 x 120
        width: 120,
        height: 120,
        /*
         * when star has been converted into an image,
         * use the image to instantiate image objects and
         * then add them to the layer
         */
        callback: function(img) {
          for(var n = 0; n < 10; n++) {
            var image = new Kinetic.Image({
              image: img,
              x: Math.random() * stage.getWidth(),
              y: Math.random() * stage.getHeight(),
              offset: 60,
              draggable: true
            });

layer.add(image);
          }

layer.draw();
        }
      });

</script>
  </body>
</html>

< Complex Load Three.js >

More Examples

No Related Post

Modified on April 9th, 2013 by Eric Rowell