Trabajar con Canvas HTML5 con una sintaxis similar a la de jQuery

CanvasQuery es una biblioteca escrita con JavaScript para la manipulación del elemento HTML Canvas, que como principal ventaja cuenta con una sintaxis muy similar a la del framework jQuery, facilitando considerablemente su implementación.

La biblioteca completa es muy liviana, apenas unos 8kb en su versión de desarrollo comprimida mediante gzip y unos 6kb en su versión de producción.

Un detalle interesante es que el proyecto esta preparado para ser utilizado con plugins, esta capacidad le permite ampliar su repertorio de posibilidades de una manera sencilla.

canvas html5 como en jQuery

En la sección de ejemplos van a encontrar varias demostraciones de uso. Me sorprendió bastante la capacidad que tiene el proyecto para colorizar imágenes, las mismas se definen con un determinado patrón para luego, y con apenas unas lineas de código, aplicarles un color.

Ejemplo de uso:

Un pequeño ejemplo sobre como dibujar, pintar y darle un efecto blur a un elemento. Como se puede apreciar la sintaxis es prácticamente la misma que la utilizada por jQuery.

cq(640, 480)
  .drawImage(image, 0, 0)
  .fillStyle("#ff0000")
  .fillRect(64, 64, 32, 32)
  .blur()
  .appendTo("body");

La documentación de CanvasQuery es breve y concisa, que su sintaxis sea idéntica a la de jQuery es una ventaja enorme para aquellas personas que nos estamos iniciando en el mundo del elemento HTML5 Canvas.

Web: CanvasQuery