HTML5: canvas. Uso base, funzionamento e compatibilità su tutti i browser

Vediamo che cosa è e come si utilizza il tag canvas.

Il tag HTML5 conosciuto come <canvas> è una novità di markup che può essere usata per la creazione di disegni, l’assemblaggio fotografico e la realizzazione di animazioni semplici o complesse tramite l’utilizzo di JavaScript. Molto si è discusso e molto si discuterà sul tag <canvas>: se ne è parlato quale sostituto “definitivo” di Adobe Flash nella produzione e visualizzazione di risorse multimediali quali giochi, video o assemblaggi particolari (come le slide fotografiche animate).

L’attributo di “Adobe Flash eraser” gli è stato dato in quanto le risorse prodotte con queste procedure non necessitano di plugin esterni per essere fruite, ma avrebbero potuto essere godute tramite qualsiasi browser (l’idea riguardava anche Internet Explorer). Tuttavia, è ancora presto per poter parlare di sostituzione definitiva.

Cominciamo ora a conoscere da vicino il tag <canvas>, che non è di difficile implementazione, ma necessita di una conoscenza base di HTML e JavaScript per poter essere codificato al meglio.

Tag HTML5 <canvas>: l’elemento base

Cominciamo ad apprezzare da vicino questo elemento con un primo esempio:

<canvas id="esempio" width="150" height="150"></canvas>

Il tag <canvas> è composto da un ID, importante per l’associazione del JavaScript, e dagli attributi width e height che definiscono rispettivamente larghezza e altezza. Associazione del JavaScript significa che l’ID è la chiave, ovvero tramite questo ID il contenuto codificato potrà essere richiamato nella pagina, come nell’esempio seguente:

<html>  <head>    <title>Il tag HTML5 canvas</title>    <script type="text/javascript">function draw(){  var canvas = document.getElementById('esempio');  if (canvas.getContext){    var ctx = canvas.getContext('2d');  }}    </script>    <style type="text/css">canvas { border: 1px solid black; }    </style>  </head>  <body onload="draw();">    <canvas id="esempio" width="150" height="150"></canvas>  </body></html>

La porzione di codice scritta sopra indica che è stato creato un rettangolo con visuale bidimensionale, con bordo nero di 1 pixel ottenuto tramite un piccolo snippet CSS.

La creazione di contenuti alternativi

È possibile che, per varie ragioni, il browser non riesca a visualizzare i contenuti formattati con questo tag. Ad esempio, Internet Explorer fino alla versione 8 non lo supporta in misura plenaria (tale incongruenza sembrerebbe del tutto risolta nella versione 9). Bisogna quindi ricorrere a qualche piccolo escamotage per evitare che lo spazio destinato al canvas HTML resti vuoto in caso di problemi.

Una soluzione standard prevede l’inserzione di un’immagine sostitutiva che agisca da controfigura, come nell’esempio in basso:

<canvas id="campo" width="150" height="150">  <img src="images/campo-alternativo.png" width="150" height="150" alt="imagine alternative campo"/></canvas>

La procedura possiamo definirla automatica: i browser che supportano HTML canvas ignoreranno la presenza del tag <img src> all’interno della sintassi. Di contro, i browser che non supportano (o non supporterebbero) l’elemento richiamerebbero in modo automatico l’immagine sostitutiva.

È possibile altresì creare delle descrizioni sostitutive testuali:

<canvas id="prova-canvas" width="150" height="150">  Il tuo browser non supporta il tag <canvas></canvas>

Notabene: descrizioni testuali e immagini, per funzionare correttamente, debbono essere sempre racchiuse tra i tag d’apertura e chiusura, come mostrato negli esempi in alto.