Konva — Basics

Photo by Rob Laughter on Unsplash

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’ll 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…