Este documento introduce el elemento canvas de HTML5 y proporciona un ejemplo práctico de cómo dibujar formas geométricas en un canvas. Explica que canvas permite generar gráficos y animaciones a través de JavaScript y cómo agregar un canvas a un documento HTML. A continuación, muestra cómo dibujar un círculo, rectángulo y formas compuestas utilizando métodos como arc(), fillStyle y fillRect().

1. Scientia et Technica Año XVI, No 49, Diciembre de 2011. Universidad Tecnológica de Pereira. ISSN 0122-1701 1
CANVAS
canvas
Autor: Stiven Valencia Ramírez
Universidad Tecnológica de Pereira
Stivenvalencia19755@gmail.com
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
//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
Fecha de Recepción: (Letra Times New Roman de 8 puntos)
Fecha de Aceptación: Dejar en blanco

2. Scientia et Technica Año XVI, No 49, Diciembre de 2011. Universidad Tecnológica de
Pereira.
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)
2

3. Scientia et Technica Año XVI, No 49, Diciembre de 2011. Universidad Tecnológica de Pereira.
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.
____________________________
1. Las notas de pie de página deberán estar en la página donde se citan. Letra Times New Roman de 8 puntos
3