Basic Svelte
Introduction
Bindings
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
Stores
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
You can use the special bind:this directive to get a readonly binding to an element in your component.
The $effect in this exercise attempts to create a canvas context, but canvas is undefined. Begin by declaring it at the top level of the component...
App
<script>
import { paint } from './gradient.js';
let canvas;
$effect(() => {
// ...
});
</script>...then add the directive to the <canvas> element:
App
<canvas bind:this={canvas} width={32} height={32}></canvas>Note that the value of canvas will remain undefined until the component has mounted — in other words you can’t access it until the $effect runs.
previous next
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
<script>
import { paint } from './gradient.js'; $effect(() => { 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>