Canvas HTML5: introduzione

L'elemento <canvas> è la tela bitmap di HTML5: una superficie su cui disegnare grafica 2D e 3D dinamica tramite JavaScript. È usato per giochi, visualizzazioni dati, editor grafici, animazioni complesse. A differenza di SVG che è vettoriale e DOM-based, canvas è raster e procedurale: ogni frame va ridisegnato esplicitamente. Vediamo le basi per iniziare.

Cos'è canvas

Canvas è un rettangolo HTML con dimensioni width e height su cui un'API JavaScript permette di disegnare. Il contesto 2D (getContext('2d')) espone metodi per linee, forme, testo, immagini, transformazioni e gradienti. Esiste anche un contesto WebGL per grafica 3D accelerata da GPU. Ogni pixel disegnato diventa parte dell'immagine raster; non c'è un DOM interno, solo pixel.

Canvas vs SVG

Canvas è bitmap, SVG è vettoriale. Canvas scala male a risoluzioni alte, SVG si adatta perfettamente a qualsiasi dimensione. Canvas è più performante per molti oggetti animati (migliaia), SVG è migliore per grafica con interazione DOM e accessibilità. Per dashboard, grafici complessi e giochi 2D canvas è ottimo; per icone, illustrazioni e UI scalabili SVG è la scelta naturale.

Canvas e responsive

Per canvas responsive separa dimensione di rendering da dimensione di display. canvas.width e canvas.height definiscono la risoluzione interna (pixel disegnabili); canvas.style.width e style.height definiscono la dimensione visiva CSS. Per nitidezza su retina display moltiplica le dimensioni interne per window.devicePixelRatio. Al resize della finestra ricalcola entrambe e ridisegna. Senza questa accortezza il canvas appare sfocato su display ad alta densità o stretched/squashed quando le proporzioni CSS non corrispondono a quelle del bitmap.

Performance e ottimizzazioni

Per animazioni a 60fps: minimizza clearRect (preferisci clearing solo zone modificate), evita disegno di forme complesse ogni frame (precomputa su offscreen canvas), batch operazioni di stile (cambi di fillStyle costano), usa requestAnimationFrame mai setInterval. Per giochi 2D considera librerie come Phaser o PixiJS che ottimizzano automaticamente. Per visualizzazioni di dati D3.js + canvas è una combinazione potente. WebGL per scenari con migliaia di oggetti animati o effetti grafici complessi che richiedono accelerazione GPU.

Canvas WebGL per 3D

Canvas con context 'webgl' o 'webgl2' attiva grafica accelerata GPU per scenari 3D o 2D complessi. WebGL è una API low-level basata su OpenGL ES, con shader, buffer e matrici. La curva di apprendimento è ripida; per la maggior parte dei progetti librerie come Three.js (3D), PixiJS (2D ad alte performance), Babylon.js (giochi 3D) offrono API molto più alto livello. Use case: giochi browser, visualizzazioni di dati interattive (Plotly), modelli architettonici, AR/VR embed. WebGPU è il successore moderno con API più recente e capacità superiori.

OffscreenCanvas e worker

OffscreenCanvas permette di disegnare canvas in un Web Worker, evitando di bloccare il main thread per rendering intensivo. Crei canvas.transferControlToOffscreen() e passi l'oggetto al worker via postMessage. Il worker disegna in parallelo. Soluzione per grafica complessa che altrimenti farebbe scattare 60fps. Use case: visualizzazioni dati real-time, mini-mappe in giochi, generative art, processing di immagini. Supporto browser ottimo nei moderni Chrome, Firefox, Safari. Per dashboard enterprise con grafici complessi e aggiornati frequentemente, OffscreenCanvas è la chiave per mantenere UI reattiva durante elaborazioni pesanti.

Use case e librerie

Use case tipici per canvas: editor di immagini browser-based (filtri, ritagli, annotazioni), data visualization dinamiche (D3 + canvas per dataset grandi), giochi 2D casual, generative art, signature capture (firme digitali nei contratti), barcode/QR code rendering (con jsBarcode, qrcode.js). Librerie: Konva.js (oggetti drag-and-drop), Fabric.js (editor canvas con manipulation oggetti), PixiJS (rendering ad alte performance per giochi 2D), p5.js (educational e creative coding), Three.js (3D via WebGL). Scegli in base al use case: per UI semplice il context 2D nativo basta, per scenari complessi le librerie risparmiano centinaia di ore di sviluppo e debug.

Procedura passo-passo

1. Aggiungi nel body <canvas id="myCanvas" width="800" height="600"></canvas>.
2. In JavaScript: const canvas = document.getElementById('myCanvas').
3. Ottieni il contesto: const ctx = canvas.getContext('2d').
4. Disegna forme: ctx.fillRect(10, 10, 100, 50) per un rettangolo.
5. Imposta colori: ctx.fillStyle = '#ff0000' prima di fillRect.
6. Per animazioni usa requestAnimationFrame con clearRect + ridisegno.
7. Per testo: ctx.font = '20px Arial'; ctx.fillText('Hello', 50, 50).

Errori comuni e come risolverli

• Width/height via CSS: ridimensionare canvas con CSS scala l'immagine; usa attributi width/height per dimensioni reali.
• Animazioni con setInterval: produce frame drop; usa requestAnimationFrame per sincronizzazione vsync.
• Non pulire prima di ridisegnare: i frame si accumulano creando trail; usa clearRect su tutto il canvas.
• Accessibilità trascurata: canvas è opaco per screen reader; offri alternative testuali o usa SVG.
• Memoria su canvas grandi: 4000x4000 px occupa decine di MB; ridimensiona quando possibile.

Domande frequenti

D: Canvas è performante?
R: Sì per scenari raster con molti oggetti. Per grafica vettoriale con interazione SVG è preferibile.

D: Posso esportare canvas come immagine?
R: Sì, con canvas.toDataURL() o canvas.toBlob() per generare PNG/JPEG.

D: Canvas supporta accessibilità?
R: Limitatamente; offri sempre alternative testuali per screen reader.

D: Quali librerie semplificano canvas?
R: Konva, Fabric.js, PixiJS, p5.js sono tra le più diffuse per casi d'uso comuni.

Hai bisogno di aiuto?

Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.