Konva – Basics

Introduction

Konva is a wrapper for the HTML5 canvas element.

In this post we’ll see a basic introduction of Konva library and we’ll also use it in an Angular application.

Konva has very good documentation available, please check it to get more details as needed.

Setting Up the Code Solution

I will be using an existing angular application from my previous posts. You can get the code from this git repository. You can use your own application or create a new one, the steps are same.

We can install konva using npm

npm install konva

next I created an angular component konva-demos for demo purposes and set up the routing.

In the component we are importing Konva from the package we installed earlier using npm.

Setting Up the Stage

All the world’s a stage, and all the men and women merely players

William Shakespeare

Konva uses a Stage to represent the canvas. We can have one or more layers on the stage holding shapes. We can also use Group which is a Konva feature that allows us to glue shapes together for convenience.

In code we can setup all this very easily and Konva documentation shows very good example of it. Following are typical steps involving getting started with Konva (please check the source code for details)

We can now run the angular application to test the output and following screenshot shows that the stage is setup with a simple shape.

Source code is available from this git repository.

You can check the deployed application on this link.

Summary

Konva is a wrapper around HTML Canvas and extends the 2d context. It is easier to setup and start with.

In this post we learned the few building blocks of Konva e.g. Stage, Layer, Circle etc. and how to connect these together to draw on the stage (canvas).

Let me know if you have any comments or questions. Till next time, Happy coding.