Skip to main content

In a previous exercise, we learned how to use the onMount lifecycle function to paint to a canvas.

But the example is buggy — it's using document.querySelector('canvas'), which will always return the first <canvas> found on the page, which might not be the one belonging to our component.

Instead, we can use the readonly this binding to get a reference to the element:

App.svelte
let canvas;

onMount(() => {
	const canvas = document.querySelector('canvas')
	const context = canvas.getContext('2d');

	let frame = requestAnimationFrame(function loop(t) {
		frame = requestAnimationFrame(loop);
		paint(context, t);
	});

	return () => {
		cancelAnimationFrame(frame);
	};
});
App.svelte
<canvas
	bind:this={canvas}
	width={32}
	height={32}
></canvas>

Note that the value of canvas will be undefined until the component has mounted.

Next: Component bindings

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
<script>
	import { onMount } from 'svelte';
	import { paint } from './gradient.js';
 
	onMount(() => {
		const canvas = document.querySelector('canvas')
		const context = canvas.getContext('2d');
 
		let frame = requestAnimationFrame(function loop(t) {
			frame = requestAnimationFrame(loop);
			paint(context, t);
		});
 
		return () => {
			cancelAnimationFrame(frame);
		};
	});
</script>
 
<canvas
	width={32}
	height={32}
></canvas>
 
<style>
	canvas {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #666;
		mask: url(./svelte-logo-mask.svg) 50% 50% no-repeat;
		mask-size: 60vmin;
		-webkit-mask: url(./svelte-logo-mask.svg) 50% 50% no-repeat;
		-webkit-mask-size: 60vmin;
	}
</style>
initialising