Canvas (elemento HTML)
Canvas è una estensione dell'HTML standard che permette il rendering dinamico di immagini bitmap gestibili attraverso un linguaggio di scripting. Fu inizialmente introdotta da Apple per uso all'interno del loro componente Mac OS X Webkit, per migliorare applicazioni come Dashboard widgets ed il browser Safari. Più tardi fu adottata dai browsers Gecko (Mozilla e Firefox) ed Opera[1], e standardizzati dal WHATWG su nuove specifiche proposte per le tecnologie della prossima generazione. Novell produce un XForms processor plugin per Internet Explorer, che supporta l'elemento canvas.[2] Sviluppi indipendenti per supportare il canvas su Internet Explorer non richiedono plugins e sono basati esclusivamente su VML e JavaScript.[3] Anche Google ha avviato un progetto per aggiungere le capacità del canvas ad Internet Explorer usando la stessa tecnica.[4] Il Canvas consiste in una regione disegnabile, definita in codice HTML con gli attributi height and width. Il codice JavaScript può accedere all'area con un set completo di funzioni per il disegno, simili a quelle comuni ad altre API 2D, permettendo così la generazione dinamica di disegni. Alcuni usi possibili di Canvas includono i grafici, l'animazione e la composizione di immagini.
Reazioni
Al momento della sua introduzione, l'elemento canvas non fu accolto unanimemente dalla comunità che si occupa di definire gli standard del web. Alcuni deplorarono la decisione di Apple di creare un nuovo elemento proprietario invece di supportare lo standard SVG, che non era ancora stato del tutto recepito dal web. Altri criticarono la logica che stava alla base dell'elemento: la sua essenza procedurale e la mancanza di una controparte procedurale consentiva a canvas di "disegnare", ma gli elementi disegnati non erano identificabili con qualcosa di simile ad un DOM. Altri ancora mostrarono preoccupazione non tanto per l'estensione proprietaria in sè, ma per la sintassi che è stata proposta per l'utilizzo della stessa. Costoro, per esempio, ritengono indesiderabile l'impossibilità di calare l'elemento all'interno di un namespace.[5]
Uno sviluppatore web, insoddisfatto dal livello del supporto del formato SVG in Safari, ha sviluppato un rasterizzatore in JavaScript, che ha chiamato SVG Tiny 1.2 to canvas, per dimostrare la mancata veridicità di affermazioni secondo le quali l'implementazione di canvas in Safari sarebbe stata molto più facile, rispetto ad una completa integrazione di SVG.[6]
Esempi
- (EN) Calc5 - Calcolatrice in JavaScript che può rappresentare in un grafico i risultati ottenuti.
- (EN) Great Web Wall - Muro per messaggi implementato in Canvas.
- (EN) Canvascape - Un gioco 3D creato usando Canvas.
- (EN) MoonLander scritto usando Canvas.
- (EN) Various demos - Diversi esempi di utilizzo di canvas (un grafico, uno strumento per tener d'occhio un server, e l'implementazione di un sistema Lindenmayer).
- (EN) Fractals - Esempio di generazione di un frattale.
- (EN) Frames - Disegno di bordi decorativi attorno ad elementi HTML standard.
- (EN) Tucanos
- (EN) Free drawing - Esempio di disegno libero.
- (EN) Conway's Game of Life - Implementazione mediante Canvas del noto simulatore di una forma di vita monocellulare.
- (EN) Canvas Pong - Una reimplementazione di Pong che usa Canvas.
- (EN) Canvas Painter - Applicazione dimostrativa di disegno, creata utilizzando dei widget.
- (EN) Canvas plasma demo - Port di un'applicazione dimostrativa.
- (EN) Breakout using canvas - Il classico Breakout, implementato usando Canvas.
- [(EN) http://jsmsx.sourceforge.net jsMSX] (demo) - Emulatore MSX scritto completamente in Javascript.
- (EN) PlotKit - Esempio di disegno di grafici attraverso l'utilizzo di un toolkit.
- (EN) JS Arkanoid - Clone di Arkanoid che usa Canvas.
- (EN) Unreal Soccer - Simulatore di calcio scritto usando Canvas.
- (EN) LSys/JS - Interprete interattivo di un Sistema L che usa Canvas.
- (EN) Ajax3d - Un motore 3D e un gioco scritti usando Canvas.
- (IT) Smith Chart demo - Demo della carta di Smith che utilizza Canvas
