Tutorial de canvas para HTML5
Cuando apareció HTML5 pudimos ver un gran avance en la programación web. HTML5 ofrece nuevas capacidades e incorpora un gran número de API’s que nos permiten ampliar el tradicional HTML a posibilidades más amplias.
Una de las API’s posiblemente más interesantes es canvas. Con esta API podemos tener dentro de nuestro HTML un elemento que nos permitirá generar gráficos, líneas, imágenes, texto y animaciones mediante el uso de JavaScript.
En el post de hoy realizaremos una introducción a este elemento de HTML5 para poder empezar a trabajar con el mismo y si luego quieres ampliar conocimientos, ya tendrás una base para ello.
Tabla de contenidos
Empezando a trabajar con canvas
Para poder empezar a trabajar con canvas en un documento HTML tenemos que definirlo en el mismo.
Esto es muy sencillo y basta con escribir lo siguiente dentro del documento:
<canvas id=»canvas1″ width=»150″ height=»150″></canvas>
En este ejemplo hemos definido un lienzo llamado canvas1 con unas dimensiones de 150x150px. Se puede modificar su aspecto o estilo mediante CSS
Como vemos es extremadamente sencillo definir nuestro canvas, aunque debemos tener en cuenta lo siguiente:
- Si no definimos el tamaño, por defecto será de 300px de ancho por 150 px de alto
- Las coordenadas en canvas tienen su punto de origen en la esquina superior izquierda
- Está soportado por todos los navegadores, aunque con algunas diferencias entre ellos.
A partir de este punto, deberemos usar JavaScript para empezar a dibujar en nuestro canvas si bien antes hay que definir el contexto. Para ello lo más recomendable es definir una función en JavaScript que luego llamaremos desde la sección body de nuestro HTML.
Por ejemplo, definimos la función dibujar de la siguiente forma con un contexto 2d, aunque el mismo podría ser 3D, llamado webgl
function dibujar() {
var canvas = document.getElementById(«canvas»);
var ctx = canvas.getContext(«2d»);
}
Esta función la llamaremos desde HTML de la siguiente forma:
<body onload=»dibujar();»>
<canvas id=»canvas» width=»150″ height=»150″></canvas>
</body>
Los primeros dibujos
Ya estamos en disposición de poder dibujar en nuestro canvas. Debemos tener claro que por desgracia canvas solo admite una forma primitiva de dibujo que es el rectángulo. Cualquier otra forma que queramos dibujar deberá ser combinación de trazos diferentes o el uso de diferentes funciones matemáticas.
Para usar esta forma primitiva de rectángulo, disponemos de tres funciones diferentes que son:
fillRect(x,y,width,height): dibuja un rectángulo relleno
strokeRect(x,y,width,height): dibuja un contorno rectangular
clearRect(x,y,width,height): borra el área especificada y hace que sea totalmente transparente.
Cada una de estas funciones tiene los mismos parámetros. x e y especifican la posición en el lienzo. width es la anchura y height la altura.
Un ejemplo de combinación de rectángulos sería la siguiente:
var canvas = document.getElementById(‘canvas1’);
var ctx = canvas.getContext(‘2d’);
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
Dibujos más complejos
Para dibujar otras estructuras como líneas, círculos o formas, deberemos usar rutas, de lo contrario no sería posible. Para poder crear una ruta, es necesario llamar al método beginPath().
A partir de aquí ya podemos empezar a dibujar y al finalizar usaremos el método closePath. Este método intenta cerrar la forma trazando una línea recta desde el punto actual hasta el inicial. Si la forma ya se ha cerrado o hay solo un punto en la lista, esta función no hace nada.
Dentro de la ruta podemos usar diferentes métodos. En concreto podemos usar lo siguiente:
lineTo(x,y): Este método permite dibujar líneas rectas. Toma dos argumentos x e y, que son las coordenadas del punto final de la línea. El punto de partida depende de las rutas anteriores.
arc(x,y, ,radio,anguloInicio,anguloFin,anticlockwise): Este método toma los parámetros: x e y (que definen el centro de la circunferencia o arco) , el radio, anguloInicio y anguloFin (que definen los puntos de inicio y final del arco en radianes) y anticlockwise (un valor booleano que, cuando tiene valor true dibuja el arco de modo contrario a las agujas del reloj y viceversa cuando es false).
moveTo(x,y): Esta función es utilizada para colocar el punto de partida en otro lugar o para dibujar rutas inconexas. No dibuja nada, solo mueve el punto.
El uso del color
Hasta aquí hemos visto cómo dibujar formas, pero también podemos darles color a las mismas, para ello disponemos de dos funciones: fillStyle y strokeStyle.
strokeStyle se utiliza para configurar el color del contorno de la forma y fillStyle es para el color de relleno. Color puede ser una cadena que representa un valor de color CSS, un objeto degradado o un objeto modelo. Por ejemplo:
ctx.fillStyle = «orange»;
ctx.fillStyle = «#FFA500»;
ctx.fillStyle = «rgb(255,165,0)»;
ctx.fillStyle = «rgba(255,165,0,1)»;
Indicaremos el uso de estas funciones antes de dibujar el objeto sobre el que se desea aplicar.
Podemos aplicar también degradados lineales o radiales mediante el uso de las funciones createLinearGradient y createRadialGradient junto con la función fillStyle:
createLinearGradient(x1,y1,x2,y2): Los parámetros son el punto de inicio del degradado (x1 e y1) y el punto final del degradado (x2 e y2)
createRadialGradient(x1,y1,r1,x2,y2,r2: Los parámetros son el punto de inicio del degradado (x1 e y1) y r1 radio y el punto final del degradado (x2 e y2) y r2 el radio.
Un ejemplo de degraddo linear sería el siguiente:
var c=document.getElementById(«canvas1»);
var ctx=c.getContext(«2d»);
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,»black»);
grd.addColorStop(1,»white»);
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
El uso en detalle de estas funciones puede consultarse en cualquier manual detalla de canvas.
Otras opciones que podemos utilizar es el uso de patrones y transparencias que pueden enriquecer nuestro dibujo.
Con lo visto en este pequeño tutorial, ya tenemos todos los elementos necesarios para el uso de canvas en HTML5. A partir de aquí, y si te interesa, solo es cuestión de ir probando las diferentes funciones que la API pone a nuestra disposición y usar la imaginación.
©2025 Deusto Formación