How to draw custom canvas shape with Vue?

To create a custom shape with vue-konva, we should use the v-shape component.

When creating a custom shape, we need to define a drawing function that is passed a Konva.Canvas renderer. We can use the renderer to access the HTML5 Canvas context, and to use special methods like context.fillStrokeShape(shape) which automatically handles filling, stroking, and applying shadows.

Instructions: The demo shows a custom shape drawn using canvas drawing commands.

<template>
  <v-stage ref="stage" :config="stageSize">
    <v-layer>
      <v-shape :config="{
        width: 260,
        height: 170,
        sceneFunc: function(context, shape) {
          const width = shape.width();
          const height = shape.height();
          context.beginPath();
          context.moveTo(0, 0);
          context.lineTo(width - 40, height - 90);
          context.quadraticCurveTo(width - 110, height - 70, width, height);
          context.closePath();

          // (!) Konva specific method, it is very important
          context.fillStrokeShape(shape);
        },
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4
      }"/>
    </v-layer>
  </v-stage>
</template>

<script>
const width = window.innerWidth;
const height = window.innerHeight;

export default {
  data() {
    return {
      stageSize: {
        width: width,
        height: height
      }
    };
  }
};
</script>

Open Sandbox