Detectar el soporte del Canvas de HTML5

29/Ago/2012 HTML5 , , , ,

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:

  1. <script type="text/javascript" src="modernizr.js"></script>

Ahora, mediante el objeto Modernizr vamos a preguntar por la capacidad canvas.

  1. if (Modernizr.canvas)
  2. soporte.innerHTML=soporte.innerHTML + "<br/>SI hay soporte del CANVAS (por Modernizr)";
  3. else
  4. soporte.innerHTML=soporte.innerHTML + "<br/>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.

  1. 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.

  1. if (canvas.getContext) {
  2. soporte.innerHTML="SI hay soporte del CANVAS";
  3. } else {
  4. soporte.innerHTML="NO hay soporte del CANVAS";
  5. }

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.

  1. <canvas height="300px" width="300px" id="micanvas">
  2. Su navegador no soporta en elemento CANVAS</canvas>

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D