En el presente tutorial haremos una introducción al elemento canvas de HTML5 acompañado de un ejemplo práctico.

HTML5 trajo consigo muchas APIs que cambiaron la manera en la que desarrollamos contenido para la web, sin duda has escuchado o usado muchas de estas sin darte cuenta, así que hoy en este artículo vamos a hablar acerca de una de las API’s que tiene HTML5. ¡Hoy hablaremos sobre canvas!

Introducido inicialmente por Apple para ser utilizado en su sistema Mac OS X, canvas es un elemento dentro de nuestro documento HTML, que nos permite generar gráficos y animaciones por medio de scripting (JavaScript).
Para utilizarlo en nuestro documento HTML solo debemos escribir el elemento y establecerle un ancho y alto.

//De no establecer un tamaño por defecto será de 300px x 150px

En canvas el punto de origen de las coordenadas inicia en la esquina superior izquierda como se ve en la siguiente imagen.

Podemos aplicar estilos a nuestro canvas usando CSS, donde podemos agregar propiedades como border, margin, padding, entre otros, como en el siguiente ejemplo:

CSS:

canvas {
   border: solid black 0.3rem;
   border-radius: 1rem;
}

Pasemos a hablar ahora sobre la compatibilidad en los navegadores, en la actualidad canvas es soportado por la gran mayoría de los navegadore actuales, ya desde el 19 de septiembre del 2014, es soportado desde:

• Internet Explorer 10
• Chrome 36
• Safari 6
• Firefox 31

Ahora vamos a dibujar algunas formas geométricas en canvas.

Dentro de nuestro documento HTML de toda la vida, escribimos el elemento"canvas" con un width de 500, un height de 300 y un id=”canvas”, en los estilos CSS aplicaremos al elemento canvas un borde sólido de 5px y de color negro y un border radius de 16px.

Para dibujar en nuestro canvas vamos utilizar JavaScript, comenzamos declarando la función draw() y dentro de esta vamos a definir el contexto que para el ejercicio será “2d”, se puede definir otro tipo de contexto de ser necesario, por ejemplo webgl, webgl2 o bitmaprenderer.

Además dentro del elemento body agregaremos el evento onload=”draw();” que ejecutará nuestra función draw luego de que la página esté cargada.

Hasta aquí solo podemos visualizar el borde de nuestro canvas, ahora vamos a comenzar a dibujar en él.

Es importante saber qué canvas solo acepta una forma primitiva que es el rectángulo, para dibujar otro tipo de formas podemos apoyarnos en la unión de varios trazos o de funciones matemáticas que nos ayudarán a crear nuevas formas.

Comenzaremos dibujando un círculo, para esto vamos a usar la propiedad fillStyle en donde estableceremos un color para nuestro círculo, el método arc(), que se encargará de dibujar y el método fill() que va a establecer un color de relleno.

Para usar correctamente arc() debemos saber los valores que necesitamos para dibujar un círculo.

arc(x,y,radio,anguloInicio,anguloFin,anticlockwise);
arc(250,130,100,0,Math.PI*2,false)

Lo siguiente que haremos será sobreponer figuras una encima de otra.

Creamos otro círculo, esta vez más pequeño y en el centro de este vamos a agregar un rectángulo utilizando el método fillRect(), para utilizar correctamente fillRect() es necesario establecer los siguientes valores:

fillRect(x,y,ancho,alto)
fillRect(150,120,200,20)

Finalmente agregamos un último círculo, solo que esta vez aún más pequeño que el anterior y con esto ya terminamos de formar nuestra figura.

Hasta aquí termina este tutorial. Podemos crear cosas interesantes solo con un par de figuras. Esto solo fue un breve vistazo a lo que puedes hacer con CANVAS. Si quieres descubrir todo su poder, puedes entrar al Curso de API’s de HTML 5 que tenemos en la plataforma.

Este fue @kusillus, nos vemos en la próxima.