HTML5 canvas Custom Shape Tutorial

To create a custom shape with Konva, we can instantiate a Konva.Shape() object.

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.

For a full list of attributes and methods, check out the Konva.Shape documentation

Konva Custom Demoview raw
<!DOCTYPE html>

<script src=""></script>
<meta charset="utf-8">
<title>Konva Custom Shape Demo</title>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;

<div id="container"></div>
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight

var layer = new Konva.Layer();

* create a triangle shape by defining a
* drawing function which draws a triangle
var triangle = new Konva.Shape({
sceneFunc: function (context, shape) {
context.moveTo(20, 50);
context.lineTo(220, 80);
context.quadraticCurveTo(150, 100, 260, 170);

// (!) Konva specific method, it is very important
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4

// add the triangle shape to the layer

// add the layer to the stage