Il canvas HTML5 si presenta come un semplice contenitore che viene utilizzato per inserire disegni, immagini, elementi grafici in pagine web utilizzando un linguaggio di scripting di supporto, solitamente JavaScript.

Per inserire il contenitore in una pagina web basta utilizzare l’apposito tag :

 <canvas id="canvasId" width="200" height="350"> </canvas>

che permette di creare un rettangolo vuoto in cui poter disegnare.

Le dimensioni di tale spazio possono essere inserite come attributi width, height del tag oppure impostate al caricamento della pagina tramite il codice JavaScript utilizzando le proprietà: canvas.width e canvas.height. Oppure possono anche essere specificate utilizzando i CSS ma in questo modo vengono applicate dopo il rendering dell’elemento e quindi la visualizzazione dell’immagine creata può essere non ottimale.

Una volta inserito il canvas per cominciare ad utilizzarlo è necessario recuperarlo tramite l’id assegnatogli e determinare il contesto su cui si vuole lavorare (2d o 3d) in questo modo:

var canvas = document.getElementId('canvasId');
if(canvas.getContext){
context = canvas.getContext('2d');
} else{
// codice eseguito se il browser non supporta il canvas
}

Il metodo getContext() ci permette di verificare se il browser ultilizzato supporta l’elemento canvas così da poter eseguire il codice JavaScropt solo in caso affermativo. Il metodo getContext(‘2d’) permette invece di ottenere l’oggetto context tramite il quale possiamo inserire elementi grafici nel canvas.

Gli elementi grafici che si possono inserire nel canvas HTML5 sono molteplici. Vediamo quali sono i principali.

Figure geometriche semplici :

 Consideriamo l’esempio nell’immagine che è stato generato utilizzando il codice riportato di seguito

<script type="text/javascript">

            window.onload = function(){
            var canvas = document.getElementById("canvas");

            if (canvas.getContext) {
                var context = canvas.getContext("2d");

                // rectangle with fill color
                context.fillStyle = "#DCDCDC";
                context.fillRect(50,20,60,50);

                // rectangle with stroke color
                context.strokeStyle = "#708090";
                context.strokeRect(140,20,80,60);

                //rectangle with pattern
                var el = document.getElementById("pattern");
                var pattern = context.createPattern(el, "repeat");
                context.fillStyle = pattern;
                context.fillRect(30,80,70,80);

                //rectangle with gradient 
                var gradient = context.createLinearGradient(80, 100, 230, 160);
                gradient.addColorStop(0, "#FF1493");
                gradient.addColorStop(1, "#87CEFA");
                context.fillStyle = gradient;
                context.fillRect(120,90,90,60);
                window.open(canvas.toDataURL('image/png'));	

            }
            }

></script>


</pre>
<img id="pattern" src="../../css/images/pattern.png" alt="" />
<pre>

 <canvas id="canvas" width="500" height="500">Il browser che stai utilizzando non supporta l'elemento canvas </canvas>

Dopo aver individuato il canvas e il contesto vengono creati dei rettangoli ciascuno con uno stile diverso. Usando le funzioni fillRect(x,y, width, height) e strokeRect(x,y, width.height) si crea il rettangolo o pieno o con disegnati solo i bordi, specificando la posizione x,y e le dimensioni width e height.
Lo stile per il riempimento o per la creazione del bordo può essere scelto impostando prima dell’inserimento la proprietà fillStyle o stokeStyle. Si può scegliere

1. un colore come nei primi due rettangoli usando context.fillStyle = “#DCDCDC”; 
2. un pattern prendendo l’immagine contenente il pattern var el = document.getElementById(“pattern”);  ripetendola con var pattern = context.createPattern(el, “repeat”); e infine utilizzando il pattern come stile context.fillStyle = pattern; 
3. un gradiente creandolo con var gradient = context.createLinearGradient(80, 100, 230, 160); aggiungendo i colori con gradient.addColorStop(0, “#FF1493”); gradient.addColorStop(1, “#87CEFA”); e impostando il tutto come stile context.fillStyle = gradient;

Linee :

L’inserimento delle linee è effettuato tramite i due metodi moveTo(x,y) con cui ci si sposta nel punto desiderato e lineTo(x,y) che disegna la linea fino al punto specificato. Infine per rendere visibile la linea è necessario chiamare il metodo stroke(). Anche per le linee è possibile definire lo stile impostando analogamente al caso precedente la proprietà strokeStyle.

context.beginPath();
context.moveTo(10, 20);
context.lineTo(70, 30);
context.strokeStyle = fStyle;
context.stroke();

Testi :

Oltre a figure geometriche è possibile inserire nel canvas veri e propri testi scegliendo font, dimensione, allineamento, stile ecc.. come in questo semplice esempio:

context.font = “bold 12px sans-serif”;
context.textAlign = “right”;
context.fillText(“testo”,20, 50);

Nello scrivere testi all’interno di un canvas potrebbe essere necessario modificarne l’orientamento, per far questo è necessario eseguire una rotazione dell’intero contesto e quindi delle corrispondenti traslazioni tenendo conto della lunghezza del testo da inserire che si può ottenere con il metodo  context.measureText(text) come mostrato nella funzione riportata sotto.

function drawVerticalText(x, y, text) {
var metric = context.measureText(text);
context.save();
var tx = x;
var ty = y;
context.translate(tx,ty);
context.rotate(-Math.PI / 2);
context.translate(-tx,-ty);
context.fillText(text, x, y);
context.restore();
}

Immagini: 

Per l’inserimento di immagini si utilizza la funzione drawImage(Image, x, y ) dove x e y sono le coordinate dell’angolo in alto a sinistra dell’immagine.

Tutti questi elementi grafici creati all’interno del cavas infine possono essere salvati utilizzando il metodo canvas.ToDataURL(‘image/png’) che restituisce una stringa contenente la codifica Base64 dell’immagine.

Prima di concudere è necessaria una breve nota sulla compatibilità: i browser IE precedenti alla versione 9 non supportano nativamente l’elemento canvas, ma supportano una tecnologia proprietaria della Microsoft chiamata VML. A partire da questa tecnologia è stata creata una libreria excanvas.js che implementa alcune delle funzioni del canvas in Internet Explorer. Per utilizzarla basta inserire all’interno della pagina il codice:

<!--[if IE]>
<script src="excanvas.js" >
</script>
<![endif]-->

In alternativa è possibile inserire all’interno del tag <canvas></canvas> del testo o un altro elemento da visualizzare nel caso in cui il browser non supporti il canvas.

<canvas id="canvasId" height="200" width="350">
<img src="image.png" alt="Immagine sostitutiva per i browser che non supportano il canvas HTML5" width="350" height="200" />
</canvas>