The HTML5 canvas has been supported by all popular browsers for a long time now. You can use it for drawing graphics in a browser with the help of JavaScript. The graphics that can be created on a canvas range from simple lines and shapes to photo compositions and animations.

In this series, you will learn about a very helpful canvas library called Konva. You can use Konva to draw different shapes on the canvas or the stage. Among other things, the library allows you to scale, rotate and animate all these shapes and attach event listeners to them. 

This tutorial will focus on the fundamental concepts of the library while providing a brief overview of different features of the library. After that, we will move on to more specific and complex topics later. The library first came into existence as a fork of the popular KineticJS library. 

Stage, Layers, and Shapes

Everything that you draw with Konva will require you to create a stage using Konva.Stage. You can specify the container element of a stage using the container attribute. Each stage also requires a width and height value which can be specified using the width and height attributes respectively.

A single stage can contain multiple layers. Each of these layers will have two <canvas> renderers. The scene renderer is used to draw all the shapes that are visible to you on the stage. The hit graph renderer is hidden from the users. It is used to perform high-performance event detection.

A single layer can contain multiple shapes, groups of different shapes, or a group of groups. The stage, layers, groups and shapes act like virtual nodes which can be individually styled and transformed.

Drawing Shapes Using Konva

Before we create any shapes, we need to include the library in your project. There are multiple ways of doing this. If you are using package managers, you can run the following commands.

npm install konva
// OR
bower install konva

You can also link directly to a minified version of the library hosted on cdnjs and jsDelivr.

Once you have installed the library, you can use the following code to create rectangular shapes on the canvas.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var rectA = new Konva.Rect({
  x: 75,
  y: 150,
  width: 200,
  height: 50,
  rotation: 45,
  fill: "blue",
  stroke: "black",
  strokeWidth: 4
});

var rectB = new Konva.Rect({
  x: 350,
  y: 50,
  width: 100,
  height: 250,
  cornerRadius: 50,
  fill: "red",
  stroke: "brown",
  strokeWidth: 10
});

layerA.add(rectA);
layerA.add(rectB);

stage.add(layerA);

Drawing anything on the canvas is a five-step process. First, you need to instantiate a stage where different shapes would be drawn using Konva.Stage. This requires you to specify the width and height of the stage as well as the id for the container element which would contain the stage. In our case, the rectangles are being drawn inside a div whose id is example.

In the next step, you have to instantiate all the layers that you want to render on your stage. We are only creating a single layer in this example, but you can create multiple layers and add them all to a single stage. Different layers can be very useful when your background consists of static as well as moving elements. In such cases, you can add the static elements on one layer and moving elements on the other. Since you won't have to update the static background after each redraw, this can drastically improve the performance.

After creating the layers, you can initialize different shapes like rectangles, ellipses, stars and rings that you want to show on the layers. Finally, you have to add the shapes to the layers and the layers to the stage.

Creating Groups in Konva

Grouping different shapes together is a good idea when you want to manage all the shapes as a single unit. For example, let's say that you have created a car using two circles for wheels and two rectangular blocks for the body. If you want to move this car ahead without creating a group, you will have to individually translate all the shapes one at a time. A more efficient method is to just add the circles and the rectangles to a group and translate them all at once.

To add any shape to a group, you need to use the add() method, just like you did when adding shapes to a layer. You can also add a group to another group to create more complex entities. For example, you could create a person inside the car as one group and add that person to the group that represents the car.

In the following example, I have kept things simple and only created a carA group. After that, I can rotate and scale the whole car at once.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var wheelA = new Konva.Ring({
  x: 130,
  y: 230,
  innerRadius: 5,
  outerRadius: 30,
  fill: "gray",
  stroke: "black",
  name: "First Wheel"
});

var wheelB = new Konva.Ring({
  x: 270,
  y: 230,
  innerRadius: 5,
  outerRadius: 30,
  fill: "gray",
  stroke: "black",
  name: "Second Wheel"
});

var frameA = new Konva.Rect({
  x: 80,
  y: 150,
  width: 240,
  height: 60,
  cornerRadius: 10,
  fill: "red",
  stroke: "black",
  name: "Bottom Frame"
});

var frameB = new Konva.Rect({
  x: 135,
  y: 90,
  width: 120,
  height: 60,
  cornerRadius: 10,
  fill: "orange",
  stroke: "black",
  name: "Top Frame"
});

var carA = new Konva.Group({
  x: 50,
  y: 0,
  rotation: 20,
  scaleX: 1.2
});

carA.add(wheelA, wheelB, frameA, frameB);

layerA.add(carA);

stage.add(layerA);

Layering in Konva

You already know about layers in Konva. Layering is something different. By default, all shapes that you add to a layer are drawn in the order in which they were added. This means that shapes added to a layer after all others will be drawn on top of other shapes.

Konva allows you to control the order in which the shapes are drawn using different layering methods like moveToTop(), moveToBottom(), moveUp(), moveDown(), and zIndex().

The moveToTop() method will draw the given shape over all other shapes that have been added to the same layer. Shapes drawn on a layer that was added to the Konva stage after the layer of our specific shape will still remain above our shape. This is why the indigo circle in the following example remains below the light green circle even after calling moveToTop().

The moveToBottom() method will draw the given shape below all other shapes that have been added to the same layer. Just like moveToTop(), the shapes will move to the bottom of their own layers and not the layers below them.

The moveUp() and moveDown() methods move the shape on which they are called, one position above or below their current position in the same layer. The zIndex() method is used to set the index of a shape inside its parent layer. Unlike CSS, you cannot set an arbitrary zIndex value in Konva. For a layer with 10 shapes, the zIndex value can only be between 0 and 9 (inclusive).

In the above example, you can see that just pressing the "Indigo Top" button does not draw the indigo circle above all others, while pressing "Indigo Above all Others" will position it at the top. This is because the last button also moves the layer containing the indigo circle to the top.

Since the circles can be dragged around, it might be a good idea to drag them over each other and see how the position of the indigo circle changes when you press different buttons.

Final Thoughts

We have covered some fundamental concepts related to Konva in this tutorial. You should now be able to draw some common shapes on the canvas and move them around as a group. The tutorial also showed you how to push a particular shape up or down in case of an overlap.

JavaScript has become one of the de facto languages of working on the web. It’s not without its learning curves, and there are plenty of frameworks and libraries to keep you busy, as well. If you’re looking for additional resources to study or to use in your work, check out what we have available on Envato Market.

If you have any questions related to this tutorial, feel free to let me know in the comments. The next tutorial will teach you how to draw basic shapes in Konva.