HTML5 Canvas Disable Perfect Drawing Tip

In some case drawing on canvas has unexpected result.
For example let’s draw shape with fill, stroke and opacity.
As stroke are drawn on top of fill. There’s a line of half the size of the stroke inside the shape which is darker
because it’s the intersection of the fill and the stroke.

Probably that is not expected for you. So Konva fixes such behavior with using buffer canvas.

In this case Konva is doing these:

  1. Draw shape on buffer canvas
  2. Fill and stroke it WITHOUT opacity
  3. Apply opacity on layer’s canvas
  4. Then draw on layer canvas result from buffer

But using buffer canvas might drop performance. So you can disable such fixing:

shape.perfectDrawEnabled(false);

See difference here:

Konva Disable Perfect Drawing Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Disable Perfect Drawing 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();
      stage.add(layer);

      var group1 = new Konva.Group({
        x: 50,
        y: 50,
      });
      layer.add(group1);
      var lebel1 = new Konva.Text({
        text: 'Shape with default drawing behaviour',
      });
      group1.add(lebel1);
      var rect = new Konva.Rect({
        y: 20,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 10,
        opacity: 0.5,
      });
      group1.add(rect);

      var group1 = new Konva.Group({
        x: 200,
        y: 100,
      });
      layer.add(group1);
      var lebel1 = new Konva.Text({
        text: 'Shape with perfectDrawEnabled = false',
      });
      group1.add(lebel1);
      var rect = new Konva.Rect({
        y: 20,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 10,
        opacity: 0.5,
        perfectDrawEnabled: false,
      });
      group1.add(rect);
    </script>
  </body>
</html>
Enjoying Konva? Please consider to support the project.