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>