¿Qué es el Canvas?, uso básico del API Canvas en HTML y tutoriales

25-01-2016 - Andrés Cruz

¿Qué es el Canvas?, uso básico del API Canvas en HTML y tutoriales

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

El Canvas es una de las tecnologías más potentes que podemos emplear en el ámbito web, el canvas no es más que un lienzo que permite la creación de gráficos, los cuales (los gráficos) están compuestos de figuras simples, las primitivas de siempre, líneas, círculos/esferas, cuadrados/rectángulos como veremos en esta misma entrada un poco más adelante en los cuales vamos a profundizar en el uso del Canvas, además de tutoriales que les dejaremos para que vean posibles usos sobre el Canvas.

Una vez aclarado que es el canvas, lo siguiente que tenemos que conocer es sobre su compatibilidad; muchos navegadores tienen soporte hoy en día para trabajar con la API de Canvas; los navegadores principales como Google Chrome y Firefox e incluso los navegadores de Microsoft soportan esta potente tecnología que nos permite dibujar gráficas tanto sencillas como simples, nos permite realizar composiciones de imágenes o fotografías como vimos en otras entradas:

Y también el renderizado de vídeo en tiempo real; así que el Canvas es básicamente eso, un lienzo en donde podemos realizar dibujos.

Todo comienza a través de la etiqueta <canvas> que se habilita un área o mejor dicho lienzo en donde es posible dibujar, escribir o incluso renderizar imágenes a través de scripts realizados con JavaScript que es el lenguaje de programación seleccionado para trabajar con esta tecnología:

<canvas id="myCanvas" width="500" height="500" >
<p>Su navegador no soporta canvas :(</p>
</canvas>

Con el canvas es posible crear todo tipo de gráficos simples o complejos a partir de primitivas básicas como círculos, óvalos, rectángulos líneas y polígonos además de fácilmente animables con el método requestAnimationFrame e inclusive el canvas es extendible hasta con los eventos de teclado y ratón, además de otras muchísimas otras características no explicadas en esta entrada que de otra forma (con CSS) serían prácticamente imposibles (o muy difíciles) de realizar como vimos en otras entradas:

Soporte del canvas en los navegadores

Los navegadores modernos desde hace un buen tiempo cuenta con soporte nativo para la etiqueta canvas; sin embargo, es recomendable verificar el soporte; como muchas otras etiquetas, podemos verificar el soporte desde la misma etiqueta; es decir cualquier cosa que se encuentre entre las etiquetas de apertura y cierre de canvas será interpretado por navegadores que no soportan la etiqueta:

  <canvas>
    Su navegador no soporta Canvas
  </canvas>

A nivel de JavaScript, podemos realizar la siguiente validación para verificar si está soportada el API de Canvas en los navegadores:

function isCanvasSupported(){ 
  var elem = document.createElement('canvas'); 
  return !!(elem.getContext && elem.getContext('2d')); 
}

A lo que nos lleva a que el canvas debe tener tres atributos aunque uno de ellos los puedes definir también por el CSS; el primero es el ID que es la forma en la que lo accedemos, y los otros son el ancho y el alto definidos por el width y el height respectivamente.

Algunas ventajas de usar el canvas en nuestras aplicaciones

  • Animable. Cada objeto que dibujamos en el canvas puede ser animado.
  • Interactivo. El Canvas es 100% interactivo y responde a todas las acciones de teclados y ratones.
  • Flexible. Podemos dibujar cualquier cosa en el Canvas, imágenes, líneas, figuras geométricas, polígonos, etc y animar cada uno de esos objetos.
  • Soporte de los navegadores. La mayoría de los navegadores modernos desde hace mucho que soportan el canvas: Soporte de navegadores.
  • El canvas es un estándar. Como no lo son otras tecnologías como el moribundo Flash y Silverlight, Canvas forma parte del HTML5 y cualquier navegador que se respete debe darle soporte.
Cualquier cosa que escribamos dentro de las etiquetas canvas solamente será interpretado (mostrado) en navegadores que no soportan la etiqueta <canvas>.

Ejemplos y Tutoriales sobre el Canvas: ¿Cómo funciona la etiqueta <canvas>?

Finalmente, vayamos a la parte interesante de todo esto del canvas y empecemos a realizar nuestro primer ejemplo.

Con tres sencillos pasos podemos comenzar a trabajar con esta etiqueta:

1. Referenciando el canvas del DOM del HTML con nuestro JavaScript

Lo primero es obtener una referencia al canvas con el cual deseamos trabajar; en este caso, la etiqueta <canvas> tiene el identificador myCanvas:

var myCanvas = document.getElementById("myCanvas");

2. Obteniendo el contexto del canvas vía JavaScript

Para realizar cualquier operación con el canvas , entiéndase dibujar gráficos y/o imágenes debemos obtener el contexto del elemento canvas y de una vez acceder a la API:

El acceso al contexto del canvas proporciona todos los métodos y propiedades para poder dibujar en el mismo.

var ctx=c.getContext("2d");

3. Dibujando primitivas

Ahora si, podemos empezar a dibujar sobre nuestro canvas; veamos una serie de ejemplos que ejemplifican el uso del canvas.

3.1 Dibujando una línea con canvas

El ejemplo o experimento más sencillo que podemos hacer consiste en dibujar una simple línea; el Hola Mundo en el mundo del Canvas: para ello necesitamos los siguientes métodos:

  • moveTo(x,y) punto de comienzo de la línea.
  • lineTo(x,y) punto final de la línea.
  • stroke() dibuja la línea.

3.2 Dibujando un círculo con canvas

Para dibujar un círculo en el canvas se debe usar los siguientes métodos:

  • Un Path es un conjunto de dibujos que realizamos dentro de un canvas; para eso debemos de utilizar el método beginPath() de esta forma damos por terminado un Path cuando volquemos su contenido con el método closePath(); nada en el path será dibujado hasta que se indique al contexto que dibuje el trazado stroke().
  • arc(x,y,r,inicio,final) dibuja un círculo en el canvas.
    • 'x' y 'y' nos indican el centro del círculo.
    • 'r' radio del círculo.
    • 'inicio' y 'final' ángulo de comienzo y final respectivamente.
  • lineTo(x,y) punto final de la línea.
  • stroke() dibuja la línea.

3.3 Dibujando un texto con canvas

Para dibujar existen dos métodos texto con algún formato dentro del canvas.

  • font permite definir la fuente del texto.
  • fillText(texto,x,y) el texto a dibujar en el canvas y su posición dentro del canvas.
  • strokeText(texto,x,y) permite dibujar un texto sin relleno en el canvas dado la posición "x" y "y".
  • stroke() dibuja la línea.

3.4 Dibujando una imagen con canvas

Es posible que te preguntes cuál es el objetivo de dibujar una imagen en un canvas aparte de poder mezclarla con otras primitivas y/o imágenes, además de esto podemos alterar cada uno de los píxeles que componen a la imagen y aplicar algún Procesamiento Digital de Imágenes; eso entre otros experimentos que ya señalamos en otros tutoriales relacionados:


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!