Komma igång med canvas i JavaScript

Canvas är ett speciellt ritfält i webbläsaren med JavaScript. Detta fält skapas med hjälp av taggen <canvas>, som man bör ange bredd och höjd för:

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

För att arbeta med detta fält i JavaScript måste vi först få en referens till denna tagg i någon variabel:

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

Sedan måste metoden getContext appliceras på denna variabel:

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

Det kan förenklas:

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

Som ett resultat kommer objektet ctx att innehålla ett så kallat exekveringskontext. All ritning kommer att ske med hjälp av metoderna i detta objekt. Vi kommer att studera dessa i nästa lektioner.