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 grunt:
cd two.js
npm install grunt
You can edit the files that we be included in the build by modifying ./Gruntfile.js. 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:
grunt
If you are having problems running the closure compiler (it requires a JDK to be installed), run
grunt build-uglify
instead to minify the build with uglify.
Two.interprethandles item irregularities from Inkscape- Changed
Two.Identifierto use underscores instead of hyphens for dot-notation access @DieBuche - Added
Two.Group.getByIdandTwo.Group.getByClassNamemethods for convenient selection @DieBuche - Added
classListto allTwo.Shapes @DieBuche - Enabled inference of applied styles on imported svgs @DieBuche
- Added
Two.Polygon.getPointAtmethod to get coordinates on a curve/line - Added
Two.Polygon.lengthproperty andTwo.Polygon._updateLengthmethod to calculate length of curve/line - Updated
Two.Group.prototypeobservable properties onTwo.Polygon.Propertiesto ensure each property is considered unique Two.Polygon.verticesfirst and last vertex create automated control points whenTwo.Polygon.curved = true- Updated
Two.Polygon.subdividemethod to accomodateTwo.makeEllipse - Enabled
idto be properly interpreted from SVG elements @chrisdelbuck - Updated
webglrenderergetBoundingClientRectto accommodaterelativeanchors - Updated
beginningandendingto clamp to each other - Reorganized
Two.Polygon._updateandTwo.Polygon.plotin order to handlebeginningandendingproperties - Updated
Two.getComputedMatrixandTwo.Polygon.getBoundingClientRectto adhere to nested transformations - Updated
Two.Anchorto changecontrolpoints relatively by default throughanchor.relativeproperty - Updated
Two.Polygon.subdividemethod to accomodatecurved = falsecircumstances - Updated
svg,canvas, andwebglrenderers to properly reflect holes in curvedTwo.Polygons - Updated
Two.Groupclonemethod - Added
toObjectmethod toTwo.Group,Two.Polygon,Two.Anchor Two.Polygoninitializespolygon.cap = 'butt'andpolygon.join = 'miter'based on Adobe Illustrator defaultsTwo.Polygon.subdividemethod now works withTwo.Commands.movefor noncontiguous polygons- Internally update matrices on
getBoundingClientRectin order to remove the need to defer or wait for internal variables to be up-to-date - Refactor of renderers and scenegraph for performance optimization and lower memory footprint
- Relinquished internal events for flags
- Prototypical declaration of
Object.defineProperty - Added
_updateandflagResetmethods toTwo.Shape,Two.Group, andTwo.Polygon - Decoupled
canvasandwebglrenderers and are now independent - Added
_matrix.manualto override the default behavior of aTwo.Polygontransformation - Localized variables per file as much as possible to reduce Garbage Collection on runtime
October 25, 2013 v0.3.0
- 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 - Updated hierarchy ordering of
group.childrenincanvasandwebglrenderers - Updated 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 - Updated 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 compatibility 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