Komme i gang med canvas i JavaScript

Canvas er et spesialfelt for tegning i nettleseren med JavaScript. Dette feltet lages ved hjelp av taggen <canvas>, som man bør spesifisere bredde og høyde for:

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

For å jobbe med dette feltet i JavaScript må vi først få en referanse til denne taggen i en variabel:

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

Deretter må metoden getContext brukes på denne variabelen:

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 inneholde den såkalte utførelseskonteksten. All tegning vil skje ved hjelp av metodene til dette objektet. Vi skal studere dem i de følgende leksjonene.