Iniziare con canvas in JavaScript

Canvas è un'area speciale per il disegno nel browser tramite JavaScript. Quest'area viene creata utilizzando il tag <canvas>, a cui è necessario specificare larghezza e altezza:

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

Per lavorare con quest'area in JavaScript, per prima cosa otteniamo un riferimento a questo tag in una variabile:

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

Successivamente, a questa variabile è necessario applicare il metodo getContext:

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

Possiamo semplificare:

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

Di conseguenza, nella variabile ctx verrà memorizzato un oggetto contenente il cosiddetto contesto di rendering. Tutto il disegno avverrà tramite i metodi di questo oggetto. Lo studio di questi metodi sarà l'argomento delle prossime lezioni.