Aan de slag met canvas in JavaScript
Canvas is een speciaal tekenveld
in de browser in JavaScript. Dit veld wordt gemaakt
met behulp van de tag <canvas>, waaraan
je een breedte en hoogte moet opgeven:
<canvas width="200" height="200"></canvas>
Om met dit veld te werken in JavaScript, moeten we eerst een referentie naar deze tag in een variabele krijgen:
let canvas = document.querySelector('canvas');
Vervolgens moet je op deze variabele de
methode getContext toepassen:
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
Je kunt het vereenvoudigen:
let ctx = document.querySelector('canvas').getContext('2d');
Als resultaat wordt in de variabele ctx
een object geschreven dat de zogenaamde
uitvoeringscontext bevat.
Alle tekeningen
zullen plaatsvinden met behulp van de methoden van dit
object. We zullen de studie hiervan oppakken in de volgende
lessen.
