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(this) 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: 300,
height: 300
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) {
context.moveTo(20, 50);
context.lineTo(220, 80);
context.quadraticCurveTo(150, 100, 260, 170);
// Konva specific method
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4
// add the triangle shape to the layer
// add the layer to the stage