DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
¡Actualizado el 25-01-2016!

A través de la etiqueta <canvas> 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; todo esto comienza definiendo la etiqueta <canvas> en cuestión; veamos:

<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.

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:

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

Algunas ventajas de usar el canvas en nuestras aplicaciones

Cualquier cosa que escribamos dentro de las etiquetas canvas solamente será interpretado (mostrado) en navegadores que no soportan la etiqueta <canvas>.

¿Cómo funciona la etiqueta <canvas>?

Finalmente, vayamos a la parte interesante de todo esto del canvas y empecemos a realizar nuestra primera aplicación.

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

1. Referenciando el canvas

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

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 experimentos que ejemplifican el uso del canvas.

3.1 Dibujando una línea con canvas

Lo más sencillo consiste en dibujar una línea; para ello necesitamos los siguientes métodos:

3.2 Dibujando un círculo con canvas

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

3.3 Dibujando un texto con canvas

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

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 se han desarrollado a lo largo de tiempo podemos verlos a continuación:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

anime.js librería para animaciones en JavaScript

anime.js librería para animaciones en JavaScript

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Eye Candy

Eye Candy

Algunos artículos que te pueden interesar

Dibujando puntos al azar con Canvas

Dibujando puntos al azar con Canvas

En este artículo dibujaremos un montón de esferas cuyas posiciones son al azar a través de un Canvas.

Andrés Cruz 11-04-2014

¿Cómo obtener la resolución de pantalla con JavaScript?

¿Cómo obtener la resolución de pantalla con JavaScript?

En esta entrada veremos como obtener la resolución de una pantalla con JavaScript nativo.

Andrés Cruz 04-08-2014

Nuevos campos de formularios en HTML5 (Guía rápida)

Nuevos campos de formularios en HTML5 (Guía rápida)

En este artículo trataré de mostrarles los nuevos campos que nos trae el HTML5; como veremos son muchos "type" específicos para cada tipo de campo; pasando por varios formatos de fechas hasta llegar a otros como email, url, rangos entre otros.

Andrés Cruz 18-07-2013