Cos'è canvas e come funziona

27 aprile 2009

Cos’è canvas e a cosa serve

scritto daMauro Accornero

Ultimamente si è sentito molto parlare di questa nuova tecnologia per il suo straordinario potenziale, vediamo insieme cos’è, come funziona e cosa può fare.Canvas è un elemento presente nell’html 5 e consente il rendering dinamico delle bitmap. Il suo utilizzo non è diverso da altri elementi html in quanto richiede un normale tag a chiusura esplicita.

<canvas></canvas>

Questo elemento permette il rendering dinamico di una bitmap, ovvero permette di definire una zona in cui è possibile “disegnare” l’immagine tramite uno script con l’ausilio di javascript.

Le applicazioni sono molteplici, si possono disegnare grafici di dati, elementi del layout e animazioni. Due delle applicazioni di maggiore successo negli ultimi tempi sono cufon che permette di sostituire il font presente nel sito con un font scelto e convertito da canvas e javascript. Protovis invece è uno script che permette grazie a javascript e canvas la realizzazione di grafici complessi.

Una nota negativa è presentata dalla compatibilità in quanto ad oggi la maggior parte dei browser supporta l’elemento canvas ad eccezione di Internet Explorer (versione 8 compresa), per gli amanti del browser microsoft esiste però excanvas (uno script javascript) in grado di supportare parzialmente canvas.

Personalmente ho fatto prova e vi propongo questo esempio per inserire angoli arrotondati su una foto senza png.

Trovo che esista un grande potenziale dietro a questo nuovo elemento, non ci resta che attendere l’arrivo dell’html 5 e lo sperato supporto da parte del browser microsoft.

Nell’attesa vi propongo qualche link per approfondire l’argomento:

Definizione di canvas su Wikipedia

Alcuni esempi e tutorial su mozilla developer

Script per animazioni con canvas

Esempio di visualizzazione di algoritmo con canvas

Esperimento con <canvas>, <video> e firefox 3.5

Tag: html, web design