Kom i gang med canvas i JavaScript

Canvas er et specielt tegneområde i browseren i JavaScript. Dette område oprettes ved hjælp af tagget <canvas>, som skal have en angivet bredde og højde:

html<canvas width="200" height="200"></canvas>

For at arbejde med dette område i JavaScript skal vi først få en reference til dette tag i en variabel:

javascriptlet canvas = document.querySelector('canvas');

Derefter skal metoden getContext anvendes på denne variabel:

javascriptlet canvas = document.querySelector('canvas');
let ctx    = canvas.getContext('2d');

Det kan forenkles:

javascriptlet ctx = document.querySelector('canvas').getContext('2d');

Som et resultat vil objektet ctx indeholde det såkaldte udførelseskontekst. Alt tegning vil foregå ved hjælp af metoder fra dette objekt. Vi vil studere disse i de følgende lektioner.