HTML5 Canvas Disable Perfect Drawing Tip

获取Konva最新的信息

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 KonvaJS fix such behaviour with using buffer canvas.

In this case KonvaJS doing this:

  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 performace. 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/konva@4.0.18/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 defaul 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);

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