Artículos
HTML5

Detectar el soporte del Canvas de HTML5

29/Ago/2012

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.


Su navegador no soporta en elemento CANVAS

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
0 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios