Come molti di noi sanno, HTML è recentemente giunto alla versione 5. Le novità sono diverse e molto gradite: unite alla tecnologia AJAX e ai vari framework per Javascript, ci consentono di dipendere meno da Flash, tecnologia proprietaria, pesante e non alla portata di tutti, secondo me.
Una di queste novità esiste già da un po’ in via non ufficiale ed è rappresentata dall’elemento Canvas. Non mi dilungo nelle spiegazioni, dato che il Web abbonda di tutorial, ma faccio qualche breve cenno. Il Canvas è una tela sulla quale possiamo disegnare attraverso alcuni metodi JavaScript. Possiamo inserire immagini, ma anche forme geometriche, testo o semplici tratti. In buona parte somiglia ai Canvas di Java. L’unico svantaggio è rappresentato dalle performance non eccellenti, quando ci troviamo di fronte ad animazioni (specie perché per un’animazione occorre cancellare tutto il Canvas e ridisegnarlo), ma possiamo confidare nel loro miglioramento, specie perché i browser iniziano a sfruttare la GPU per il rendering delle pagine.
Visti così non sembrano niente di che, ma ciò che possiamo ottenere col loro utilizzo è sorprendente e mostrarvelo è appunto lo scopo di questo articolo.

Cominciamo con qualcosa di semplice: un semplice giochino, pong: http://testzone.danieljmarra.com/canvas/canvaspong/
Una sorta di paint: http://caimansys.com/painter/
Animazione 3D: http://ajax3d.sourceforge.net/
Arriviamo a dei veri giochi 3D: http://www.benjoffe.com/code/demos/canvascape/
Questo non è altro che una prova, ma abbiamo anche un Wolfenstein 3D quasi completo! http://www.nihilogic.dk/labs/wolf/
Infine, ecco una bella pagina ricca di esempi: http://www.devlounge.net/code/10-awesom … s-examples

Spero che gli esempi vi siano piaciuti. Sono così ricchi da non rendere necessario alcun ulteriore codice da parte mia. Se poi sono fin troppo ricchi, nessun problema: come dicevo ci sono tanti tutorial e uno è offerto direttamente da Mozilla: https://developer.mozilla.org/en/Canvas_tutorial