Canvas

Canvas è un nuovo elemento di HTML5 che può essere utilizzato all’interno di una pagina web per

• scrivere testi, visualizzare immagini, disegnare grafici, rispondere agli eventi, riprodurre suoni
• realizzare applicazioni complesse all’interno di una pagina web: testi+immagini+suoni+interattività=giochi!

Perché si è affermato?

• Utilizza Javascript come linguaggio di scripting
• Lo standard è implementato in tutti i browser aggiornati
• È indipendente dalla piattaforma
• Rende superflui i plug-in proprietari: Flash, Java Applet, Shockwave, SilverLight, …
• Molti linguaggi/software di successo sono stati portati in Canvas per renderli universali: Processing (p5.js), Python (Glowscript), Scratch, Scriptographer (Paper.js), Sketchup, Small Basic, Tinkercad, VRML (X_ITE X3D Browser), …

Difetti?

• La sua sintassi può risultare complessa: per questo sono disponibili molte librerie (kinetic.js, Easel.js, Fabric.js, Zebra) che semplificano le operazioni più frequenti e aumentano le sue potenzialità.

Sintassi

*	Riepilogo lessico
Canvas
*	Canvas
*	Contesto grafico
*	Dimensioni
Colori
*	Colori
*	Gradiente lineare
	Gradiente radiale
Linee
	Linee
	Proprietà lineCap
	Proprietà lineJoin
Rettangoli
	Rettangoli
	Rettangoli e scale()
	Rettangoli e rotate()
Archi
	Archi
	ellipse()
	arcTo()

Immagini | Riempimenti | Trasformazioni | Percorsi | Pixel | Testi | Eventi | Suoni

Applicazioni

GEOMETRIE
*	Cerchi concentrici
*	Poligoni regolari e stellati
*	Poligoni regolari – Le diagonali
STRING ART
	Poligoni regolari e stellati
	Asteroidi
	Cerchio

Risorse online