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 individual props for corresponding svalte-konva
components.
In order to use svelte-konva a basic understanding of Konva
is required. You can consult the Konva overview for that.
Quick Start
1 Install via npm
npm i svelte-konva konva
2 Import and use svelte konva components
<script>
import { Stage, Layer, Rect } from 'svelte-konva';
</script>
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Rect x={100} y={100} width={400} height={200} fill="blue" />
</Layer>
</Stage>