<canvas>

L'element HTML <canvas> es pot utilitzar per dibuixar gràfics a través de seqüències d'ordres (normalment JavaScript). Per exemple, es pot utilitzar per dibuixar gràfics, fer composicions de fotos o fins i tot realitzar animacions. Pots (i has de) proporcionar contingut alternatiu dins del bloc <canvas>. Aquest contingut es representarà tant en navegadors antics que no suporten canvas com en navegadors amb  JavaScript desactivat.

Per a més articles sobre canvas, vegeu la pàgina del tema canvas.

Atributs

Aquest element inclou els atributs globals.

height

L'alçada de l'espai de coordenades en píxels de CSS. El valor per omissió és 150.

moz-opaque

Permet el llenç saber si la transparència serà un factor. Si el llenç sap que no hi ha transparència, el rendiment de la pintura pot ser optimitzat.

width

L'amplada de l'espai de coordenades en píxels de CSS. El valor per omissió és 300.

Descripció

Etiqueta </canvas> Requerida

A diferència de l'element <img>, l'element <canvas> requereix l'etiqueta de tancament (</ canvas>).

Dimensionament del llenç

La mida que es mostra del llenç es pot canviar fent servir un full d'estil. La imatge ha estat reduïda durant la representació per adaptar-se a la mida de l'estil. Si les seves representacions semblen distorsionades, intenta especificar els atributsdt width i height  de manera explícita en <canvas>, i no l'ús de CSS.

Exemples

Aquest fragment de codi afegeix un element el llenç del teu document HTML. Un text alternatiu es proporcionat si un navegador és incapaç de representar el lleç, o si no pot llegir un llenç. És útil proporcionar un text alternatiu o sub DOM ajuda a que el llenç sigui més accessible.

<canvas id="canvas" width="300" height="300">
  An alternative text describing what your canvas displays. 
</canvas> 

Si el llenç no utilitza la transparència estableix l'atribut moz-opaque a l'etiqueta canvas. Aquesta informació es pot utilitzar internament per optimitzar la representació. Tanmateix, aquest atribut no s'ha estandarditzat i només funciona en motors de renderitzat basats en Mozilla.

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

Especificacions

Navegadors compatibles

[1] Abans de Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) , l'amplada i l'alçada del llenç eran enters amb signe en lloc d'enters sense signe

[2] Abans de Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) , un element , amb una amplada o l'alçada zero es representava com si tingués dimensions predeterminades.

[3] Abans de Gecko 12.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), si Javascript estava desactivat, l'element <canvas> es representava en lloc de mostrar el contingut de reserva segons l'especificació. Ara el contingut de reserva es representa en el seu lloc.

[4] Veura la llista de canvis en Opera 9.0.

[5] Tot i que les primeres versions del navegador Safari d'Apple no requerien l'etiqueta de tancament, l'especificació indica que s'exigeix, pel que ha de assegurar-se incloure-la per raons de compatibilitat més àmplia. Les versions de Safari (anteriors a la versió 2.0) podrán representar el contingut del recurs a més de la del pròpi llenç, a menys que utilitzi trucs CSS per emmascarar. Afortunadament, els usuaris d'aquestes versions de Safari són rars avui dia.

Veure

• Portal MDN canvas
• Tutorial Canvas
• Full resum de Canvas
• Demostracions relacionades amb Canvas
• Introducció de Canvas per Apple