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.
For the latest nightly changes checkout the dev
branch here.
July 22, 2014 v0.4.0
- Updated
Two.interpret
to handle polybezier path data - Added
Two.Group.mask
andTwo.Polygon.clip
in order to create clipping masks Two.Group
has ownopacity
property Leo Koppelkamm- Rendering optimizations Leo Koppelkamm
Two.noConflict
non-destructive command internally to the libraryTwo.interpret
decomposestransform
attribute of source tagTwo.interpret
handles item irregularities from Inkscape- Changed
Two.Identifier
to use underscores instead of hyphens for dot-notation access Leo Koppelkamm - Added
Two.Group.getById
andTwo.Group.getByClassName
methods for convenient selection Leo Koppelkamm - Added
classList
to allTwo.Shape
s Leo Koppelkamm - Enabled inference of applied styles on imported svgs Leo Koppelkamm
- Added
Two.Polygon.getPointAt
method to get coordinates on a curve/line - Added
Two.Polygon.length
property andTwo.Polygon._updateLength
method to calculate length of curve/line - Updated
Two.Group.prototype
observable properties onTwo.Polygon.Properties
to ensure each property is considered unique Two.Polygon.vertices
first and last vertex create automated control points whenTwo.Polygon.curved = true
- Updated
Two.Polygon.subdivide
method to accomodateTwo.makeEllipse
- Enabled
id
to be properly interpreted from SVG elements @chrisdelbuck - Updated
webgl
renderergetBoundingClientRect
to accommodaterelative
anchors - Updated
beginning
andending
to clamp to each other - Reorganized
Two.Polygon._update
andTwo.Polygon.plot
in order to handlebeginning
andending
properties - Updated
Two.getComputedMatrix
andTwo.Polygon.getBoundingClientRect
to adhere to nested transformations - Updated
Two.Anchor
to changecontrol
points relatively by default throughanchor.relative
property - Updated
Two.Polygon.subdivide
method to accomodatecurved = false
circumstances - Updated
svg
,canvas
, andwebgl
renderers to properly reflect holes in curvedTwo.Polygon
s - Updated
Two.Group
clone
method - Added
toObject
method toTwo.Group
,Two.Polygon
,Two.Anchor
Two.Polygon
initializespolygon.cap = 'butt'
andpolygon.join = 'miter'
based on Adobe Illustrator defaultsTwo.Polygon.subdivide
method now works withTwo.Commands.move
for noncontiguous polygons- Internally update matrices on
getBoundingClientRect
in 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
_update
andflagReset
methods toTwo.Shape
,Two.Group
, andTwo.Polygon
- Decoupled
canvas
andwebgl
renderers and are now independent - Added
_matrix.manual
to override the default behavior of aTwo.Polygon
transformation - Localized variables per file as much as possible to reduce Garbage Collection on runtime
October 25, 2013 v0.3.0
- Can properly pass
domElement
on construction of new instance of two - Added
overdraw
boolean towebgl
renderer @arodic - Added support for ie9 svg interpretation @tomconroy
- Added
subdivide
method forTwo.Polygon
andTwo.Group
- Ensure sure that
manual
properly is set on construction ofTwo.Polygon
that it bindsTwo.Anchor.controls
change events - Added automatic High DPI support for
webgl
renderer - Updated
two.interpret(svg)
to handle compound paths - Added
Two.Anchor
which represents all anchor points drawn in two.js - Modified source to not have any instances of
window
for node use - Updated to underscore.js 1.5.1
- Added
Two.Utils.getReflection
method to properly get reflection's in svg interpretation - Made
Two.Vector
inherently 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.Collection
an observable array-like class thatpolygon.vertices
inherit @fchasen - Added
Two.Events.insert
andTwo.Events.remove
for use withTwo.Utils.Collection
- Properly recurses
getBoundingClientRect
for bothTwo.Group
andTwo.Polygon
- Added
Two.Version
to clarify forthcoming builds - Updated hierarchy ordering of
group.children
incanvas
andwebgl
renderers - Updated shallow and bidirectional
remove
method forTwo.Group
andTwo.Polygon
- Added
corner
method toTwo.Group
andTwo.Polygon
allowing anchoring along the upper lefthand corner of the form - Modified
center
method ofTwo.Group
andTwo.Polygon
to not affect thetranslation
property to stay inline withcorner
method and any future orientation and anchoring logic - Added automatic High DPI support for
canvas
renderer - Added
overdraw
boolean tocanvas
renderer - Added AMD loader compatibility @thomasrudin
- Deferred
two.update();
to account for canvas and webgl - Added
remove
andclear
methods totwo
instance - Updated svg interpretation for
webgl
context Added matrix property to allTwo.Shape
's for advanced transformations- Added
inverse
method toTwo.Matrix
- Remove execution path dependency on utils/build.js @masonbiler
- Added
timeDelta
property to everytwo
instance - Added gruntfile, package.json for more integration with
npm
, and dependency free build (build/two.clean.js
) @iros - Crossbrowser compatibility with
noStroke
andnoFill
commands
May 3, 2013 v0.2.0
- First alpha release
Jan 29, 2013 v0.1.0-alpha
- Proof of Concept built from Three.js