Primeros pasos con Canvas en HTML5

Sin duda una de las mayores novedades que trae consigo HTML5, es el API para generar y renderizar dinámicamente gráficos, imágenes y animaciones a través de su elemento Canvas.

Cuando introducimos el elemento Canvas, se creará por defecto un área de color blanco de 300 pixels de ancho por 150 pixels de altura cuyos valores pueden ser modificados a través de sus atributos.

Exceptuando Internet Explorer, todos los navegadores actuales dan soporte para el Canvas HTML5, como podemos ver en la siguiente tabla:

Chrome	Soportado desde la versión 1.0
Firefox	Soportado desde la versión 1.5
Opera	Soportado desde la versión 9.0
Safari	Soportado desde la versión 1.3
Internet Explorer	No soportado. Se espera a partir de la versión 9.0

Si quisieramos poder utilizar la nueva funcionalidad del Canvas API de HTML5 en IE, podremos utilizar el proyecto explorercanvas. Para ello tendremos que descargarnos la librería excanvas.js y añadir el siguiente hint en nuestras páginas:

<!--[if IE]><mce:script mce_src="excanvas.js"></mce:script><![endif]-->

Para incluir el elemento Canvas simplemente tendremos que añadir la siguiente etiqueta:

<canvas></canvas>

Es posible que algún navegador no interprete correctamente la etiqueta canvas, por lo que si qusisieramos mostrar algún mensaje, o imagen alternativo podremos hacerlo incluyendo las etiquetas HTML que consideremos dentro del elemento canvas:

<canvas>
Tu navegador no soporta HTML5, por qué no lo actualizas?
</canvas>

Si queremos chequear si el navegador interpreta o no el elemento canvas de HTML5 podemos utilizar el siguiente script en Javascript:

try{
  document.createElement("canvas").getContext("2d");
  alert("HTML5 es soportado en tu navegador");
 } catch(e) {
  alert("HTML5 no está soportado en tu navegador");
 }

Este código intenta crear un elemento canvas, y acceder a su contexto. Si hubiera algún error, se capturaría y se mostraría el mensaje de alerta.

Una vez hecho esto, ya podremos interactuar con el Canvas para pintar líneas, añadir texto, animaciones, etc. aunque será necesario primeramente añadir un atributo “id” al canvas.

<canvas id="mycanvas"></canvas>

El ejemplo más sencillo de las API del canvas puede ser pintar una línea. Vamos a verlo con un ejemplo:

<script>
function pintarLinea() {
// obtenemos el canvas y su contexto
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(0, 50);
context.lineTo(200, 50);
//Refrescamos el canvas con lo que hemos pintado
context.stroke();
}
window.addEventListener("load", pintarLinea, true);
</script>

Tu navegador no soporta HTML5

Visto en Deckerix.