HTML5 Canvas Shape Redraw Performance Tip

Important note: I think using such tricks is an anti-pattern. You should avoid to use it.

Usually when you need to update your canvas you should call layer.draw().

But in small set of cases it is possible to update Konva.Node without updating whole layer.
You can call shape.draw(), BUT remember that in this case shape will be drawn OVER existing canvas.
So it is not possible to use this tip if your node should be placed under other nodes or if it has an opacity.

Instructions: mouseover boxes to highlight.

Konva Shape Redraw Demoview raw

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

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

      var layer = new Konva.Layer();
      stage.add(layer);

      var BOX_SIZE = 15;
      var box;
      // generate boxes
      for (var ix = 0; ix < width / BOX_SIZE; ix++) {
        for (var iy = 0; iy < height / BOX_SIZE; iy++) {
          box = new Konva.Rect({
            x: ix * BOX_SIZE,
            y: iy * BOX_SIZE,
            width: BOX_SIZE - 1,
            height: BOX_SIZE - 1,
            fill: 'darkgrey',
            stroke: 'white',
          });
          layer.add(box);
        }
      }
      layer.draw();

      // as all boxes stay separately with no overlap
      // and they have no opacity
      // we can call 'box.draw()' and we will have expected result
      // REMEMBER that is this case box will be drawn on top of existing layer
      // without clearing
      layer.on('mouseover', function (evt) {
        var box = evt.target;
        box.fill('#E5FF80');
        box.draw();
      });
      layer.on('mouseout', function (evt) {
        var box = evt.target;
        box.fill('darkgrey');
        box.draw();
      });
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.