Hemos visto múltiples ejemplos para manipular el CANVAS. Pero ¿cómo podemos saber si nuestro navegador soporta el elemento CANVAS de HTML5? Pues para detectar el soporte del CANVAS de HTML5 tenemos dos opciones. La primera es recurrir a una librería que detecte capacidades del navegador, como Modernizr, mientras que la segunda será accediendo directamente a las propiedades del DOM.
En el caso de utilizar Modernizr lo primero que tenemos que hacer es cargar la librería:
<script type="text/javascript" defer="" src="modernizr.js" data-rocket-status="failed"></script>
Ahora, mediante el objeto Modernizr vamos a preguntar por la capacidad canvas.
if (Modernizr.canvas) soporte.innerHTML=soporte.innerHTML + "
SI hay soporte del CANVAS (por Modernizr)"; else soporte.innerHTML=soporte.innerHTML + "
NO hay soporte del CANVAS (por Modernizr)";
Si no queremos depender de una librería como Modernizr podemos utilizar directamente el DOM, así lo primero que haremos será obtener una referencia a la capa sobre la que queremos cargar el mapa.
var canvas = document.getElementById("micanvas");
Y lo siguiente que haremos será comprobar si tiene el método .getContext. En caso afirmativo es que tenemos soporte del CANVAS.
if (canvas.getContext) {
soporte.innerHTML="SI hay soporte del CANVAS";
} else {
soporte.innerHTML="NO hay soporte del CANVAS";
}
En este segundo caso nos ahorramos la necesidad de depender de una librería de terceros como Modernizr.
Por último indicar que no está de más el insertar un contenido aleatorio a la etiqueta CANVAS dentro de la estructura del documento HTML5, ya sea un texto avisando de la falta de soporte del CANVAS o una imagen representativa de lo que iba a cargar el CANVAS.
