Herramientas Online – Dibujar en HTML5


Las especificaciones HTML5 aún no están terminadas, pero ya hay muchos que están experimentando con ellas gracias a su incorporación en los navegadores.

Para realizar dibujos se utiliza el elemento <canvas> que permite que los navegadores que soporten esta nueva tecnología HTML (Safari, Chrome, Firefox, Opera, entre otros), pueda manipular los colores dinámicamente.

Canvas es un elemento que define una región (ancho x alto) en el documento HTML la misma que puede ser manipulada utilizando Javascript.

Harmony – Procedural Drawing Tool

Harmony – Procedural Drawing Tool es una herramienta para dibujar utilizando el mismo navegador aprovechando de las cualidades de HTML5.

Mr.doob o Ricardo Cabello, es un diseñador/desarrollador que creó esta sencilla pero modular herramienta de dibujo, pues es posible agregar más y más estilos de pinceles.

Durante el proceso de creación, Firefox y Opera no soportaron context.globalCompositeOperation = ‘darker’, aparentemente por falta de soporte en la aceleración de hardware.

Esa operación establece cómo son dibujadas las formas e imágenes sobre la imagen (mapa de bits) existente. La misma que fue removida de las especificaciones de HTML5 más tarde

Según dice Mr.doob, ya que eso hace posible ejecutar un fundido parecido a lo que realiza Photoshop (multiply).

En el vídeo pueden apreciar cómo funciona.

Y es posible guardar el dibujo creado en formato PNG.

Este es un dibujo que hice con esa herramienta, me tomó un rato hacerlo, una vez que le agarras el truco, se vuelve sencillo su uso:

image

Para probarlo, accedan a su sitio oficial.

Sketchpad 

Sketchpad es otra herramienta más profesional que el anterior, pues ofrece varias características que una aplicación de dibujo lo hace, tales como estilos de pincel (sólido, degradados, patrones), tipos de pincel (lápiz, pincel, caligrafía), texto, rellenado, selección, etc. Además también permite guardar la imagen.

image

Esta es una demostración de cómo se usa (source: youtube)

Sketchpad ya tiene un grupo en Flickr que muestra los dibujos realizados utilizando esta herramienta web.