Tag HTML <canvas>

Il tag <canvas> è uno degli elementi HTML5. Definisce un'area sulla pagina web in cui è possibile creare oggetti diversi, immagini, animazioni e composizioni fotografiche tramite script (di solito JavaScript). È necessario utilizzare uno script per disegnare la grafica perché il tag <canvas> è solo un contenitore per la grafica.

Quando si lavora con canvas, è importante distinguere tra concetti come l'elemento canvas e il contesto di un elemento, che vengono spesso confusi. Questo elemento è ciò che è integrato in HTML (il nodo DOM). Un contesto canvas è un object con le sue proprietà e metodi per il rendering. Il contesto può essere 2D e 3D. L'elemento canvas può avere un solo contesto.

È necessario fornire contenuto alternativo all'interno del tag <canvas> in modo che i browser più vecchi che non supportano canvas, i browser con JavaScript disabilitato e gli screen reader abbiano qualcosa di significativo da visualizzare (vedi Accessibilità più avanti).

È possibile utilizzare CSS per modificare le dimensioni visualizzate del canvas, ma è meglio impostare la risoluzione con gli attributi width e height su <canvas> — sia nell'HTML che tramite JavaScript — per evitare una bitmap sfocata o deformata.

Per impostazione predefinita, un elemento <canvas> ha una dimensione di 300x150 pixel.

Canvas vs. SVG: quale utilizzare?

Sia <canvas> che <svg> disegnano grafica nel browser, ma funzionano in modi fondamentalmente diversi:

• Canvas è basato sui pixel (immediate mode). Una volta disegnato qualcosa, diventa una bitmap piatta — il browser non mantiene memoria delle singole forme. Non esiste un DOM per il contenuto disegnato, quindi non è possibile associare listener di eventi a una forma; per "spostare" un cerchio è necessario cancellare e ridisegnare l'intera scena a ogni fotogramma.
• SVG è basato sulle forme (retained mode). Ogni elemento rimane nel DOM, può essere stilizzato con CSS, gestito con script ed è indipendente dalla risoluzione (rimane nitido a qualsiasi zoom).

Usa canvas quando ridisegni frequentemente o hai molti oggetti: giochi, effetti particellari, visualizzazione dati in tempo reale, elaborazione di immagini. Usa SVG quando hai un numero moderato di forme che devono essere interattive, accessibili o scalate senza perdita di qualità: icone, grafici, diagrammi. Come regola generale, canvas eccelle con molti pixel che cambiano velocemente, SVG con poche forme che rimangono interattive.

Dimensionamento: attributi width/height vs. CSS

Questa è la trappola più comune con canvas. Un canvas ha due dimensioni:

• Gli attributi width e height impostano la dimensione del buffer di disegno (la sua risoluzione bitmap in pixel).
• CSS width/height imposta la dimensione visualizzata sulla pagina.

Se differiscono, il browser estende la bitmap per adattarla al box CSS, il che sfoca o distorce il disegno. Imposta sempre gli attributi alla risoluzione a cui disegni; usa CSS per il layout dell'elemento solo se corrisponde.

<!-- Good: drawing buffer matches what you draw -->
<canvas width="400" height="200"></canvas>

<!-- Risky: CSS stretches a default 300x150 bitmap to 600x300, blurring it -->
<canvas style="width: 600px; height: 300px;"></canvas>

Per un output nitido su schermi ad alta DPI ("Retina"), scala il buffer tramite window.devicePixelRatio (ad esempio imposta gli attributi a cssWidth * devicePixelRatio) e poi chiama ctx.scale(dpr, dpr) prima di disegnare.

Sintassi

Il tag <canvas> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<canvas>) e quello di chiusura (</canvas>).

Esempio del tag HTML <canvas>:

Lo script seguente recupera l'elemento con document.getElementById() e chiama getContext('2d') per ottenere il contesto di disegno 2D — l'object che contiene tutti i metodi e le proprietà di disegno. Impostare fillStyle sceglie il colore di riempimento, e fillRect(x, y, width, height) disegna un rettangolo pieno il cui angolo in alto a sinistra si trova in (x, y). Le coordinate del canvas partono da (0, 0) nell'angolo in alto a sinistra, con x che aumenta verso destra e y che aumenta verso il basso.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head> 
  <body>
    <canvas id="canvasExample">Your browser doesn’t support the HTML5 canvas element.</canvas>
    <script>
      const c = document.getElementById('canvasExample');
      const ctx = c.getContext('2d');
      ctx.fillStyle = '#1c87c9';
      ctx.fillRect(10, 50, 80, 80);
    </script>
  </body>
</html>

Risultato

Esempio del tag HTML <canvas> usato per il testo:

Per disegnare testo si imposta la proprietà font (la stessa sintassi della shorthand CSS font) e fillStyle per il colore, poi si chiama fillText(text, x, y). Il punto (x, y) qui rappresenta la posizione della linea di base del testo, non l'angolo in alto a sinistra. Nota che width e height sono impostati come attributi sull'elemento in modo che il buffer di disegno corrisponda all'area in cui si disegna.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
  </head> 
  <body>
    <canvas id="canvasExample" width="400" height="200"></canvas>
    <script>
      const canvas = document.getElementById('canvasExample');
      const context = canvas.getContext('2d');
      context.font = '30pt Calibri';
      context.fillStyle = '#1c87c9';
      context.fillText('Canvas Example !', 50, 100);
    </script>
  </body>
</html>

Esempio del tag HTML <canvas> usato per disegnare una linea:

Le linee e altri percorsi vengono disegnati in tre fasi. moveTo(x, y) solleva la "penna" e la posiziona in un punto di partenza senza disegnare. lineTo(x, y) aggiunge un segmento rettilineo dal punto corrente al nuovo punto — ma nulla viene ancora disegnato. Solo stroke() esegue effettivamente il rendering del percorso, utilizzando il strokeStyle corrente (il colore del contorno). Quando si disegnano più percorsi separati, inizia ciascuno con beginPath(); altrimenti i nuovi segmenti vengono aggiunti al percorso precedente. Usa fill() (con fillStyle) invece di stroke() quando vuoi un percorso riempito anziché delineato.

<!DOCTYPE html>
<html>
  <body>
    <canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
      const c = document.getElementById("canvasExample");
      const ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(300, 150);
      ctx.strokeStyle = '#1c87c9';
      ctx.stroke();
    </script>
  </body>
</html>

Casi d'uso comuni

Oltre alle forme semplici, il contesto 2D consente di creare grafica ricca:

• Animazione — cancella il canvas e ridisegna all'interno di un ciclo requestAnimationFrame() per produrre movimenti fluidi fotogramma per fotogramma.
• Immagini — ctx.drawImage(img, x, y) disegna un <img>, un altro canvas o un fotogramma video, che è la base per l'editing fotografico e i filtri.
• Gradienti — createLinearGradient() e createRadialGradient() producono riempimenti e contorni con gradiente.
• Giochi e visualizzazione dati — canvas è la scelta ideale quando è necessario ridipingere molti oggetti a ogni fotogramma, ed è per questo che le librerie di grafici e per giochi sono costruite su di esso.

Tutto ciò si basa su JavaScript, quindi una solida conoscenza dell'HTML DOM ti aiuterà a sfruttare al massimo canvas.

Accessibilità

L'output di canvas è solo pixel — gli screen reader e altre tecnologie assistive non possono "vedere" ciò che hai disegnato. Rendi accessibile il contenuto canvas:

• Fornisci contenuto di fallback significativo tra i tag. Tutto ciò che si trova all'interno di <canvas>...</canvas> viene mostrato ai browser senza supporto canvas ed è esposto alle tecnologie assistive, quindi descrivi il disegno invece di scrivere un generico messaggio "non supportato".
• Per un disegno statico, aggiungi role="img" e un aria-label (o aria-labelledby) che lo descriva, ad esempio <canvas role="img" aria-label="Bar chart of 2024 sales">.
• Per i canvas interattivi, rispecchia i controlli e lo stato in elementi DOM reali (pulsanti, live region) poiché le forme disegnate non sono focalizzabili né leggibili.

Attributi

Il tag <canvas> supporta gli Attributi Globali e gli Attributi di Evento.

Esercitazione