Canvas (lienzo) es un elemento HTML que permite la generación de gráficos y animaciones de forma dinámica por medio de scripts tras elegir el dominio para tu web. Sus aplicaciones son practicamente iniminaginables: crear juegos, interfaces, editores gráficos o efectos dinámicos, aplicaciones 3D…. Sólo la imaginación pone límites a Canvas. En este artículo, profundizamos en las posibilidades de Canvas y las ejemplificamos con un sencillo gráfico.
A modo anecdótico, sólo señalar Canvas fue creado por Apple, pero han liberado la propiedad intelectual para englobarlo dentro de los estándares de HTML. Para el usuario, todo son ventajas. No requiere ningún plugin adicional, sólo una un navegador que soporte HTML5 y hoy en día todos los navegadores importantes (Safari, Chrome, Firefox, Opera e Internet Explorer) soportan Canvas, desde hace ya unas cuantas versiones.
Realizar un dibujo con el API de Canvas
El ejemplo consistirá en dibujar dos rectángulos de colores diferentes y, para ello, utilizaremos un par de funciones del API con JavaScript. Primero, reservaremos el espacio del lienzo Canvas dentro de la página, utilizando la etiqueta HTML canvas, y después, dibujaremos los rectángulos.
Colocando el elemento HTML Canvas
<canvas id="micanvas" width="200" height="100"> Este texto se muestra para los navegadores no compatibles con Canvas. <br> Por favor, utiliza un navegador que soporte HTML5. </canvas>
Atributos de este Canvas
- Atributo id: Le asignamos un nombre único para referirnos a éste desde JavSscript.
- Atributos width y height: Indicamos el alto y ancho del área del canvas.
Por supuesto, podemos colocar de manera opcional otros, como style, para indicar atributos de hojas de estilo y definir su aspecto.
Dibujando el Canvas con JavaScript
Dibujaremos un par de formas sencillas, aunque antes comprobaremos sin el navegador es compatible con Canvas.
//Recibimos el elemento canvas
var canvas = document.getElementById('micanvas');
//Accedo al contexto de '2d' de este canvas, necesario para dibujar
var contexto = canvas.getContext('2d');
//Dibujo en el contexto del canvas
contexto.fillRect(50, 0, 10, 150);
Con getElementById() obtenemos el elemento de la página que se pasa como parámetro, que es el Canvas. Después accedemos al contexto 2D del canvas y, por último, ejecutamos tantos métodos como deseemos sobre el contexto del Canvas para dibujar elementos en el lienzo.
//Recibimos el elemento canvas
var elemento = document.getElementById('micanvas');
//Comprobación sobre si encontramos un elemento
//y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas
if (elemento && elemento.getContext) {
//Accedo al contexto de '2d' de este canvas, necesario para dibujar
var contexto = elemento.getContext('2d');
if (contexto) {
//Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibujar
//Comienzo dibujando un rectángulo
contexto.fillRect(0, 0, 150, 100);
//cambio el color de estilo de dibujo a rojo
contexto.fillStyle = '#cc0000';
//dibujo otro rectángulo
contexto.fillRect(10, 10, 100, 70);
}
}
Con el evento onload del body, ejecutaremos las acciones cuando la página esté cargada por completo:
<body onload="funcionDeDibujo()">
Aunque antes deberemos crear la función funcionDeDibujo() o el recurso para asignar el evento directamente desde un script Javascript:
window.onload = function(){
//instrucciones de dibujo en canvas
}
A continuación, el código completo que resume lo expuesto en el artículo:
<html>
<head>
<title>Probando canvas</title>
<script>
window.onload = function(){
//Recibimos el elemento canvas
var elemento = document.getElementById('micanvas');
//Comprobación sobre si encontramos un elemento
//y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas
if (elemento && elemento.getContext) {
//Accedo al contexto de '2d' de este canvas, necesario para dibujar
var contexto = elemento.getContext('2d');
if (contexto) {
//Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibujar en el canvas
//Comienzo dibujando un rectángulo
contexto.fillRect(0, 0, 150, 100);
//cambio el color de estilo de dibujo a rojo
contexto.fillStyle = '#cc0000';
//dibujo otro rectángulo
contexto.fillRect(10, 10, 100, 70);
}
}
}
</script>
</head>
<body>
<canvas id="micanvas" width="200" height="100">
Este texto se muestra para los navegadores no compatibles con canvas.
<br>
Por favor, utiliza un navegador que soporte HTML5.
</canvas>
</body>
</html>