Introducción
Entre las muchas maravillas que nos trae HTML5 está el componente Canvas cuya funcionalidad es sorprendente en comparación con lo que nos tenía acostumbrados la versión anterior. Durante este fin de semana decidí jugar un poco con el Canvas para experimentar con su funcionalidad básica de dibujar.
Para esto desarrollé una aplicación web muy simple que permite dibujar puntos y líneas en un lienzo blanco. El color de las lineas puede ser modificado entre amarillo, azul y rojo.
La aplicación web resultante puede ser consultada desde un navegador web de escritorio o uno de un dispositivo móvil ya que no sólo se manejaron los eventos de ratón convencionales sino que también se incluyeron los eventos de touch que permiten detectar la interacción con las pantallas táctiles.
Demostración
Demostración uso básico de Canvas
Enlaces
- Demostración
http://demo.jorgeivanmeza.com/JavaScript/DrawingCanvasDemo/ - The Canvas element en W3C
http://www.w3.org/TR/html5/the-canvas-element.html - HTML5 Canvas Element Guide
http://sixrevisions.com/html/canvas-element/ - Create a Drawing App with HTML5 Canvas and JavaScript: una versión ampliada e interesante de este experimento
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
