A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, canvas2d, and svg.
Home • Examples • Documentation • Help
Download the minified library and include it in your html. Alternatively see how to build the library yourself.
<script src="js/two.min.js"></script>Here is boilerplate html in order to draw a spinning rectangle in two.js:
<!doctype html>
<html>
<head>
<script src="js/two.min.js"></script>
</head>
<body>
<script>
var two = new Two({
fullscreen: true,
autostart: true
}).appendTo(document.body);
var rect = two.makeRectangle(two.width / 2, two.height / 2, 50 ,50);
two.bind('update', function() {
rect.rotation += 0.001;
});
</script>
</body>
</html>Two.js uses nodejs in order to build source files. You'll first want to install that. Next you'll want to install node-minify:
cd two.js/utils
npm install node-minify
Then open up ./utils/build.js in the text editor of your choice. You'll see an array at the top called files. This is the list and order of source files that get compiled to the built source. Feel free to add, subtract, or modify based on your needs.
If you're making an application and you're only using one renderer (i.e: svg context) then it is highly recommended to remove canvas and webgl renderers from your build in order to drastically decrease your file size.
Finally, build the project:
node two.js/utils/build
Nightly
- Can properly pass
domElementon construction of new instance of two - Added
overdrawboolean towebglrenderer @arodic - Added support for ie9 svg interpretation @tomconroy
- Added
subdividemethod forTwo.PolygonandTwo.Group - Ensure sure that
manualproperly is set on construction ofTwo.Polygonthat it bindsTwo.Anchor.controlschange events - Added automatic High DPI support for
webglrenderer - Updated
two.interpret(svg)to handle compound paths - Added
Two.Anchorwhich represents all anchor points drawn in two.js - Modified source to not have any instances of
windowfor node use - Updated to underscore.js 1.5.1
- Added
Two.Utils.getReflectionmethod to properly get reflection's in svg interpretation - Made
Two.Vectorinherently not broadcast events and now needs to be explicity bound to in order to broadcast events, which two.js does internally for you - Created
Two.Utils.Collectionan observable array-like class thatpolygon.verticesinherit @fchasen - Added
Two.Events.insertandTwo.Events.removefor use withTwo.Utils.Collection - Properly recurses
getBoundingClientRectfor bothTwo.GroupandTwo.Polygon - Added
Two.Versionto clarify forthcoming builds - Fixed hierarchy ordering of
group.childrenincanvasandwebglrenderers - Fixed shallow and bidirectional
removemethod forTwo.GroupandTwo.Polygon - Added
cornermethod toTwo.GroupandTwo.Polygonallowing anchoring along the upper lefthand corner of the form - Modified
centermethod ofTwo.GroupandTwo.Polygonto not affect thetranslationproperty to stay inline withcornermethod and any future orientation and anchoring logic - Added automatic High DPI support for
canvasrenderer - Added
overdrawboolean tocanvasrenderer - Added AMD loader compatibility @thomasrudin
- Deferred
two.update();to account for canvas and webgl - Added
removeandclearmethods totwoinstance - Fixed svg interpretation for
webglcontext Added matrix property to allTwo.Shape's for advanced transformations- Added
inversemethod toTwo.Matrix - Remove execution path dependency on utils/build.js @masonbiler
- Added
timeDeltaproperty to everytwoinstance - Added gruntfile, package.json for more integration with
npm, and dependency free build (build/two.clean.js) @iros - Crossbrowser compatability with
noStrokeandnoFillcommands
May 3, 2013 v0.2.0
- First alpha release
Jan 29, 2013 v0.1.0-alpha
- Proof of Concept built from Three.js
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent