In questo breve articolo HTML5 sarà mostrato come verificare tramite Javascript il supporto di qualunque browser ai nuovi componenti Canvas e CanvasText.
Introduzione a Canvas
Canvas è un'area, o un riquadro, all'interno di una pagina HTML5 nel quale è possibile disegnare figure, cerchi, linee e testi ma solo utilizzando javascript.
Di per se l'elemento canvas non fa niente e non serve a niente.
Poichè HTML5 non è ancora uno standard, è altamente consigliato testare l'esistenza di questo oggetto ( e non dell'elemento HTML) anziché darla per scontata.
Di seguito un esempio di utilizzo dell'elemento canvas in una pagina HTML5.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<title>Script e articoli informatici</title>
<meta name="author" content="Mirko Agrati" />
</head>
<body>
<canvas id="nuovoCanvas" width="300" height="300"
style="border: 1px solid black"></canvas>
</body>
</html>
Testare il supporto del browser
Per verificare che un browser supporti l'oggetto Canvas è necessario, ma non sufficiente, crearne un'istanza con javascript.
Se effettivamente il browser offre il supporto al componente allora sarà possibile accedere alle proprietà specifiche di Canvas, altrimenti ne sarà comunque creata un'istanza nella memoria del client, ma sarà fornita di un set di proprietà standard come un qualunque elemento HTML.
Una proprietà specifica di Canvas, che sicuramente lo caratterizza, è context, accessibile tramite il metodo getContext() esposto dal componente.
Ad oggi tale metodo restituisce solo un contesto grafico 2D, ovvero bidimensionale, anche se da specifiche è già pronto per il 3D, cioè tridimensionale.
Quindi, dopo aver creato un'istanza di Canvas è opportuno testarne la proprietà context: solo se questa non è nulla allora si può essere certi che tale browser supporta l'oggetto HTML5 Canvas!
Di seguito una semplice funzione javascript per testare il supporto a Canvas.
La function hasCanvas()
/**
* Testa il supporto all'oggetto Canvas
* di un browser utente.
*
* @return boolean
*/
function hasCanvas(){
return (!! document.createElement('canvas').getContext('2d'));
}
Come spiegato qui, la sintassi javascript !! è un modo per forzare una risposta di tipo booleano, ovvero true o false.
Quindi, se la chiamata alla funzione javascript hasCanvas() restituirà true allora il browser supporta il nuovo componente Canvas, altrimenti no.
Introduzione a CanvasText
Detto questo, è bene specificare che le novità di Canvas riguardo alle funzionalità relative al testo, ovvero CanvasText, sono state introdotte successivamente e ciò implica che non basta testare il supporto a Canvas per essere certi di poter utilizzare CanvasText.
Per conoscere se un browser supporta anche CanvasText è necessario, proprio come fatto per Canvas, accedere a sue proprietà e metodi specifici.
Il fattore discriminante di cui abbiamo bisogno è rappresentato dalla proprietà fillText dell'oggetto Canvas: la presenza di questa proprietà rivela se il browser utilizzato supporta le funzionalità per il trattamento di stringhe.
Quindi, dopo aver verificato l'esistenza di canvas, si procederà al test della proprietà fillText.
Di seguito un esempio.
La function hasCanvasText()
/**
* Testa il supporto all'oggetto CanvasText
* di un browser utente.
*
* @return boolean
*/
function hasCanvasText(){
var unCanvas = document.createElement('canvas').getContext('2d');
if(!!unCanvas)
return (!! unCanvas.fillText);
return false;
}
Se la chiamata alla funzione javascript hasCanvasText() restituirà true allora il browser supporta il nuovo componente CanvasText, altrimenti no.
Alla prossima,
MA.
