HTML5 Canvas Shape Caching Performance Tip

One way to drastically improve drawing performance for complex Konva shapes is to cache them as images.
This can be achieved by using the cache() method to convert a node into an 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 layers, groups, and shapes.

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

Konva Shape Caching Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Shape Caching Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();

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

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

      var clone;
      for (var n = 0; n < 10; n++) {
        clone = star.clone({
          x: Math.random() * stage.width(),
          y: Math.random() * stage.height(),
        });
        clone.cache();
        layer.add(clone);
      }

      layer.draw();
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.