/svelte-canvas

🎨 Reactive canvas rendering with Svelte.

Primary LanguageHTML

svelte-canvas

Reactive canvas rendering with Svelte.

Installation

npm install svelte 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>

More examples:

API

Canvas

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

Parameters

parameter default description
width 640 Canvas width
height 640 Canvas height
pixelRatio window.devicePixelRatio Canvas pixel ratio
style null A CSS style string which will be applied to the canvas element
autoclear true If true, will use context.clearRect to clear the canvas at the start of each render cycle

Methods

method description
getCanvas Returns a reference to the canvas DOM element
getContext Returns the canvas's 2D rendering context
redraw Forces a re-render of the canvas

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 three props: setup, render, and priority. setup and render both require functions with one 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 lets svelte-canvas re-render anytime the values that the function depends on change.

The third prop, priority, takes a positive integer which determines the layer's render priority. Layers with a priority will be rendered after other layers, in ascending order of priority, so that higher priority layers appear on top of the scene.

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.