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.

Vanilla

import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
});

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

const 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);

const 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);

React

import { Stage, Layer, Text } from 'react-konva';

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text
          text="Default shape rendering.\nfillAfterStrokeEnabled = false"
          x={50}
          y={50}
          fontSize={40}
          stroke="green"
          fill="yellow"
          strokeWidth={3}
        />
        <Text
          text="Reversed rendering order.\nfillAfterStrokeEnabled = true"
          x={50}
          y={150}
          fontSize={40}
          stroke="green"
          fill="yellow"
          strokeWidth={3}
          fillAfterStrokeEnabled={true}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-text :config="textConfig1" />
      <v-text :config="textConfig2" />
    </v-layer>
  </v-stage>
</template>

<script setup>
const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const textConfig1 = {
  text: 'Default shape rendering.\nfillAfterStrokeEnabled = false',
  x: 50,
  y: 50,
  fontSize: 40,
  stroke: 'green',
  fill: 'yellow',
  strokeWidth: 3
};

const textConfig2 = {
  text: 'Reversed rendering order.\nfillAfterStrokeEnabled = true',
  x: 50,
  y: 150,
  fontSize: 40,
  stroke: 'green',
  fill: 'yellow',
  strokeWidth: 3,
  fillAfterStrokeEnabled: true
};
</script>