Fill and stroke order demo

If a shape has both fill and stroke, by default, Konva will draw filling first then stroke on top of it. That is the best behavior for most of the applications.

How to draw fill part on top of the stroke?

In some rare cases you may need a shape that has stroke first, then a fill on top of it. For that use case you may use fillAfterStrokeEnabled property.

shape.fillAfterStrokeEnabled(true);

Instructions: Take a look into two examples of different fill&stroke order.

Konva Fill Stroke Order Demoview raw

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

      var text1 = new Konva.Text({
        text: 'Default shape rendering.\nfillAfterStrokeEnabled = false',
        x: 50,
        y: 50,
        fontSize: 40,
        stroke: 'green',
        fill: 'yellow',
        strokeWidth: 3,
      });
      layer.add(text1);

      var text2 = new Konva.Text({
        text: 'Reversed rendering order.\nfillAfterStrokeEnabled = true',
        x: 50,
        y: 150,
        fontSize: 40,
        stroke: 'green',
        fill: 'yellow',
        strokeWidth: 3,
        fillAfterStrokeEnabled: true,
      });
      layer.add(text2);
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.