Introduction to Konva

Konva is a 2D canvas library that extends the 2D context by enabling various shapes, interactivity, and animations. It is lightweight, but provides powerful APIs for drawing and manipulating graphics on the canvas. Whether you’re building a simple or complex application, Konva can help you create impressive visual content that runs efficiently on the web.

Getting Started with Konva

First, include the Konva library in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/konva@latest/konva.min.js"></script>

Creating a Stage

The Stage is a container for our shapes. Here’s how you can create one:

var stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight
});

Adding Layers

Layers in Konva can be thought of as separate sheets of glass stack on top of each other. Create a layer as follows:

var layer = new Konva.Layer(); stage.add(layer);

Drawing Basic Shapes

Draw a simple rectangle:

var rect = new Konva.Rect({
    x: 50,
    y: 50,
    width: 100,
    height: 50,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4
}); layer.add(rect); layer.draw();

Creating Circles

Here is how to create a circle:

var circle = new Konva.Circle({
    x: 200,
    y: 100,
    radius: 50,
    fill: 'blue',
    stroke: 'black',
    strokeWidth: 4
}); layer.add(circle); layer.draw();

Adding Text

You can also add text to your canvas:

var text = new Konva.Text({
    x: 150,
    y: 200,
    text: 'Hello, Konva!',
    fontSize: 30,
    fontFamily: 'Calibri',
    fill: 'green'
}); layer.add(text); layer.draw();

Animating Shapes

Konva supports animations using the Konva.Animation class:

var amplitude = 100; var period = 2000;
var anim = new Konva.Animation(function (frame) {
    rect.x(amplitude * Math.sin((frame.time * 2 * Math.PI) / period) + 50);
}, layer);
anim.start();

Application Example

In this example, we will create a simple animation of a bouncing circle.

var stage = new Konva.Stage({
    container: 'container',
    width: 500,
    height: 500
});
var layer = new Konva.Layer(); stage.add(layer);
var circle = new Konva.Circle({
    x: stage.width() / 2,
    y: stage.height() / 2,
    radius: 30,
    fill: 'purple',
    stroke: 'black',
    strokeWidth: 4
}); layer.add(circle);
var amplitude = stage.height() / 2 - 30; var period = 2000; var centerY = stage.height() / 2;
var anim = new Konva.Animation(function (frame) {
    circle.y(amplitude * Math.sin((frame.time * 2 * Math.PI) / period) + centerY);
}, layer);
anim.start();

Konva makes it easy to build and animate graphics on a canvas. With its user-friendly API and numerous examples, you can quickly get started and create impressive visual experiences.

For more details on Konva, please visit the official Konva website.

Hash: 0806683e3665b61c4180b8e848c68121f0c37c3db9cf1f2e5e90993373be2be8