Canvas (HTML)

Canvas es un elemento HTML incorporado en HTML5 que permite la generación de gráficos dinámicamente por medio del scripting. Permite generar gráficos estáticos y animaciones.

Fue implementado por Apple para su navegador Safari. Más tarde fue adoptado por otros navegadores, como Firefox a partir de su versión 1.5, Opera, y es adoptado por WHATWG.

Posee dos atributos width (ancho) y height (alto), el tamaño por defecto es 160.

El objeto canvas puede ser accedido a través de Javascript, permitiendo generar gráficos 2D, juegos, animaciones y composición de imágenes. Existe otra etiqueta SVG que cumple con funciones similares.

Ejemplo:

<canvas id="tutorial" width="150" height="150"></canvas>

Función para verificar si el navegador soporta la etiqueta

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

Enlaces externos

• Canvas Demo
• WHATWG
• Mozilla Canvas Tutorial
• Juego del Trivial Pursuit hecho con Canvas
• Entrada en canvas para principiantes (en)