L'elemento HTML <canvas> viene usato per disegnare tramite JavaScript. Per esempio, può essere usato per disegnare, modificare foto o creare animazioni. Si può (e si dovrebbe) fornire un contenuto alternativo all'interno del tag <canvas>: questo contenuto verrà visualizzato sia nei browser che non supportano questo elemento, sia nei browser con JavaScript disabilitato.

Per altri articoli sull'utilizzo di questo elemento, vedi la pagina riguardo i canvas.

Attributi

Questo elemento accetta anche gli attributi globali.

height
L'altezza dell'elemento in pixels. Il valore predefinito è 150.
moz-opaque
Permette al browser di sapere se questo elemento userà la trasparenza. Se non, il browser può ottimizzare le performace durante il disegno.
width
La larghezza dell'elemento in pixels. Il valore predefinito è 300.

Descrizione

Richiede il tag di chiusura </canvas>

A differenza dell'elemento <img>, l'elemento <canvas> richiede il tag di chiusura (<canvas>).

Dimensioni del'area da disegno

Le dimensioni del'elemento possono essere cambiate usando i fogli di stile. L'immagine viene ridimensionata durante il rendering per rientrare nella dimensione corretta. Se le dimensioni sembrano distorte, prova a specificare gli attributi width e height utilizzando gli attributi anziché il CSS.

Esempi

<canvas id="canvas" width="300" height="300">
  Mi dispiace, ma il tuo browser non supporta l'elemento &lt;canvas&gt;.
</canvas>

Se il tuo disegno non ha trasparenza, usa l'attributo moz-opaque. Questa informazione può essere utilizzata per ottimizzare il rendering.

Questo attributo non è standard e funziona solo nei motori di rendering basati su Mozilla.

<canvas id="mycanvas" moz-opaque></canvas>

Specifiche

Specifica Stato Commento
HTML Living Standard
The definition of '<canvas>' in that specification.
Living Standard  
HTML5
The definition of '<canvas>' in that specification.
Recommendation Definizione iniziale

Compatibilità con i browser

Funzionalità Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.5 (1.8)[1]
6.0 (6.0)[2]
12.0 (12.0)[3]
9.0 9.0[4] 2.0[5]
moz-opaque No support 3.5 (1.9.1) No support No support No support
Funzionalità Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Supporto di base 1.5 (1.8)[1]
6.0 (6.0)[2]
12.0 (12.0)[3]
? ? ? 1.0
moz-opaque 1.0 (1.9.1) No support No support No support No support

[1] Prima di Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) le dimensioni di questo elemento erano specificate utilizzando anche numeri negativi.

[2] Prima di Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), un elemento <canvas> con altezza o larghezza pari a zero veniva mostrato con le dimensioni predefinite.

[3] Prima di Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), se JavaScript è disabilitato, viene mostrato l'elemento <canvas> anziché il contenuto alternativo.

[4] Guarda il changelog di Opera 9.0.

[5] Anche se alcune vecchie versioni di Safari (fino alla 2.0) non richiedono il tag di chiusura, la specifica indica che è richiesto; quindi andrebbe usato per garantire la compatibilità con altri browser. Inoltre queste versioni di Safari mostrano sia il disegno che il contenuto alternativo, a meno che non si usi qualche trucco CSS per nasconderlo. Fortunatamente adesso gli utenti che usano queste versioni del browser sono molto rari.

Vedi anche

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: s3lvatico, nicolo-ribaudo
 Ultima modifica di: s3lvatico,