HTML5 Canvas Layer Management Performance Tip

When creating Konva applications, the most important thing to consider,
in regards to performance, is layer management. One of the things that makes
Konva stand out from other canvas libraries is that it enables us to create
individual layers, each with their own canvas elements. This means that we can
animate, transition, or update some stage elements, while not redrawing others.
If we inspect the DOM of a Konva stage, we’ll see that there is actually one
canvas element per layer.

This tutorial has two layers, one layer that’s animated, and another static layer
that contains text. Since there’s no reason to continually redraw the text, it’s placed in its own layer.

Note: Do not create too many layers. Usually 3-5 is max.

Konva Layer Management Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Layer Management 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 animLayer = new Konva.Layer();
      var staticLayer = new Konva.Layer();

      /*
       * leave center point positioned
       * at the default which is at the center
       * of the hexagon
       */

      var blueHex = new Konva.RegularPolygon({
        x: 50,
        y: stage.height() / 2,
        sides: 6,
        radius: 40,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
      });

      var yellowHex = new Konva.RegularPolygon({
        x: stage.width() / 2,
        y: stage.height() / 2,
        sides: 6,
        radius: 30,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
      });

      /*
       * move center point to right side
       * of hexagon
       */
      var redHex = new Konva.RegularPolygon({
        x: 250,
        y: stage.height() / 2,
        sides: 6,
        radius: 30,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        offset: {
          x: 30,
          y: 0
        },
        draggable: true
      });

      var text = new Konva.Text({
        x: 10,
        y: 10,
        text: 'Static Layer',
        fontSize: '30',
        fontFamily: 'Calibri',
        fill: 'black'
      });

      staticLayer.add(text);

      animLayer.add(blueHex, yellowHex, redHex);
      stage.add(animLayer, staticLayer);

      var period = 2000;
      var anim = new Konva.Animation(function(frame) {
        var scale = Math.sin((frame.time * 2 * Math.PI) / period) + 0.001;
        // scale x and y
        blueHex.scale({ x: scale, y: scale });
        // scale only y
        yellowHex.scaleY(scale);
        // scale only x
        redHex.scaleX(scale);
      }, animLayer);

      anim.start();
    </script>
  </body>
</html>