Ingeniería de Sistemas y Computación. Facultad de Ingenierías. Universidad Tecnológica de Pereira.

Introducción a la Informática
CANVAS

Programación para la Web

Programming for the Web

Autor 1: Juan Enmanuel Solis Vinasco

Ingeniería de Sistemas y Computación, Universidad Tecnológica de Pereira, Pereira, Colombia

Correo-e: j.solis@utp.edu.co

Resumen— La programación para la Web es una forma de generar
aplicaciones que se ejecutan directamente sobre los navegadores
estándar, como Chrome, Firefox o Safari, entre otros. Un programa
Web se escribe utilizando lenguajes que corren directamente sobre el
servidor o que se ejecutan directamente sobre el navegador. En el
caso que ahora nos interesa, el desarrollo de programas se realizará
sobre el navegador, y por tal motivo utilizaremos lenguajes
apropiados para este contexto. Las herramientas de trabajo a emplear
en este paper son las siguientes: HTML5, CSS3, JavaScript y
CANVAS. El HTML5 se utiliza para definir el contenido de las
páginas web. CSS3 se emplea para dar forma a dicho contenido. Con
JavaScript brindamos funcionalidad a los componentes definidos
mediante HTML5. Por último, a través de CANVAS crearemos un
lienzo de dibujo sobre el cual podremos escribir, generar formas y
construir simulaciones de problemas de cualquier índole en el campo
de la Ingeniería. En el presente artículo desarrollaremos algunos
ejemplos que servirán como base de trabajo para futuros desarrollos.
El paper se desarrolla con base en referencias existentes en la Web,
organizando los temas de modo que sirvan como base de
entendimiento de este importante tema.
on the Web, organizing the topics so that they serve as a basis for
understanding this important topic. The paper is developed based on
existing references on the Web, organizing the topics so that they
serve as a basis for understanding this important topic.
Key Word — HTML5, CSS3, CANVAS, JavaScript, JQuery,
Programming, Web, Imperative, Functional, Simulation, Objects,
Properties, Methods.
I. INTRODUCCIÓN
“HTML, que significa Lenguaje de Marcado para Hipertextos
(HyperText Markup Language) es el elemento de construcción más
básico de una página web y se usa para crear y representar
visualmente una página web. Determina el contenido de la página
web, pero no su funcionalidad. Otras tecnologías distintas de HTML
son usadas generalmente para describir la apariencia/presentación de
una página web (CSS) o su funcionalidad (JavaScript).

Palabras clave— HTML5, CSS3, CANVAS, JavaScript, JQuery,
Programación, Web, Imperativo, Funcional, Simulación, Objetos,
Propiedades, Métodos.
Abstract— Programming for the Web is a way to generate
applications that run directly on standard browsers, such as Chrome,
Firefox or Safari, among others. A Web program is written using
languages that run directly on the server or that run directly on the
browser. In the case that we are now interested in, the development
of programs will be carried out on the browser, and for this reason
we will use appropriate languages for this context. The work tools to
be used in this paper are the following: HTML5, CSS3, JavaScript
and CANVAS. HTML5 is used to define the content of web pages.
CSS3 is used to shape such content. With JavaScript we provide
functionality to the components defined through HTML5. Finally,
through CANVAS we will create a drawing canvas on which we can
write, generate forms and build simulations of problems of any kind
in the field of Engineering. In the present article we will develop
some examples that will serve as the basis of work for future
developments. The paper is developed based on existing references
HTML le da "valor añadido" a un texto estándar en español. Hiper
Texto se refiere a enlaces que conectan una página Web con otra, ya
sea dentro de una página web o entre diferentes sitios web. los
vínculos son un aspecto fundamental de la Web. Al subir contenido a
Internet y vincularlo a páginas de otras personas, te haces
participante activo de esta Red Mundial.
HTML usa "markup" o marcado para anotar textos, imágenes, y otros
contenidos que se muestran en el Navegador Web. El lenguaje de
marcado HTML incluye "elementos" especiales tales
como <head>, <title>, <body>, <header>, <article>, <section>, <p>,
<div>, <span>, <img>, y muchos otros más.” (Introducción tomada
de [1])
“Hojas de Estilo en Cascada (del inglés Cascading Style Sheets)
o CSS es el lenguaje utilizado para describir la presentación de
documentos HTMLo XML, esto incluye varios lenguajes basados
en XML como son XHTMLo SVG. CSS describe como debe ser
2 Ingeniería de Sistemas y Computación. Facultad de Ingenierías. Universidad Tecnológica de Pereira.
renderizado el elemento estructurado en pantalla, en papel, hablado o
en otros medios.” [2]
“JavaScript® es el lenguaje interpretado orientado a objetos
desarrollado por Netscape que se utiliza en millones de páginas web
y aplicaciones de servidor en todo el mundo.JavaScript de Netscape
es un superconjunto del lenguaje de scripts estándar de la edición de
ECMA-262 3 (ECMAScript) que presenta sólo leves diferencias
respecto a la norma publicada.
Contrariamente a la falsa idea popular, JavaScript no es "Java
interpretativo". En pocas palabras, JavaScript es un lenguaje de
programación dinámico que soporta construcción de objetos basado
en prototipos. La sintaxis básica es similar a Java y C++ con la
intención de reducir el número de nuevos conceptos necesarios para
aprender el lenguaje. Las construcciones del lenguaje, tales como
sentencias if, y bucles for y while, y bloques switch y try ... catch
funcionan de la misma manera que en estos lenguajes (o casi)
JavaScript puede funcionar como lenguaje procedimental y
como lenguaje orientado a objetos. Los objetos se crean
programáticamente añadiendo métodos y propiedades a lo que de
otra forma serían objetos vacíos en tiempo de ejecución, en
contraposición a las definiciones sintácticas de clases comunes en los
lenguajes compilados como C++ y Java. Una vez se ha construido un
objeto, puede usarse como modelo (o prototipo) para crear objetos
similares.” [3]
“El elemento HTML canvas (<canvas>) se puede utilizar para
dibujar gráficos a través de secuencias de comandos (por lo
general JavaScript ). Por ejemplo, puede usarse para dibujar gráficos,
hacer composiciones de fotos o incluso realizar animaciones.
Las aplicaciones de Mozilla adquirieron la compatibilidad
con <canvas> a partir de Gecko 1.8 (es decir, Firefox 1.5 ). El
elemento fue originalmente introducido por Apple en el OS
X Dashboard y Safari. Internet Explorer, antes de la versión 9.0 beta,
no admite de forma nativa <canvas> , pero una página puede de
hecho añadir la compatibilidad mediante la inclusión de un script del
proyecto Explorer Canvas de Google. Opera 9 también es compatible
con <canvas>.” [4]
II. DESARROLLO DEL TEMA
El desarrollo del tema básico se ha tomado de la referencia [5]. Una
vez elaborada la teoría básica, se propone un conjunto de ejercicios a
ser construidos dentro del paper.
En atención a que se ha tomado el texto de manera textual, se
entrecomilla el contenido para respetar la autoría del artículo
original. Se recomienda visitar directamente el tutorial en la Web
para entender mejor los principios indicados en este paper. El
objetivo es permitir que el lector se familiarice con el tema del modo
más atractivo posible. Una vez comprendido el tema central, se
procederá a desarrollar ejemplos propios aplicados a la temática en
particular.
“El elemento canvas permite especificar un área de la página donde
se puede, a través de scripts, dibujar y renderizar imágenes, lo que
amplía notablemente las posibilidades de las páginas dinámicas y
permite hacer cosas que hasta ahora estaban reservadas a los
desarrolladores en Flash, con la ventaja que para usar canvas no será
necesario ningún plugin en el navegador, lo que mejorará la
disponibilidad de esta nueva aplicación.
Canvas permite dibujar en la página y actualizar dinámicamente estos
dibujos, por medio de scripts y atendiendo a las acciones del usuario.
Todo esto da unas posibilidades de uso tan grandes como las que
disponemos con el plugin de Flash, en lo que respecta a
renderización de contenidos dinámicos. Las aplicaciones pueden ser
grandes como podamos imaginar, desde juegos, efectos dinámicos en
interfaces de usuario, editores de código, editores gráficos,
aplicaciones, efectos 3D, etc.
Actualmente algunas de las aplicaciones más novedosas para la web
utilizan ya canvas para su funcionamiento, donde se puede destacar
Bespin, un editor de código de Mozilla, o Google Wave. En la
entrada de la Wiki sobre Canvas podemos encontrar diversos enlaces
a sitios web con ejemplos de uso de este elemento del HTML 5.
Para comenzar realizaremos un ejemplo de dibujo de dos rectángulos
con distintos colores, que realizaremos utilizando el un par de
funciones del API de dibujo en canvas mediante Javascript. Claro
que el elemento canvas tiene muchas cosas que debemos conocer
para ir soltándonos en su manejo, pero al menos podremos ver una
primera prueba para ir abriendo boca.
El ejemplo se basa en dos partes, primero una en la que colocaremos
un lienzo canvas en un lugar de nuestra página, con la etiqueta
HTML "CANVAS" y luego otra parte en la que dibujaremos dentro
de ese elemento los rectángulos con programación Javascript. Sobra
decir que harán falta unos conocimientos al menos básicos de
Javascript para poder trabajar con el canvas.
COLOCAR EL ELEMENTO HTML CANVAS
Ahora comencemos situando dentro del cuerpo de la página la
etiqueta CANVAS. Esta etiqueta, como decíamos forma parte del
estándar del HTML 5.
<canvas id="micanvas" width="200" height="100">
Este texto se muestra para los navegadores no compatibles
con canvas.
<br>
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>
El elemento tiene apertura y cierre y entre medias podemos escribir
un texto que será lo que vean los usuarios que entren con
navegadores que no soporten la etiqueta CANVAS.
Para especificar las características de este canvas tenemos varios
atributos:
Atributo id:
Para asignarle un nombre único y luego referirnos a este canvas
desde Javascript.
Atributos width y height:
Para indicar la anchura y altura del área del canvas.
Ingeniería de Sistemas y Computación. Facultad de Ingenierías. Universidad Tecnológica de Pereira. 3

Otros atributos se pueden colocar de manera opcional, como por

ejemplo style, para indicar atributos de hojas de estilo para definir el Esto lo conseguimos con la el evento onload del body de la página:
aspecto del lienzo.
<body onload="funcionDeDibujo()">

Inicialmente el canvas está en blanco y cuando queremos pintar sobre

él tenemos que acceder al contexto de renderizado del canvas, sobre Claro que tendremos que crear la funcionDeDibujo() con el código
el que podremos invocar distintos métodos para acceder a las anterior para operar con el canvas.
funciones de dibujo. El proceso simplificado sería el siguiente:
O bien podemos utilizar este otro recurso para asignar el evento
directamente desde un script Javascript:
//Recibimos el elemento canvas
var canvas = document.getElementById('micanvas');
window.onload = function(){
//instrucciones de dibujo en canvas
//Accedo al contexto de '2d' de este canvas, }
necesario para dibujar
var contexto = canvas.getContext('2d'); El código completo de nuestro primer ejemplo de uso de canvas sería
el siguiente:
//Dibujo en el contexto del canvas
contexto.fillRect(50, 0, 10, 150);
<html>
<head>
Primero con el método getElementById() obtengo el elemento de la <title>Probando canvas</title>
página que se pasa como parámetro, que es el canvas. Luego accedo <script>
al contexto 2D del canvas, que es el que tiene varios métodos que window.onload = function(){
sirven para dibujar en el lienzo. Por último puedo ejecutar tantos //Recibimos el elemento canvas
métodos como desee sobre el contexto del canvas para pintar var elemento =
elementos en el lienzo. document.getElementById('micanvas');
//Comprobación sobre si encontramos un elemento
//y podemos extraer su contexto con getContext(),
Como decía, estas sentencias Javascript no son compatibles con que indica compatibilidad con canvas
todos los navegadores, por lo que habrá que hacer unas if (elemento && elemento.getContext) {
comprobaciones básicas, para saber si ejecutar o no las distintas //Accedo al contexto de '2d' de este canvas,
instrucciones de dibujo.Veamos este código, un poco más elaborado, necesario para dibujar
que hace las comprobaciones necesarias para no hacer nada en el var contexto = elemento.getContext('2d');
caso que el navegador no sea compatible con canvas. if (contexto) {
//Si tengo el contexto 2d es que todo ha
ido bien y puedo empezar a dibujar en el canvas
//Recibimos el elemento canvas //Comienzo dibujando un rectángulo
var elemento = document.getElementById('micanvas'); contexto.fillRect(0, 0, 150, 100);
//Comprobación sobre si encontramos un elemento //cambio el color de estilo de dibujo a
rojo
//y podemos extraer su contexto con getContext(),
que indica compatibilidad con canvas contexto.fillStyle = '#cc0000';
if (elemento && elemento.getContext) { //dibujo otro rectángulo
//Accedo al contexto de '2d' de este canvas, contexto.fillRect(10, 10, 100, 70);
necesario para dibujar }
var contexto = elemento.getContext('2d'); }
if (contexto) { }
//Si tengo el contexto 2d es que todo ha ido
bien y puedo empezar a dibujar </script>
//Comienzo dibujando un rectángulo </head>
contexto.fillRect(0, 0, 150, 100);
//cambio el color de estilo de dibujo a rojo <body>
contexto.fillStyle = '#cc0000';
//dibujo otro rectángulo <canvas id="micanvas" width="200" height="100">
contexto.fillRect(10, 10, 100, 70); Este texto se muestra para los navegadores no
} compatibles con canvas.
} <br>
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>

Ahora sólo falta una última cosa, que es ejecutar estas acciones sólo </body>
</html>
cuando la página esté cargada por completo y lista para recibirlas.
4 Ingeniería de Sistemas y Computación. Facultad de Ingenierías. Universidad Tecnológica de Pereira.

Para posicionar elementos en el canvas tenemos que tener en cuenta
su eje de coordenadas en dos dimensiones, que comienza en la
esquina superior izquierda del lienzo.
R/. La facilidad que tiene para que el usuario pueda manejar este
lenguaje, por que con el CANVAS minimiza mucho las cosas y por
eso mismo canvas es líder en los dispositivos móviles.
2) Enumere un grupo de áreas en las cuáles la programación con
CANVAS pueda tener impacto en el desarrollo de aplicaciones
útiles.

El lienzo producido por canvas tendrá unas dimensiones indicadas R/.

-Animaciones 2D
con los atributos width y height en la etiqueta CANVAS. Por tanto, -Creación de páginas web
-Diseño grafico
la esquina superior izquierda será el punto (0,0) y la esquina inferior -Creación de aplicaciones para móviles.

derecha el punto definido por (width-1,height-1), osea, el punto

máximo de coordenadas marcado por su anchura y altura.

Nota: Hemos indicado que el punto de la esquina inferior derecha es REFERENCIAS

(width-1,height-1) porque las coordenadas comienzan en (0,0), luego
la coordenada final en anchura y altura será 1 menos el tamaño [1] HTML. Disponible en:
máximo de width y height definido en la etiqueta CANVAS. Por https://developer.mozilla.org/es/docs/Web/HTML
ejemplo, si la anchura es 50 y la altura es 100, entonces las
coordenadas van desde (0,0) hasta (49,99). [2] CSS. Disponible en:
https://developer.mozilla.org/es/docs/Web/CSS
Podemos ver el siguiente diagrama para tener una idea exacta de las
[3] JavaScript. Disponible en:
dimensiones y coordenadas en un canvas” https://developer.mozilla.org/es/docs/Web/JavaScript/Acerca_de_Jav
aScript

[4] CANVA. Disponible en:

https://developer.mozilla.org/es/docs/Web/HTML/Elemento/canvas

[5] Manual de Canvas del HTML5. Disponible en:

https://desarrolloweb.com/manuales/manual-canvas-html5.html

III. CONCLUSIONES

Ya con lo visto ahora CANVAS es una herramienta muy

funcional para el trabajo de diseño y animaciones de paginas
web, por lo cual cada de sus pasos son muy completos y
detallados, porque, por el mínimo error cometido al momento
de digitar cualquier información puede saltar error y tener que
revisar cada cosa de manera muy detallada, pero gracias al
avances de la informática hay muchas herramientas que
ayudan al programador a hacer su trabajo más fácil y cómodo.

PREGUNTAS LIGADAS AL DESARROLLO CANVAS

En esta sección se plantean algunas cuestiones cuyas respuestas

arrojan luz adicional sobre el desarrollo de programas utilizando
CANVAS y sus campos específicos de aplicación.

Preguntas:

1) ¿Qué ventajas tiene utilizar CANVAS en lugar de FLASH?