Skip to main content

The context API provides a mechanism for components to 'talk' to each other without passing around data and functions as props, or dispatching lots of events. It's an advanced feature, but a useful one. In this exercise, we're going to recreate Schotter by George Nees — one of the pioneers of generative art — using the context API.

Inside Canvas.svelte, there's an addItem function that adds an item to the canvas. We can make it available to components inside <Canvas>, like <Square>, with setContext:

Canvas.svelte
<script>
	import { setContext, afterUpdate, onMount, tick } from 'svelte';

	// ...

	onMount(() => {
		ctx = canvas.getContext('2d');
	});

	setContext('canvas', {
		addItem
	});

	function addItem(fn) {...}

	function draw() {...}
</script>

Inside child components, we can now get the context with, well, getContext:

Square.svelte
<script>
	import { getContext } from 'svelte';

	export let x;
	export let y;
	export let size;
	export let rotate;

	getContext('canvas').addItem(draw);

	function draw(ctx) {...}
</script>

So far, so... boring. Let's add some randomness to the grid:

App.svelte
<div class="container">
	<Canvas width={800} height={1200}>
		{#each Array(12) as _, c}
			{#each Array(22) as _, r}
				<Square
					x={180 + c * 40 + jitter(r * 2)}
					y={180 + r * 40 + jitter(r * 2)}
					size={40}
					rotate={jitter(r * 0.05)}
				/>
			{/each}
		{/each}
	</Canvas>
</div>

Like lifecycle functions, setContext and getContext must be called during component initialisation. (The context key ('canvas' in this case) can be anything you like, including non-strings, which is useful for controlling who can access the context.)

Your context object can include anything, including stores. This allows you to pass values that change over time to child components:

// in a parent component
import { setContext } from 'svelte';
import { writable } from 'svelte/store';

setContext('my-context', {
	count: writable(0)
});
// in a child component
import { getContext } from 'svelte';

const { count } = getContext('my-context');

$: console.log({ count: $count });

Next: Special elements

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script>
	import Canvas from './Canvas.svelte';
	import Square from './Square.svelte';
 
	// we use a seeded random number generator to get consistent jitter
	let seed = 1;
 
	function random() {
		seed *= 16807;
		seed %= 2147483647;
		return (seed - 1) / 2147483646;
	}
 
	function jitter(amount) {
		return amount * (random() - 0.5);
	}
</script>
 
<div class="container">
	<Canvas width={800} height={1200}>
		{#each Array(12) as _, c}
			{#each Array(22) as _, r}
				<Square
					x={180 + c * 40}
					y={180 + r * 40}
					size={40}
				/>
			{/each}
		{/each}
	</Canvas>
</div>
 
<style>
	.container {
		height: 100%;
		aspect-ratio: 2 / 3;
		margin: 0 auto;
		background: rgb(224, 219, 213);
		filter: drop-shadow(0.5em 0.5em 1em rgba(0, 0, 0, 0.1));
	}
</style>
initialising