HTML5 Canvas Batch Draw Tip

In some situations, we may want to update a Konva shape as fast as possible,
but without causing too many redraws. For example, if we want to update an
element on the stage via mousemove, we don’t want to redraw the layer with the
draw() method, because the mousemove event could be fired hundreds of times per
second, which would result in a forced frame rate of over a hundred frames per second.
Often times this can cause jumpy animations because browsers simply can’t handle excessive redraws.

For situations like this, it’s much better to use the batchDraw() method
which automatically hooks redraws into the Konva animation engine.
No matter how many times you call batchDraw(), Konva will automatically
limit the number of redraws per second based on the maximum number of frames
per second that the browser can handle at any given point in time.

Instructions: Move your mouse over the stage to spin the rectangle

Konva Batch Draw Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Batch Draw Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight
      });

      var layer = new Konva.Layer();

      var rect = new Konva.Rect({
        x: 110,
        y: 100,
        width: 200,
        height: 20,
        offset: {
          x: 100,
          y: 10
        },
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
      });

      // add the shape to the layer
      layer.add(rect);

      // add the layer to the stage
      stage.add(layer);

      stage.on('mousemove', function() {
        rect.rotate(5);
        layer.batchDraw();
      });
    </script>
  </body>
</html>