Detectar el soporte del Canvas de HTML5

Hemos visto múltiples ejemplos para manipular el CANVAS. Pero ¿cómo podemos saber si nuestro navegador soporta el elemento CANVAS de HTML5?

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.

Detectar con Modernizr

En el caso de utilizar Modernizr lo primero que tenemos que hacer es cargar la librería:

<script src="modernizr.js"></script>

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

if (Modernizr.canvas) {
  // El navegador soporta Canvas
  alert('Tu navegador soporta Canvas');
} else {
  // El navegador no soporta Canvas
  alert('Tu navegador NO soporta Canvas');
}

Detectar con el DOM

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

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) {
  // El navegador soporta Canvas
  var contexto = canvas.getContext('2d');
  alert('Tu navegador soporta Canvas');
} else {
  // El navegador no soporta Canvas
  alert('Tu navegador NO soporta Canvas');
}

En este segundo caso nos ahorramos la necesidad de depender de una librería de terceros como Modernizr.

Contenido alternativo

Por último indicar que no está de más el insertar un contenido alternativo 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.

<canvas id="micanvas" width="200" height="200">
  Tu navegador no soporta el elemento Canvas de HTML5
</canvas>