svelte-canvas

Reactive canvas rendering with Svelte.

Installation

npm install svelte-canvas

Usage

<script>
  import { Canvas, Layer, t } from 'svelte-canvas';

  $: render = ({ context, width, height }) => {
    context.fillStyle = `hsl(${$t / 40}, 100%, 50%)`;
    context.beginPath();
    context.arc(($t / 4) % width, ($t / 4) % height, 100, 0, Math.PI * 2);
    context.fill();
  };
</script>

<Canvas width={640} height={640}>
  <Layer {render} />
</Canvas>

If you use typescript, add the Render type to your reactive statement:

import { ..., type Render } from "svelte-canvas";

let render: Render;
$: render = ({ context, width, height }) => {
  // ...
}

More examples:

• Scatterplot
• Globe
• Trefoil
• DVD screensaver
• svelte-canvas + SVG

API

Canvas

Canvas is the top-level element. It's a Svelte wrapper around an HTML <canvas> element.

Parameters

Methods

Events

All DOM events on the <canvas> element are forwarded to the Canvas component, so handling an event is as simple as <Canvas on:click={handleClick}>.

Layer

Layer is a layer to be rendered onto the canvas. It takes two props, setup and render Both take functions with a single argument that receives an object with the properties context, width, and height. context is the 2D rendering context of the parent canvas. width and height are the canvas's dimensions.

setup is optional and is called once at initialization. render is called every time the canvas redraws.

Declaring your render function reactively allows svelte-canvas to re-render anytime the values that the function depends on change.

t

t is a readable store that provides the time in milliseconds since initialization. Subscribing to t within your render function lets you easily create animations.

Render

Render is a typing for your reactive statements that provides types for the JSON object: (canvas: CanvasRenderingContext2D, width: number, height: number)