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.

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.