Capítulo 9

Dibujo en el canvas
 Dibujo en el canvas
Dicha aplicación se puede hacer muy compleja. Aquí
veremos la forma de cambiar colores, anchos de línea y
grabar la imagen utilizando AJAX y PHP. Tomando como
partida los conocimientos que revisamos en el capítulo
básico de canvas, iniciemos a desarrollar nuestra
aplicación.
 9.1 Dibujar una línea en el canvas con el ratón sostenido

Una de las ventajas en esta aplicación es que el algoritmo en sí

mismo es muy parecido al que utilizamos con otras
herramientas, por ejemplo Flash. En esta sección mostraremos
todo el listado, y en las siguientes sólo el código dentro del
contexto. Abra el archivo canvasBase.html y guárdelo como
canvasDibujo.html
Dibujar una línea con botón sostenido, archivo
canvasDibujo.html
Dibujar una línea con botón sostenido, archivo
canvasDibujo.html
 Método getBoundingClientRect
Cuando JavaScript detecta las coordenadas del movimiento del
ratón, o de la zona en que es pulsado o levantado el botón, nos
da las coordenas dentro del navegador, no dentro del canvas, lo
cual complica los cálculos.
La mejor manera de resolverlo es por medio del método
getBoundingClientRect, que nos regresa a la posición relativa del
objeto solicitado dentro de la página en un objeto. Este método
tiene la desventaja de que funciona sólo en Safari 4, Firefox 3,
Opera 9.5, e Internet Explorer 8 y versiones inferiores lo tienen
mal implementado (o digamos, diferente). La buena noticia es
que se ejecuta correctamente el canvas de HTML5 y no tenemos
problema con el método.
 Método getBoundingClientRect

Una vez que detectamos las coordenadas, lo que resta es

simplemente guardar el punto inicial en variables y cuando
detectemos que se suelta el botón del ratón, procedemos a
dibujar la línea. Tenemos comentado el detector de eventos para
el movimiento del ratón, verá que se generan múltiples líneas a
partir del origen, es decir, del punto donde pulsamos el ratón.
Guarde su archivo.
9.2 Dibujar una línea continua con el ratón en el canvas
En esta sección dibujaremos una línea continua cada vez que movamos el
ratón sobre el canvas con el botón sostenido. Funcionará como un lápiz sobre
nuestro lienzo. En esta parte de la aplicación, tendremos sólo un color
(amarillo) y sólo un ancho. En las siguientes secciones usaremos diferentes
colores.
Abra el archivo de la sección anterior, canvasDibujo.html y guárdelo como
ncanvasDibujoLineaContinua.html.

Estamos utilizando una variable boleana llamada bandera, la cual nos indica si
estamos dibujando o no. En realidad lo que estamos haciendo es dibujar
pequeñas líneas rectas que lucen como una línea continua, y cuando lo
realizamos, el punto final de la primera línea forma parte del punto inicial de
la siguiente,
 9.3 Cambiar los colores y el ancho de la línea

Utilizaremos elementos HTML que se encuentran fuera del canvas para poder
modificar el color de la línea su ancho, así como crear un botón para limpiar
el lienzo. En el caso del siguiente listado, mostraremos (casi) todo el código,
ya que existen varios cambios y añadimos algunos elementos HTML.

Añadimos dos selectores: uno para el color, que regresa la cadena

bcorrespondiente al mismo, y otro para el ancho de la línea, que simplemente
regresa un número entre 1 y 5.
Cada vez que el usuario selecciona una opción la modificamos en el canvas
detectándola con el evento onchange y modificamos el valor en el script. Por
medio del botón Borra todo ejecutamos el método clearRect() de toda el
área.
 9.4 Guardar la imagen del canvas

Al tener nuestra herramienta básica de dibujo siempre existirá la inquietud de

grabar nuestras obras de arte. Para ello necesitamos algunas herramientas
que no son propiamente HTML5, como son AJAX y un poco de PHP. Es
importante remarcar que esta funcionalidad sólo opera correctamente en un
servidor Web, es decir, necesita instalar en su computadora local una
herramienta tipo XAMPP, WAMP o MAMP, o subir este ejercicio a un servidor,
ya que PHP sólo funciona en estos ambientes.
 Métodos

En la primera línea de la función recuperamos la información del canvas y la

almacenamos en el objeto data. Creamos luego el objeto XMLHttpRequest y
luego el detector de eventos cuando la carga se ha finalizado. Por medio del
método open enviamos la información al archivo snapshot.php, que también
se debe subir al servidor en la misma carpeta. Si usted cambia su ubicación
debe de agregar la ruta.
 Métodos

• Con el método setRequestHeader, le indicamos que vamos a enviar datos

binarios y con el método send() le decimos que inicie la carga, enviando
los datos del canvas. En la función de callback recibimos el nombre del
archivo generado desde PHP.
• A continuación enlistamos el archivo PHP que recibe la información del
canvas y la almacena en un archivo. Si usted cuenta con otro lenguaje de
servidor, como ASP o similar, deberá sustituir al script y su llamado en la
línea 10 del listado anterior.
Archivo para subir la imagen con PHP,
archivo snapshot.php
 Procedimiento
En este script recibimos la información del canvas por medio de la función
file_get_contents(), que es similar a la función file(), pero podemos indicarle
un inicio y una longitud de los datos leídos. Si la lectura del archivo falla,
regresará un valor booleano falso.

• Quitamos el encabezado de la información, que no es parte de la imagen,

y lo convertimos al formato base64, que es como se manejan las
imágenes.
• Generamos un nombre de archivo por medio de un número aleatorio
grande y grabamos el archivo por medio del modo “wb” o escribir datos
de tipo binario.
• Cerramos el archivo y regresamos el nombre del mismo a la página HTML.
Si existió algún error en el proceso, regresamos a la cadena ERROR.
 Ejecución en servidor web

Como habíamos comentado, este ejercicio hay que ejecutarlo en algún

servidor Web, ya sea remoto o local, para que PHP se pueda ejecutar. Al
terminar, usted deberá tener su archivo PNG en la carpeta de imágenes, el
cual también tendrá que crear en el servidor.
http://javascript.info/tutorial/coordinates
http://help.dottoro.com/ljvmcrrn.php
https://developer.mozilla.org/es/docs/Web/API/Element/
getBoundingClientRect
http://php.net/manual/es/function.file-get-contents.php