Two.js es una pequeña API escrita en JavaScript para el dibujo en dos dimensiones de manera sencilla y aprovechando al máximo las ventajas provistas por los navegadores modernos.
El proyecto funciona en múltiples contextos según sea necesario, puede operar utilizando svg, canvas y webgl, esto varia según el navegador utilizado y la tecnología aceptada por cada uno.
El tamaño de esta biblioteca es de 128kb en su versión de desarrollo y de aproximadamente 50kb en su versión simplificada. Obviamente el peso no es el fuerte de este proyecto sin embargo se comprende que sea así por su potente API de dibujo.
Una aclaración importante es que este proyecto tiene como requerimiento básico a Underscore.js, Backbone.js Events. Estas biblioteca se encuentran incluidas en el peso del proyecto, de ahí su elevado peso, si ya están incluidas en nuestro sitio podemos crear una versión básica que no los incluya y de ahí bajar su peso.
Ejemplo de uso:
// Make an instance of two and place it on the page.
var elem = document.getElementById('draw-shapes').children[0];
var params = { width: 285, height: 200 };
var two = new Two(params).appendTo(elem);
// two has convenience methods to create shapes.
var circle = two.makeCircle(72, 100, 50);
var rect = two.makeRectangle(213, 100, 100, 100);
// The object returned has many stylable properties:
circle.fill = '#FF8000';
circle.stroke = 'orangered'; // Accepts all valid css color
circle.linewidth = 5;
rect.fill = 'rgb(0, 200, 255)';
rect.opacity = 0.75;
rect.noStroke();
// Don't forget to tell two to render everything
// to the screen
two.update();
Ejecutando el código del ejemplo la salida seria el dibujo de un cuadrado y un circulo pintados de celeste y naranja respectivamente.
La biblioteca es muy completa, si están interesados les recomiendo una vuelta por el sitio oficial para ver más ejemplos y posibilidades.
Web: Two.js
