Getting started with Svelte and canvas via Konva

How to use canvas with Svelte?

svelte-konva is a JavaScript library for drawing complex canvas graphics using Svelte.


It provides declarative and reactive bindings to the Konva Framework.

All svelte-konva components correspond to Konva components of the same name. All the parameters available for Konva objects can be added as config prop for corresponding svalte-konva components.

To get more info about Konva you can read Konva Overview.

Quick Start

1 Install via npm

npm i svelte-konva konva

2 Import and use svelte konva components

import { Stage, Layer, Rect } from 'svelte-konva';

<Stage config={{ width: window.innerWidth, height: window.innerHeight }}>
<Rect config={{ x: 100, y: 100, width: 400, height: 200, fill: 'blue' }} />
Enjoying Konva? Please consider to support the project.