Cos'è un elemento canvas in HTML5?

L'elemento <canvas> in HTML5 è un contenitore per disegnare grafici tramite script (solitamente JavaScript). Permette di creare visualizzazioni dinamiche, giochi e animazioni direttamente nel browser senza plugin.

Aspetti chiave:

• Disegno pixel per pixel: Funziona a livello di pixel, offrendo controllo completo su ogni elemento dell'immagine.
• Utilizzo API: L'interazione con <canvas> avviene tramite l'API del contesto di rendering, il più comune è 2d per grafica bidimensionale. Esiste anche webgl per 3D.
• Tela vuota: L'elemento <canvas> stesso è solo un contenitore. Tutto il disegno viene eseguito tramite programmazione.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

// Otteniamo l'elemento canvas
const canvas = document.getElementById('myCanvas');

// Otteniamo il contesto 2D di disegno
const ctx = canvas.getContext('2d');

// Disegniamo un rettangolo
ctx.fillStyle = "#FF0000"; // Colore di riempimento
ctx.fillRect(0, 0, 150, 75); // x, y, larghezza, altezza

Le capacità includono:

• Forme primitive (linee, rettangoli, cerchi, archi)
• Testo
• Immagini
• Gradienti e pattern
• Percorsi (path) per figure complesse