Extends: [<%= root.augments %>](<%= root.augmentsHref %>)
<% } %>
<%= root.description %>
<% if (root.meta) { %>
<% } %>
## <%= item.shortname %>
<% }); %>
================================================
FILE: utils/document.js
================================================
var _ = require('underscore');
var fs = require('fs');
var path = require('path');
var compiler = require('jsdoc-api');
var sourceFiles = require('./source-files');
var pkg = JSON.parse(
fs.readFileSync(path.resolve(__dirname, '../package.json'))
);
var directory = [];
var template = _.template(
fs.readFileSync(path.resolve(__dirname, './docs.template'), {
encoding: 'utf8',
})
);
pkg.template = function (str) {
if (typeof str === 'string') {
var regex = /\$\w*/g;
var match = str.match(regex);
if (match && match.length > 0) {
var prop = match[0].replace('$', '');
str = str.replace(regex, pkg[prop]);
}
}
return str;
};
preprocess();
function preprocess() {
_.each(sourceFiles, function (file) {
var sourceFile = path.resolve(__dirname, '../', file);
var pivotDir = [
'/docs/',
file.replace('jsm/', '').replace('src/', '').replace('.js', '/'),
].join('');
var citations = compiler.explainSync({
files: sourceFile,
cache: false,
});
var root = getRoot(citations);
directory.push({ name: root.longname, dir: pivotDir });
});
process();
}
function process() {
_.each(sourceFiles, function (file) {
var sourceFile = path.resolve(__dirname, '../', file);
var pivotDir = [
'/docs/',
file.replace('jsm/', '').replace('src/', '').replace('.js', '/'),
].join('');
var outputDir = path.resolve(__dirname, '../wiki' + pivotDir);
var outputFile = path.join(outputDir, '/README.md');
var citations = compiler.explainSync({
files: sourceFile,
cache: false,
});
citations.slice(0).forEach(function (object) {
var a = object.undocumented;
var b = /package:undefined/i.test(object.longname);
var c = /Two\.Utils\.Events\.(bind|unbind)/i.test(object.memberof);
var d = /(private|protected)/i.test(object.access);
if (a || b || c || d) {
// Remove private / hidden / incomplete documented citations
citations.splice(citations.indexOf(object), 1);
} else {
expandLink(object, 'description');
_.each(object.params, expandParam, object);
_.each(object.returns, expandParam, object);
_.each(object.properties, expandParam, object);
_.each(object.tags, expandTag, object);
object.see = _.map(object.see, expandSee, object);
var sn;
sn = object.longname.replace(/#/gi, '.');
var snList = sn.split('.');
var snIndex = snList.length > 2 ? 2 : 1;
object.shortname = snList.slice(snIndex).join('.');
object.prefixname = sn.replace(object.shortname, '');
// name and href for augments property
var an;
if (Array.isArray(object.augments) && object.augments.length > 0) {
an = object.augments[object.augments.length - 1].split('.');
} else if (typeof object.augments === 'string') {
an = object.augments.split('.');
}
if (an) {
object.augmentsHref = getHref(an.slice(1).join('.'));
}
}
});
var citationsByScope = {
instance: [],
static: [],
};
_.each(citations, function (citation) {
if (/#/i.test(citation.longname)) {
citationsByScope.instance.push(citation);
} else {
citationsByScope.static.push(citation);
}
});
// citationsByScope.instance.sort(sortByFunctionThenAlphabetical);
// citationsByScope.static.sort(sortByFunctionThenAlphabetical);
citations = citationsByScope.static.concat(citationsByScope.instance);
// console.log(
// citations.map(function(a) {
// return a.scope + '-' + a.longname;
// })
// );
// Ensure outputDir is inside the project root
var projectRoot = path.resolve(__dirname, '../');
var relative = path.relative(projectRoot, outputDir);
if (relative && !relative.startsWith('..') && !path.isAbsolute(relative)) {
fs.mkdirSync(outputDir, { recursive: true });
} else {
throw new Error(
'Refusing to create output directory outside project root: ' + outputDir
);
}
fs.writeFileSync(
outputFile.replace('README.md', 'docs.json'),
JSON.stringify(citations)
);
fs.writeFileSync(
outputFile,
template({
root: getRoot(citations, true),
citations: citations,
package: pkg,
})
);
console.log('Generated', outputFile);
});
}
function getHref(name) {
name = name.toLowerCase();
for (var i = 0; i < sourceFiles.length; i++) {
var sf = sourceFiles[i];
if (sf.includes(name)) {
return transform(sf);
}
}
return null;
function transform(str) {
var path = str.replace('src/', '').replace('jsm/', '').replace('.js', '');
return `/docs/${path}/`;
}
}
function getRoot(citations, shouldSplice) {
var list = citations.slice(0);
for (var i = 0; i < list.length; i++) {
var citation = list[i];
if (/class/i.test(citation.kind)) {
var index = _.indexOf(citations, citation);
if (shouldSplice) {
citations.splice(index, 1);
}
return citation;
}
}
return null;
}
function expandSee(see) {
return expandLink({ text: see }, 'text').text;
}
function expandTag(tag) {
switch (tag.title) {
case 'overloaded':
this.overloaded = true;
delete tag.title;
delete tag.originalTitle;
delete tag.text;
break;
default:
expandLink(tag, 'text');
}
}
function expandParam(param) {
expandLink(param, 'description');
}
function expandLink(object, property) {
var value = object[property];
var shouldRecurse = false;
if (value) {
var regex = /\{@link ([\w\d:/?\-.#]*)\}/i;
var link = value.match(regex);
if (link && link.length > 1) {
var name = link[1];
if (/http/i.test(name)) {
object[property] = value.replace(regex, '[$1]($1)');
shouldRecurse = true;
} else {
var fragments = name.split(/[.#]/i);
var longname = name.replace(/#/i, '.');
var dir = getDirectoryMatch(longname);
var hash = fragments.length > 2 ? fragments.slice(2).join('-') : '';
if (dir === null && fragments.length === 2) {
dir = '/docs/two/';
hash = fragments[1];
}
var href = [
'[',
fragments.join('.'),
']',
'(',
dir,
hash ? '#' + hash.toLowerCase() : '',
')',
].join('');
object[property] = value.replace(regex, href);
shouldRecurse = true;
}
}
}
if (shouldRecurse) {
expandLink(object, property);
}
return object;
}
function getDirectoryMatch(str) {
var index = -1;
for (var i = 0; i < directory.length; i++) {
var { name } = directory[i];
if (str.includes(name)) {
index = i;
}
}
if (index < 0) {
return null;
}
return directory[index].dir;
}
================================================
FILE: utils/file-sizes.json
================================================
{"development":"94KB","production":"50KB"}
================================================
FILE: utils/source-files.js
================================================
var sourceFiles = [
'src/two.js',
'src/registry.js',
'src/collection.js',
'src/children.js',
'src/events.js',
'src/vector.js',
'src/anchor.js',
'src/matrix.js',
'src/renderers/svg.js',
'src/renderers/canvas.js',
'src/renderers/webgl.js',
'src/element.js',
'src/shape.js',
'src/path.js',
'src/shapes/line.js',
'src/shapes/rectangle.js',
'src/shapes/ellipse.js',
'src/shapes/circle.js',
'src/shapes/points.js',
'src/shapes/polygon.js',
'src/shapes/star.js',
'src/shapes/rounded-rectangle.js',
'src/text.js',
'src/effects/stop.js',
'src/effects/gradient.js',
'src/effects/linear-gradient.js',
'src/effects/radial-gradient.js',
'src/effects/texture.js',
'src/effects/sprite.js',
'src/effects/image.js',
'src/group.js',
'extras/jsm/arc.js',
'extras/jsm/zui.js',
'src/shapes/arc-segment.js',
'src/effects/image-sequence.js',
];
if (typeof module != 'undefined' && module.exports) {
module.exports = sourceFiles;
} else if (typeof define === 'function' && define.amd) {
define('source-files', [], function () {
return sourceFiles;
});
}
================================================
FILE: wiki/.vuepress/components/carbon-ads.vue
================================================
================================================
FILE: wiki/.vuepress/components/custom-button.vue
================================================
{{ text }}
{{ size }}
================================================
FILE: wiki/.vuepress/components/example-card.vue
================================================
<%= item.prefixname %><%= item.shortname %>
<% if (item.overloaded) { %>
_Overloaded_
<% } %>
<% if (item.returns && item.returns.length == 1) { %>
__Returns__: <% _.each(item.returns, function(result) { %><% if (result.type) { %><% _.each(result.type.names, function(name) { %><%= name.replace(/([<>])/ig, '\\$1') %><% }); %>
<% } %>
<% if (result.description) { %>
<%= result.description %>
<% } %>
<% }); %>
<% } %>
<% if (item.returns && item.returns.length > 1) { %>
__Returns__:
<% _.each(item.returns, function(result) { %>
<% if (result.type) { %>
<% _.each(result.type.names, function(name) { %>
+ `<%= name.replace(/([<>])/ig, '\\$1') %>`
<% }); %>
<% } %>
<% if (result.description) { %>
<%= result.description %>
<% } %>
<% }); %>
<% } %>
<% if (item.fires && item.fires.length > 0) { %>
__Triggers__:
<% _.each(item.fires, function(name) { %>
+ `<%= name %>`
<% }); %>
<% } %>
<% if (item.properties && item.properties.length > 0) { %>
<% _.each(item.properties, function(property, i) { %>
<% if (i > 0) { %>
__<%= property.name %>__: <%= package.template(property.description) %>
<% } else { %>
<%= package.template(property.description) %>
<% } %>
<% }); %>
<% } %>
<% if (item.params && item.params.length > 0 ) { %>
<% _.each(item.params, function(param, i) { %><% if (i <= 0) { %>
| Argument | Description |
| ---- | ----------- |
| <% if (param.name) { %> <%= param.name %> <% } %> | <%= param.description %> |<% } else { %>
| <% if (param.name) { %> <%= param.name %> <% } %> | <%= param.description %> |<% } %><% }); %>
<% } %>
<% if (item.description) { %>
<%= item.description %>
<% } %>
<% if (item.see && item.see.length > 0) { %>
See: <%= _.map(item.see, function(see) { return see; }).join(', ') %>
<% } %>
<% if (item.meta) { %>
<% } %>
<% if (item.tags && item.tags.length > 0) { %>
<% } %>
{{ title }}
{{ title }}
404
{{ getMsg() }}
Download
Overview
* #### Focus on Vector Shapes Two.js is deeply inspired by flat [motion graphics](http://en.wikipedia.org/wiki/Motion_graphics). As a result, two.js aims to make the creation and animation of flat shapes easier and more concise. * #### Scenegraph At its core two.js relies on a [scenegraph](http://en.wikipedia.org/wiki/Scene_graph). This means that when you draw or create an object (a Two.Path or Two.Group), two actually stores and remembers that. After you make the object you can apply any number of operations to it — e.g: rotation, position, scale, etc.. * #### Animation Loop Two.js has a built in animation loop. It is simple in nature and can be automated or paired with another animation library. For more information check out the [examples](/examples/). * #### SVG Interpreter Two.js features a [Scalable Vector Graphics](http://en.wikipedia.org/wiki/Scalable_Vector_Graphics) Interpreter. This means developers and designers alike can create SVG elements in commercial applications like [Adobe Illustrator](http://www.adobe.com/products/illustrator) and bring them into your two.js scene. For more information check out the [examples](/examples/). * #### Friends with Bitmap Imagery Despite its early focus on easing vector shape creation and animation, Two.js offers many easy-to-use features to handle and render bitmap images. Easily load single images, sprite sheets, and image sequences with just a few method calls. ## Basic UsageBasic Usage
In order to start any of these demos you'll want to [download](#download) two.js and add it to your HTML document. Once downloaded add this tag to the `` of your document: ``. When you visit the page, you should be able to open up the console and type `Two`. If this returns a function (and not an error) then you're ready to begin! ## Drawing Your First ShapesDrawing Your First Shapes
Before we get into all the fancy animating it's good to get a feel for how to make shapes in two.js. In order to do this we need to have an instance of two. This sets up a dom element that contains either an svg or canvas element to add to the webpage. The two object has a scene which holds all shapes as well as methods for creating shapes. ::: tip For a list of all properties and construction parameters check out the [documentation](./docs/). :::Shapes and Groups
Adding shapes to groups makes managing multiple shapes easier and more sane. Group's provide an easy way to move your content through `position`, `rotation`, and `scale`. These operations emit from the coordinate space `(0, 0)`. In the example below we can see that the initial orientation of the circle and rectangle changed from the first example. These shapes are oriented around `(0, 0)`, which allows us to transform the group around the centeroid of the shapes. In addition Group's styling operations trickle down and apply to each shape.Adding Motion
Finally, let's add some motion to our shapes. So far the examples use `two.update();` to draw content to the screen. The instance of two.js has two particular methods for animation. The first is `two.play();` which calls `two.update();` at 60 frames-per-second. This rate, however, will slowdown if there's too much content to render per frame. The second method is `two.bind();` This method takes a string as its first parameter indicating what event to listen to and a function as its second argument delineating what to do when the event described in the first parameter happens. To sync a function with the animation loop simply invoke `two.bind('update', referenceToFunction);` as outlined below:#### Project Credits Two.js is dependency free, but its creation would not have been possible without these great contributions to the JavaScript ecosystem:
+ [Three.js](http://threejs.org/)
+ [Vuepress](https://vuepress.vuejs.org/)
+ [Underscore.js](https://underscorejs.org/)
+ [Backbone.js](https://backbonejs.org/)
+ [QUnit](https://qunitjs.com/)
+ [Resemble.js](https://github.com/rsmbl/Resemble.js)
+ [Canvas2Blob](https://github.com/blueimp/JavaScript-Canvas-to-Blob)
+ [jsdoc](https://jsdoc.app/)
+ [ESLint](https://eslint.org/)
+ [rollup.js](https://rollupjs.org/)
Two.js is a project by [Jono](http://jono.fyi/) and numerous [contributors](https://github.com/jonobr1/two.js/graphs/contributors) • Site design by [Yuin](https://yuinchien.com/) • Site development in collaboration with [Tonia](https://toniab.com/)
Published under the [MIT License](https://github.com/jonobr1/two.js/blob/dev/LICENSE) © 2012 – {{ 1900 + new Date().getYear() }} [Safety & Security](/security) • [Privacy Policy](/privacy)
================================================
FILE: wiki/change-log/README.md
================================================
Published under the [MIT License](https://github.com/jonobr1/two.js/blob/dev/LICENSE) © 2012 – {{ 1900 + new Date().getYear() }} [Safety & Security](/security) • [Privacy Policy](/privacy)
Dec 22, 2025
Dec 3, 2025
Oct 1, 2025
Sep 8, 2025
Jun 27, 2025
Apr 8, 2025
Mar 17, 2025
Feb 13, 2025
Dec 31, 2024
Jun 10, 2024
Feb 22, 2024
Oct 16, 2023
Aug 7, 2023
Jun 9, 2022
May 9, 2022
Mar 29, 2022
Jan 29, 2022
Jan 21, 2022
Jan 10, 2022
Dec 15, 2021
Nov 24, 2021
Nov 20, 2021
Nov 11, 2021
Jul 13, 2021
Jul 10, 2021
Apr 23, 2021
Apr 2, 2021
Mar 26, 2021
Jan 12, 2021
Jan 22, 2020
Dec 8, 2018
Nov 18, 2018
Nov 3, 2018
Dec 1, 2017
Feb 9, 2016
Oct 1, 2015
Jul 22, 2014
Oct 25, 2013
May 3, 2013
Jan 29, 2013
Extends: [Two.Vector](/docs/vector/)
An object that holds 3 [Two.Vector](/docs/vector/)s, the anchor point and its corresponding handles: `left` and `right`. In order to properly describe the bezier curve about the point there is also a command property to describe what type of drawing should occur when Two.js renders the anchors.
## fromObject
Two.Anchor.fromObject
__Returns__: Two.Anchor
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Anchor](/docs/anchor/) to create a new instance |
Create a new [Two.Anchor](/docs/anchor/) from an object notation of a [Two.Anchor](/docs/anchor/).
## copy
Two.Anchor.copy
| Argument | Description |
| ---- | ----------- |
| v | The anchor to apply values to. |
Copy the properties of one [Two.Anchor](/docs/anchor/) onto another.
## clone
Two.Anchor.clone
__Returns__: Two.Anchor
Create a new [Two.Anchor](/docs/anchor/), set all its values to the current instance and return it for use.
## toObject
Two.Anchor.toObject
__Returns__: Object
- An object with properties filled out to mirror [Two.Anchor](/docs/anchor/).
Create a JSON compatible plain object of the current instance. Intended for use with storing values in a database.
## toString
================================================
FILE: wiki/docs/children/README.md
================================================
---
title: Two.Group.Children
pageClass: docs
lang: en-US
---
# Two.Group.Children
Two.Anchor.toString
__Returns__: String
- A String with comma-separated values reflecting the various values on the current instance.
Create a string form of the current instance. Intended for use with storing values in a database. This is lighter to store than the JSON compatible [Two.Anchor.toObject](/docs/anchor/#toobject).
Extends: [Two.Collection](/docs/collection/)
A children collection which is accesible both by index and by object `id`.
## Children.ids
Two.Group.Children.ids
Map of all elements in the list keyed by `id`s.
## Children.attach
Two.Group.Children.attach
| Argument | Description |
| ---- | ----------- |
| children | The objects which extend [Two.Shape](/docs/shape/) to be added. |
Adds elements to the `ids` map.
## Children.detach
================================================
FILE: wiki/docs/collection/README.md
================================================
---
title: Two.Collection
pageClass: docs
lang: en-US
---
# Two.Collection
Two.Group.Children.detach
| Argument | Description |
| ---- | ----------- |
| children | The objects which extend [Two.Shape](/docs/shape/) to be removed. |
Removes elements to the `ids` map.
Extends: [Two.Events](/docs/events/)
An `Array` like object with additional event propagation on actions. `pop`, `shift`, and `splice` trigger `removed` events. `push`, `unshift`, and `splice` with more than 2 arguments trigger 'inserted'. Finally, `sort` and `reverse` trigger `order` events.
Extends: [Two.Element](/docs/element/)
This is the base class for constructing different types of gradients with Two.js. The two common gradients are [Two.LinearGradient](/docs/effects/linear-gradient/) and [Two.RadialGradient](/docs/effects/radial-gradient/).
## Stop
Two.Gradient.Stop
See: [Two.Stop](/docs/effects/stop/)
## Properties
Two.Gradient.Properties
A list of properties that are on every [Two.Gradient](/docs/effects/gradient/).
## fromObject
Two.Gradient.fromObject
__Returns__: Two.Gradient
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Gradient](/docs/effects/gradient/) to create a new instance |
Create a new [Two.Gradient](/docs/effects/gradient/) from an object notation of a [Two.Gradient](/docs/effects/gradient/).
## spread
Two.Gradient.spread
Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle. Possible values are `'pad'`, `'reflect'`, and `'repeat'`.
See: [https://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementSpreadMethodAttribute](https://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementSpreadMethodAttribute) for more information
## units
Two.Gradient.units
Indicates how coordinate values are interpreted by the renderer. Possible values are `'userSpaceOnUse'` and `'objectBoundingBox'`.
See: [https://www.w3.org/TR/SVG11/pservers.html#RadialGradientElementGradientUnitsAttribute](https://www.w3.org/TR/SVG11/pservers.html#RadialGradientElementGradientUnitsAttribute) for more information
## stops
Two.Gradient.stops
An ordered list of [Two.Stop](/docs/effects/stop/)s for rendering the gradient.
## clone
Two.Gradient.clone
__Returns__: Two.Gradient
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.Gradient](/docs/effects/gradient/) with the same properties of the current path.
## copy
Two.Gradient.copy
| Argument | Description |
| ---- | ----------- |
| gradient | The reference [Two.Gradient](/docs/effects/gradient/) |
Copy the properties of one [Two.Gradient](/docs/effects/gradient/) onto another.
## toObject
Two.Gradient.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
## dispose
================================================
FILE: wiki/docs/effects/image/README.md
================================================
---
title: Two.Image
pageClass: docs
lang: en-US
---
# Two.Image
Two.Gradient.dispose
Detach instance from renderer including any `
Extends: [Two.Rectangle](/docs/shapes/rectangle/)
A convenient package to display images scaled to fit specific dimensions. Unlike [Two.Sprite](/docs/effects/sprite/), this class scales the image to the provided width and height rather than using the image's native dimensions. By default, images are scaled to 'fill' within the bounds while preserving aspect ratio.
## Modes
Two.Image.Modes
Different mode types to render an image inspired by Figma.
__Modes.fill__: Scale image to fill the bounds while preserving aspect ratio.
__Modes.fit__: Scale image to fit within bounds while preserving aspect ratio.
__Modes.crop__: Scale image to fill bounds while preserving aspect ratio, cropping excess.
__Modes.tile__: Repeat image at original size to fill the bounds.
__Modes.stretch__: Stretch image to fill dimensions, ignoring aspect ratio.
## Properties
Two.Image.Properties
A list of properties that are on every [Two.Image](/docs/effects/image/).
## fromObject
Two.Image.fromObject
__Returns__: Two.Image
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Image](/docs/effects/image/) to create a new instance |
Create a new [Two.Image](/docs/effects/image/) from an object notation of a [Two.Image](/docs/effects/image/).
## texture
Two.Image.texture
The texture to be used as bitmap data to display image in the scene.
## copy
Two.Image.copy
| Argument | Description |
| ---- | ----------- |
| image | The reference [Two.Image](/docs/effects/image/) |
Copy the properties of one [Two.Image](/docs/effects/image/) onto another.
## clone
Two.Image.clone
__Returns__: Two.Image
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.Image](/docs/effects/image/) with the same properties of the current image.
## toObject
Two.Image.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the image.
## dispose
================================================
FILE: wiki/docs/effects/image-sequence/README.md
================================================
---
title: Two.ImageSequence
pageClass: docs
lang: en-US
---
# Two.ImageSequence
Two.Image.dispose
__Returns__: Two.Image
Release the image's renderer resources and detach all events.
This method disposes the texture (calling dispose() for thorough cleanup) and inherits comprehensive
cleanup from the Rectangle/Path hierarchy while preserving the renderer type
for potential re-attachment.
Extends: [Two.Rectangle](/docs/shapes/rectangle/)
A convenient package to display still or animated images organized as a series of still images.
## Properties
Two.ImageSequence.Properties
A list of properties that are on every [Two.ImageSequence](/docs/effects/image-sequence/).
## DefaultFrameRate
Two.ImageSequence.DefaultFrameRate
default frame rate that [Two.ImageSequence.frameRate](/docs/effects/image-sequence/#framerate) is set to when instantiated.
## fromObject
Two.ImageSequence.fromObject
__Returns__: Two.ImageSequence
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.ImageSequence](/docs/effects/image-sequence/) to create a new instance |
Create a new [Two.ImageSequence](/docs/effects/image-sequence/) from an object notation of a [Two.ImageSequence](/docs/effects/image-sequence/).
## textures
Two.ImageSequence.textures
A list of textures to be used as frames for animating the [Two.ImageSequence](/docs/effects/image-sequence/).
## frameRate
Two.ImageSequence.frameRate
The number of frames to animate against per second.
## index
Two.ImageSequence.index
The index of the current tile of the sprite to display. Defaults to `0`.
## copy
Two.ImageSequence.copy
| Argument | Description |
| ---- | ----------- |
| imageSequence | The reference [Two.ImageSequence](/docs/effects/image-sequence/) |
Copy the properties of one [Two.ImageSequence](/docs/effects/image-sequence/) onto another.
## play
Two.ImageSequence.play
| Argument | Description |
| ---- | ----------- |
| firstFrame | The index of the frame to start the animation with. |
| lastFrame | The index of the frame to end the animation with. Defaults to the last item in the [Two.ImageSequence.textures](/docs/effects/image-sequence/#textures). |
| onLastFrame | Optional callback function to be triggered after playing the last frame. This fires multiple times when the image sequence is looped. |
Initiate animation playback of a [Two.ImageSequence](/docs/effects/image-sequence/).
## pause
Two.ImageSequence.pause
Halt animation playback of a [Two.ImageSequence](/docs/effects/image-sequence/).
## stop
Two.ImageSequence.stop
Halt animation playback of a [Two.ImageSequence](/docs/effects/image-sequence/) and set the current frame back to the first frame.
## clone
Two.ImageSequence.clone
__Returns__: Two.ImageSequence
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.ImageSequence](/docs/effects/image-sequence/) with the same properties of the current image sequence.
## toObject
Two.ImageSequence.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
## dispose
================================================
FILE: wiki/docs/effects/linear-gradient/README.md
================================================
---
title: Two.LinearGradient
pageClass: docs
lang: en-US
---
# Two.LinearGradient
Two.ImageSequence.dispose
__Returns__: Two.ImageSequence
Release the image sequence's renderer resources and detach all events.
This method stops any running animation, clears animation callbacks, unbinds
textures collection events, and disposes individual textures (calling dispose()
for thorough cleanup) while preserving the renderer type for potential
re-attachment to a new renderer.
Extends: [Two.Gradient](/docs/effects/gradient/)
## Stop
Two.LinearGradient.Stop
See: [Two.Stop](/docs/effects/stop/)
## fromObject
Two.LinearGradient.fromObject
__Returns__: Two.LinearGradient
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.LinearGradient](/docs/effects/linear-gradient/) to create a new instance |
Create a new [Two.LinearGradient](/docs/effects/linear-gradient/) from an object notation of a [Two.LinearGradient](/docs/effects/linear-gradient/).
## left
Two.LinearGradient.left
The x and y value for where the first end point is placed on the canvas.
## right
Two.LinearGradient.right
The x and y value for where the second end point is placed on the canvas.
## copy
Two.LinearGradient.copy
| Argument | Description |
| ---- | ----------- |
| gradient | The reference [Two.LinearGradient](/docs/effects/linear-gradient/) |
Copy the properties of one [Two.LinearGradient](/docs/effects/linear-gradient/) onto another.
## clone
Two.LinearGradient.clone
__Returns__: Two.Gradient
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.LinearGradient](/docs/effects/linear-gradient/) with the same properties of the current path.
## toObject
================================================
FILE: wiki/docs/effects/radial-gradient/README.md
================================================
---
title: Two.RadialGradient
pageClass: docs
lang: en-US
---
# Two.RadialGradient
Two.LinearGradient.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
Extends: [Two.Gradient](/docs/effects/gradient/)
## Stop
Two.RadialGradient.Stop
See: [Two.Stop](/docs/effects/stop/)
## Properties
Two.RadialGradient.Properties
A list of properties that are on every [Two.RadialGradient](/docs/effects/radial-gradient/).
## fromObject
Two.RadialGradient.fromObject
__Returns__: Two.RadialGradient
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.RadialGradient](/docs/effects/radial-gradient/) to create a new instance |
Create a new [Two.RadialGradient](/docs/effects/radial-gradient/) from an object notation of a [Two.RadialGradient](/docs/effects/radial-gradient/).
## center
Two.RadialGradient.center
The x and y value for where the origin of the radial gradient is.
## focal
Two.RadialGradient.focal
The x and y value for where the focal point of the radial gradient is.
## copy
Two.RadialGradient.copy
| Argument | Description |
| ---- | ----------- |
| gradient | The reference [Two.RadialGradient](/docs/effects/radial-gradient/) |
Copy the properties of one [Two.RadialGradient](/docs/effects/radial-gradient/) onto another.
## clone
Two.RadialGradient.clone
__Returns__: Two.RadialGradient
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.RadialGradient](/docs/effects/radial-gradient/) with the same properties of the current path.
## toObject
================================================
FILE: wiki/docs/effects/sprite/README.md
================================================
---
title: Two.Sprite
pageClass: docs
lang: en-US
---
# Two.Sprite
Two.RadialGradient.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
Extends: [Two.Rectangle](/docs/shapes/rectangle/)
A convenient package to display still or animated images through a tiled image source. For more information on the principals of animated imagery through tiling see [Texture Atlas](https://en.wikipedia.org/wiki/Texture_atlas) on Wikipedia.
## Properties
Two.Sprite.Properties
A list of properties that are on every [Two.Sprite](/docs/effects/sprite/).
## fromObject
Two.Sprite.fromObject
__Returns__: Two.Sprite
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Sprite](/docs/effects/sprite/) to create a new instance |
Create a new [Two.Sprite](/docs/effects/sprite/) from an object notation of a [Two.Sprite](/docs/effects/sprite/).
## texture
Two.Sprite.texture
The texture to be used as bitmap data to display image in the scene.
## columns
Two.Sprite.columns
The number of columns to split the texture into. Defaults to `1`.
## rows
Two.Sprite.rows
The number of rows to split the texture into. Defaults to `1`.
## frameRate
Two.Sprite.frameRate
The number of frames to animate against per second. Defaults to `0` for non-animated sprites.
## index
Two.Sprite.index
The index of the current tile of the sprite to display. Defaults to `0`.
## copy
Two.Sprite.copy
| Argument | Description |
| ---- | ----------- |
| sprite | The reference [Two.Sprite](/docs/effects/sprite/) |
Copy the properties of one [Two.Sprite](/docs/effects/sprite/) onto another.
## play
Two.Sprite.play
| Argument | Description |
| ---- | ----------- |
| firstFrame | The index of the frame to start the animation with. |
| lastFrame | The index of the frame to end the animation with. Defaults to the last item in the [Two.Sprite.textures](/docs/effects/sprite/#textures). |
| onLastFrame | Optional callback function to be triggered after playing the last frame. This fires multiple times when the sprite is looped. |
Initiate animation playback of a [Two.Sprite](/docs/effects/sprite/).
## pause
Two.Sprite.pause
Halt animation playback of a [Two.Sprite](/docs/effects/sprite/).
## stop
Two.Sprite.stop
Halt animation playback of a [Two.Sprite](/docs/effects/sprite/) and set the current frame back to the first frame.
## clone
Two.Sprite.clone
__Returns__: Two.Sprite
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.Sprite](/docs/effects/sprite/) with the same properties of the current sprite.
## toObject
Two.Sprite.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
## dispose
================================================
FILE: wiki/docs/effects/stop/README.md
================================================
---
title: Two.Stop
pageClass: docs
lang: en-US
---
# Two.Stop
Two.Sprite.dispose
__Returns__: Two.Sprite
Release the sprite's renderer resources and detach all events.
This method stops any running animation, clears animation callbacks, disposes
the texture (calling dispose() for thorough cleanup), and inherits comprehensive
cleanup from the Rectangle/Path hierarchy while preserving the renderer type
for potential re-attachment.
Extends: [Two.Element](/docs/element/)
## Index
Two.Stop.Index
The current index being referenced for calculating a stop's default offset value.
## Properties
Two.Stop.Properties
A list of properties that are on every [Two.Stop](/docs/effects/stop/).
## fromObject
Two.Stop.fromObject
__Returns__: Two.Stop
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Stop](/docs/effects/stop/) to create a new instance |
Create a new [Two.Stop](/docs/effects/stop/) from an object notation of a [Two.Stop](/docs/effects/stop/).
## offset
Two.Stop.offset
The offset percentage of the stop represented as a zero-to-one value.
## opacity
Two.Stop.opacity
The alpha percentage of the stop represented as a zero-to-one value.
## color
Two.Stop.color
The color of the stop.
## copy
Two.Stop.copy
| Argument | Description |
| ---- | ----------- |
| stop | The reference [Two.Stop](/docs/effects/stop/) |
Copy the properties of one [Two.Stop](/docs/effects/stop/) onto another.
## clone
Two.Stop.clone
__Returns__: Two.Stop
| Argument | Description |
| ---- | ----------- |
| parent | The parent gradient to add the clone to. |
Create a new instance of [Two.Stop](/docs/effects/stop/) with the same properties of the current path.
## toObject
================================================
FILE: wiki/docs/effects/texture/README.md
================================================
---
title: Two.Texture
pageClass: docs
lang: en-US
---
# Two.Texture
Two.Stop.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
Extends: [Two.Element](/docs/element/)
Fundamental to work with bitmap data, a.k.a. pregenerated imagery, in Two.js. Supported formats include jpg, png, gif, and tiff. See [Two.Texture.RegularExpressions](/docs/effects/texture/#regularexpressions) for a full list of supported formats.
## Properties
Two.Texture.Properties
A list of properties that are on every [Two.Texture](/docs/effects/texture/).
## fromObject
Two.Texture.fromObject
__Returns__: Two.Texture
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Texture](/docs/effects/texture/) to create a new instance |
Create a new [Two.Texture](/docs/effects/texture/) from an object notation of a [Two.Texture](/docs/effects/texture/).
## RegularExpressions
Two.Texture.RegularExpressions
A map of compatible DOM Elements categorized by media format.
## ImageRegistry
Two.Texture.ImageRegistry
A canonical listing of image data used in a single session of Two.js.
## getAbsoluteURL
Two.Texture.getAbsoluteURL
__Returns__: String
- The serialized absolute path.
Serializes a URL as an absolute path for canonical attribution in [Two.Texture.ImageRegistry](/docs/effects/texture/#imageregistry).
| Argument | Description |
| ---- | ----------- |
| path | |
## loadHeadlessBuffer
Two.Texture.loadHeadlessBuffer
Loads an image as a buffer in headless environments.
| Argument | Description |
| ---- | ----------- |
| texture | The [Two.Texture](/docs/effects/texture/) to be loaded. |
| onLoad | The callback function to be triggered once the image is loaded. |
::: tip nota-bene
- This function uses node's `fs.readFileSync` to spoof the `![]()
` loading process in the browser.
:::
## getTag
Two.Texture.getTag
__Returns__: String
- Returns the tag name of an image, video, or canvas node.
Retrieves the tag name of an image, video, or canvas node.
| Argument | Description |
| ---- | ----------- |
| image | The image to infer the tag name from. |
## getImage
Two.Texture.getImage
__Returns__: HTMLImageElement
- Returns either a cached version of the image or a new one that is registered in [Two.Texture.ImageRegistry](/docs/effects/texture/#imageregistry).
Convenience function to set [Two.Texture.image](/docs/effects/texture/#image) properties with canonical versions set in [Two.Texture.ImageRegistry](/docs/effects/texture/#imageregistry).
| Argument | Description |
| ---- | ----------- |
| src | The URL path of the image. |
## Register
Two.Texture.Register
A collection of functions to register different types of textures. Used internally by a [Two.Texture](/docs/effects/texture/).
## load
Two.Texture.load
| Argument | Description |
| ---- | ----------- |
| texture | The texture to load. |
| callback | The function to be called once the texture is loaded. |
## FlagOffset
Two.Texture.FlagOffset
Cached method to let renderers know `offset` has been updated on a [Two.Texture](/docs/effects/texture/).
## FlagScale
Two.Texture.FlagScale
Cached method to let renderers know `scale` has been updated on a [Two.Texture](/docs/effects/texture/).
## loaded
Two.Texture.loaded
Shorthand value to determine if image has been loaded into the texture.
## repeat
Two.Texture.repeat
CSS style declaration to tile [Two.Path](/docs/path/). Valid values include: `'no-repeat'`, `'repeat'`, `'repeat-x'`, `'repeat-y'`.
See: [https://www.w3.org/TR/2dcontext/#dom-context-2d-createpattern](https://www.w3.org/TR/2dcontext/#dom-context-2d-createpattern)
## offset
Two.Texture.offset
A two-component vector describing any pixel offset of the texture when applied to a [Two.Path](/docs/path/).
## src
Two.Texture.src
The URL path to the image data.
## image
Two.Texture.image
The corresponding DOM Element of the texture. Can be a `![]()
`, ``, or `` element. See [Two.Texture.RegularExpressions](/docs/effects/texture/#regularexpressions) for a full list of supported elements.
## clone
Two.Texture.clone
__Returns__: Two.Texture
Create a new instance of [Two.Texture](/docs/effects/texture/) with the same properties of the current texture.
## copy
Two.Texture.copy
| Argument | Description |
| ---- | ----------- |
| texture | The reference [Two.Texture](/docs/effects/texture/) |
Copy the properties of one [Two.Texture](/docs/effects/texture/) onto another.
## toObject
Two.Texture.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the texture.
## dispose
================================================
FILE: wiki/docs/element/README.md
================================================
---
title: Two.Element
pageClass: docs
lang: en-US
---
# Two.Element
Two.Texture.dispose
Detach instance from renderer including any `
Extends: [Two.Events](/docs/events/)
The foundational object for the Two.js scenegraph.
## fromObject
Two.Element.fromObject
__Returns__: Two.Element
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Element](/docs/element/) to create a new instance |
Create a new [Two.Element](/docs/element/) from an object notation of a [Two.Element](/docs/element/).
## renderer
Two.Element.renderer
Object access to store relevant renderer specific variables. Warning: manipulating this object can create unintended consequences.
## id
Two.Element.id
Session specific unique identifier.
## className
Two.Element.className
A class to be applied to the element to be compatible with CSS styling.
## classList
Two.Element.classList
A list of class strings stored if imported / interpreted from an SVG element.
## flagReset
Two.Element.flagReset
Called internally by Two.js's renderer to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
## dispose
================================================
FILE: wiki/docs/events/README.md
================================================
---
title: Two.Events
pageClass: docs
lang: en-US
---
# Two.Events
Object inherited by many Two.js objects in order to facilitate custom events.
Two.Element.dispose
Release the element's renderer object and detach any events.
This cleans up renderer-specific resources and unbinds all event listeners.
## Types
Two.Events.Types
Object of different types of Two.js specific events.
## addEventListener
Two.Events.addEventListener
| Argument | Description |
| ---- | ----------- |
| name | The name of the event to bind a function to. |
| handler | The function to be invoked when the event is dispatched. |
Call to add a listener to a specific event name.
## on
Two.Events.on
Alias for [Two.Events.addEventListener](/docs/events/#addeventlistener).
## bind
Two.Events.bind
Alias for [Two.Events.addEventListener](/docs/events/#addeventlistener).
## removeEventListener
Two.Events.removeEventListener
| Argument | Description |
| ---- | ----------- |
| name | The name of the event intended to be removed. |
| handler | The handler intended to be removed. |
Call to remove listeners from a specific event. If only `name` is passed then all the handlers attached to that `name` will be removed. If no arguments are passed then all handlers for every event on the obejct are removed.
## off
Two.Events.off
Alias for [Two.Events.removeEventListener](/docs/events/#removeeventlistener).
## unbind
Two.Events.unbind
Alias for [Two.Events.removeEventListener](/docs/events/#removeeventlistener).
## dispatchEvent
================================================
FILE: wiki/docs/extras/arc/README.md
================================================
---
title: Two.Arc
pageClass: docs
lang: en-US
---
# Two.Arc
Two.Events.dispatchEvent
| Argument | Description |
| ---- | ----------- |
| name | The name of the event to dispatch. |
| args | Anything can be passed after the name and those will be passed on to handlers attached to the event in the order they are passed. |
Call to trigger a custom event. Any additional arguments passed after the name will be passed along to the attached handlers.
Extends: [Two.Path](/docs/path/)
## Properties
Two.Arc.Properties
A list of properties that are on every [Two.Arc](/docs/extras/arc/).
## width
Two.Arc.width
The horizontal size of the arc.
## height
Two.Arc.height
The vertical size of the arc.
## startAngle
Two.ArcSegment.startAngle
The angle of one side for the arc segment.
## endAngle
Two.ArcSegment.endAngle
The angle of the other side for the arc segment.
## clone
================================================
FILE: wiki/docs/extras/zui/README.md
================================================
---
title: Two.ZUI
pageClass: docs
lang: en-US
---
# Two.ZUI
[Two.ZUI](/docs/two/#zui) is an extra class to turn your Two.js scene into a Google Maps or Adobe Illustrator style interface. See [https://codepen.io/jonobr1/pen/PobMKwb](https://codepen.io/jonobr1/pen/PobMKwb) for example usage.
Two.Arc.clone
__Returns__: Two.ArcSegment
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.ArcSegment](/docs/shapes/arc-segment/) with the same properties of the current path.
## addLimits
Two.ZUI.addLimits
| Argument | Description |
| ---- | ----------- |
| min | The minimum scale the ZUI can zoom out to. |
| max | The maximum scale the ZUI can zoom in to. |
## clientToSurface
Two.ZUI.clientToSurface
_Overloaded_
__Returns__: Object
- An object with x, y, and z components
| Argument | Description |
| ---- | ----------- |
| a | |
Convert an x, y coordinate in the user’s space to the object's projected space. Optionally pass a z property on the object to apply depth.
## clientToSurface
Two.ZUI.clientToSurface
_Overloaded_
__Returns__: Object
- An object with x, y, and z components
| Argument | Description |
| ---- | ----------- |
| a | The x component of position to be transformed. |
| b | The y component of position to be transformed. |
| c | The optional z component of position to be transformed. |
Convert an x, y coordinate in the user’s space to the object's projected space. Optionally pass a z property on the object to apply depth.
## surfaceToClient
Two.ZUI.surfaceToClient
_Overloaded_
__Returns__: Object
- An object with x, y, and z components
| Argument | Description |
| ---- | ----------- |
| a | |
Convert an x, y coordinate in projected space to the user’s space. Optionally pass a z property on the object to apply depth.
## surfaceToClient
Two.ZUI.surfaceToClient
_Overloaded_
__Returns__: Object
- An object with x, y, and z components
| Argument | Description |
| ---- | ----------- |
| a | The x component of position to be transformed. |
| b | The y component of position to be transformed. |
| c | The optional z component of position to be transformed. |
Convert an x, y coordinate in projected space to the user’s space. Optionally pass a z property on the object to apply depth.
## zoomBy
Two.ZUI.zoomBy
| Argument | Description |
| ---- | ----------- |
| byF | The factor to scale by. |
| clientX | The x position of the user's input. |
| clientY | The y position of the user's input. |
A function to zoom by an incremental amount and a position. Typically used for pinch-and-zoom or mousewheel effects.
## zoomSet
Two.ZUI.zoomSet
| Argument | Description |
| ---- | ----------- |
| zoom | The level of the zoom. |
| clientX | The x position of the user's input. |
| clientY | The y position of the user's input. |
A function to set the zoom amount and the origin position. This is used internally by {@Two.ZUI#zoomBy}.
## translateSurface
Two.ZUI.translateSurface
| Argument | Description |
| ---- | ----------- |
| x | The x amount to pan. |
| y | The y amount to pan. |
Set the position of the ZUI by an incremental translation amount.
## reset
================================================
FILE: wiki/docs/group/README.md
================================================
---
title: Two.Group
pageClass: docs
lang: en-US
---
# Two.Group
Two.ZUI.reset
Reset the zoom and scale factors to their original instantiated state.
Extends: [Two.Shape](/docs/shape/)
This is the primary class for grouping objects that are then drawn in Two.js. In Illustrator this is a group, in After Effects it would be a Null Object. Whichever the case, the `Two.Group` contains a transformation matrix and commands to style its children, but it by itself doesn't render to the screen.
## InsertChildren
Two.Group.InsertChildren
| Argument | Description |
| ---- | ----------- |
| children | The objects to be inserted. |
Cached method to let renderers know children have been added to a [Two.Group](/docs/group/).
## RemoveChildren
Two.Group.RemoveChildren
| Argument | Description |
| ---- | ----------- |
| children | The objects to be removed. |
Cached method to let renderers know children have been removed from a [Two.Group](/docs/group/).
## OrderChildren
Two.Group.OrderChildren
Cached method to let renderers know order has been updated on a [Two.Group](/docs/group/).
## Properties
Two.Group.Properties
A list of properties that are on every [Two.Group](/docs/group/).
## fill
Two.Group.fill
The value of what all child shapes should be filled in with.
See: [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) for more information on CSS's colors as `String`.
## stroke
Two.Group.stroke
The value of what all child shapes should be outlined in with.
See: [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) for more information on CSS's colors as `String`.
## linewidth
Two.Group.linewidth
The thickness in pixels of the stroke for all child shapes.
## opacity
Two.Group.opacity
The opaqueness of all child shapes.
## visible
Two.Group.visible
Display the path or not.
## cap
Two.Group.cap
See: [https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty](https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty)
## join
Two.Group.join
See: [https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty](https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty)
## miter
Two.Group.miter
See: [https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty](https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty)
## closed
Two.Group.closed
Determines whether a final line is drawn between the final point in the `vertices` array and the first point of all child shapes.
## curved
Two.Group.curved
When the child's path is `automatic = true` this boolean determines whether the lines between the points are curved or not.
## automatic
Two.Group.automatic
Determines whether or not Two.js should calculate curves, lines, and commands automatically for you or to let the developer manipulate them for themselves.
## beginning
Two.Group.beginning
Number between zero and one to state the beginning of where the path is rendered.
[Two.Group.beginning](/docs/group/#beginning) is a percentage value that represents at what percentage into all child shapes should the renderer start drawing.
## ending
Two.Group.ending
Number between zero and one to state the ending of where the path is rendered.
[Two.Group.ending](/docs/group/#ending) is a percentage value that represents at what percentage into all child shapes should the renderer start drawing.
## length
Two.Group.length
The sum of distances between all child lengths.
## mask
Two.Group.mask
The Two.js object to clip from a group's rendering.
## additions
Two.Group.additions
An automatically updated list of children that need to be appended to the renderer's scenegraph.
## subtractions
Two.Group.subtractions
An automatically updated list of children that need to be removed from the renderer's scenegraph.
## copy
Two.Group.copy
__Returns__: Two.Group
| Argument | Description |
| ---- | ----------- |
| group | The reference [Two.Group](/docs/group/) |
Copy the properties of one [Two.Group](/docs/group/) onto another.
## clone
Two.Group.clone
__Returns__: Two.Group
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.Group](/docs/group/) with the same properties of the current group.
## toObject
Two.Group.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the group.
## dispose
Two.Group.dispose
__Returns__: Two.Group
Release the group's renderer resources and detach all events.
This method recursively disposes all child objects, unbinds the children
collection events, and preserves the renderer type for potential re-attachment
to a new renderer.
## getShapesAtPoint
Two.Group.getShapesAtPoint
__Returns__: Array.\
Ordered list of intersecting shapes, front to back.
| Argument | Description |
| ---- | ----------- |
| x | X coordinate in world space. |
| y | Y coordinate in world space. |
| options | Hit test configuration. |
| options.visibleOnly | Limit results to visible shapes. |
| options.includeGroups | Include groups in the hit results. |
| options.mode | Whether to return all intersecting shapes or only the top-most. |
| options.deepest | Alias for `mode: 'deepest'`. |
| options.precision | Segmentation precision for curved geometry. |
| options.tolerance | Pixel tolerance applied to hit testing. |
| options.fill | Override fill testing behaviour. |
| options.stroke | Override stroke testing behaviour. |
| options.filter | Predicate to filter shapes from the result set. |
Traverse the group hierarchy and return shapes that contain the specified point.
## corner
Two.Group.corner
Orient the children of the group to the upper left-hand corner of that group.
## center
Two.Group.center
Orient the children of the group to the center of that group.
## getById
Two.Group.getById
__Returns__: Two.Shape
- Or `null` if nothing is found.
Recursively search for id. Returns the first element found.
## getByClassName
Two.Group.getByClassName
__Returns__: Array.\
- Or empty array if nothing is found.
Recursively search for classes. Returns an array of matching elements.
## getByType
Two.Group.getByType
__Returns__: Array.\
- Empty array if nothing is found.
Recursively search for children of a specific type, e.g. [Two.Path](/docs/path/). Pass a reference to this type as the param. Returns an array of matching elements.
## add
Two.Group.add
| Argument | Description |
| ---- | ----------- |
| objects | An array of objects to be added. Can also be supplied as individual arguments. |
Add objects to the group.
## remove
Two.Group.remove
| Argument | Description |
| ---- | ----------- |
| objects | An array of objects to be removed. Can be also removed as individual arguments. If no arguments are passed, then it removes itself from its parent. |
Remove objects from the group.
## getBoundingClientRect
Two.Group.getBoundingClientRect
__Returns__: Object
- Returns object with top, left, right, bottom, width, height attributes.
| Argument | Description |
| ---- | ----------- |
| shallow | Describes whether to calculate off local matrix or world matrix. |
Return an object with top, left, right, bottom, width, and height parameters of the group.
## noFill
Two.Group.noFill
Apply `noFill` method to all child shapes.
## noStroke
Two.Group.noStroke
Apply `noStroke` method to all child shapes.
## subdivide
Two.Group.subdivide
Apply `subdivide` method to all child shapes.
## strokeAttenuation
================================================
FILE: wiki/docs/matrix/README.md
================================================
---
title: Two.Matrix
pageClass: docs
lang: en-US
---
# Two.Matrix
A class to store 3 x 3 transformation matrix information. In addition to storing data `Two.Matrix` has suped up methods for commonplace mathematical operations.
Two.Group.strokeAttenuation
When set to `true`, stroke width scales with transformations (default behavior). When `false`, stroke width remains constant in screen space for all child shapes.
When `strokeAttenuation` is `false`, this property is applied to all child shapes, making their stroke widths automatically adjust to compensate for the group's world transform scale, maintaining constant visual thickness regardless of zoom level. When `true` (default), stroke widths scale normally with transformations.
## Identity
Two.Matrix.Identity
A stored reference to the default value of a 3 x 3 matrix.
## Multiply
Two.Matrix.Multiply
__Returns__: Array.\
- If an optional `C` matrix isn't passed then a new one is created and returned.
| Argument | Description |
| ---- | ----------- |
| A | The first [Two.Matrix](/docs/matrix/) to multiply |
| B | The second [Two.Matrix](/docs/matrix/) to multiply |
| C | An optional [Two.Matrix](/docs/matrix/) to apply the result to |
Multiply two matrices together and return the result.
## fromObject
Two.Matrix.fromObject
__Returns__: Two.Matrix
| Argument | Description |
| ---- | ----------- |
| obj | The object notation of a Two.Matrix to create a new instance |
Create a new [Two.Matrix](/docs/matrix/) from an object notation of a [Two.Matrix](/docs/matrix/).
## elements
Two.Matrix.elements
The underlying data stored as an array.
## manual
Two.Matrix.manual
Determines whether Two.js automatically calculates the values for the matrix or if the developer intends to manage the matrix.
## set
Two.Matrix.set
| Argument | Description |
| ---- | ----------- |
| a | The value for element at the first column and first row |
| b | The value for element at the second column and first row |
| c | The value for element at the third column and first row |
| d | The value for element at the first column and second row |
| e | The value for element at the second column and second row |
| f | The value for element at the third column and second row |
| g | The value for element at the first column and third row |
| h | The value for element at the second column and third row |
| i | The value for element at the third column and third row |
Set an array of values onto the matrix. Order described in [Two.Matrix](/docs/matrix/).
## set
Two.Matrix.set
| Argument | Description |
| ---- | ----------- |
| a | The array of elements to apply |
Set an array of values onto the matrix. Order described in [Two.Matrix](/docs/matrix/).
## copy
Two.Matrix.copy
| Argument | Description |
| ---- | ----------- |
| m | The matrix to copy |
Copy the matrix of one to the current instance.
## identity
Two.Matrix.identity
Turn matrix to the identity, like resetting.
## multiply
Two.Matrix.multiply
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| s | The scalar to be multiplied. |
Multiply all components of the matrix against a single scalar value.
## multiply
Two.Matrix.multiply
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| x | The `x` component to be multiplied. |
| y | The `y` component to be multiplied. |
| z | The `z` component to be multiplied. |
Multiply all components of a matrix against a 3 component vector.
## multiply
Two.Matrix.multiply
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| a | The value at the first column and first row of the matrix to be multiplied. |
| b | The value at the second column and first row of the matrix to be multiplied. |
| c | The value at the third column and first row of the matrix to be multiplied. |
| d | The value at the first column and second row of the matrix to be multiplied. |
| e | The value at the second column and second row of the matrix to be multiplied. |
| f | The value at the third column and second row of the matrix to be multiplied. |
| g | The value at the first column and third row of the matrix to be multiplied. |
| h | The value at the second column and third row of the matrix to be multiplied. |
| i | The value at the third column and third row of the matrix to be multiplied. |
Multiply all components of a matrix against another matrix.
## inverse
Two.Matrix.inverse
| Argument | Description |
| ---- | ----------- |
| output | The optional matrix to apply the inversion to. |
Return an inverted version of the matrix. If no optional one is passed a new matrix is created and returned.
## scale
Two.Matrix.scale
| Argument | Description |
| ---- | ----------- |
| s | The one dimensional scale to apply to the matrix. |
Uniformly scale the transformation matrix.
## scale
Two.Matrix.scale
| Argument | Description |
| ---- | ----------- |
| sx | The horizontal scale factor. |
| sy | The vertical scale factor |
Scale the transformation matrix in two dimensions.
## rotate
Two.Matrix.rotate
| Argument | Description |
| ---- | ----------- |
| n | The amount to rotate in Number. |
Rotate the matrix.
## translate
Two.Matrix.translate
| Argument | Description |
| ---- | ----------- |
| x | The horizontal translation value to apply |
| y | The vertical translation value to apply |
Translate the matrix to specific `x` / `y` values.
## skewX
Two.Matrix.skewX
| Argument | Description |
| ---- | ----------- |
| n | The amount to skew |
Skew the matrix by an angle in the x axis direction.
## skewY
Two.Matrix.skewY
| Argument | Description |
| ---- | ----------- |
| n | The amount to skew |
Skew the matrix by an angle in the y axis direction.
## toString
Two.Matrix.toString
__Returns__: String
- The transformation matrix as a 6 component string separated by spaces.
| Argument | Description |
| ---- | ----------- |
| fullMatrix | Return the full 9 elements of the matrix or just 6 for 2D transformations. |
Create a transform string. Used for the Two.js rendering APIs.
## toTransformArray
Two.Matrix.toTransformArray
| Argument | Description |
| ---- | ----------- |
| fullMatrix | Return the full 9 elements of the matrix or just 6 in the format for 2D transformations. |
| output | An array empty or otherwise to apply the values to. |
Create a transform array. Used for the Two.js rendering APIs.
## toArray
Two.Matrix.toArray
| Argument | Description |
| ---- | ----------- |
| fullMatrix | Return the full 9 elements of the matrix or just 6 for 2D transformations. |
| output | An array empty or otherwise to apply the values to. |
Create a transform array. Used for the Two.js rendering APIs.
## toObject
Two.Matrix.toObject
Create a JSON compatible object that represents information of the matrix.
## clone
================================================
FILE: wiki/docs/path/README.md
================================================
---
title: Two.Path
pageClass: docs
lang: en-US
---
# Two.Path
Two.Matrix.clone
Clone the current matrix.
Extends: [Two.Shape](/docs/shape/)
This is the primary primitive class for creating all drawable shapes in Two.js. Unless specified methods return their instance of `Two.Path` for the purpose of chaining.
## Properties
Two.Path.Properties
A list of properties that are on every [Two.Path](/docs/path/).
## fromObject
Two.Path.fromObject
__Returns__: Two.Path
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Path](/docs/path/) to create a new instance |
Create a new [Two.Path](/docs/path/) from an object notation of a [Two.Path](/docs/path/).
## closed
Two.Path.closed
Determines whether a final line is drawn between the final point in the `vertices` array and the first point.
## curved
Two.Path.curved
When the path is `automatic = true` this boolean determines whether the lines between the points are curved or not.
## beginning
Two.Path.beginning
Number between zero and one to state the beginning of where the path is rendered.
[Two.Path.beginning](/docs/path/#beginning) is a percentage value that represents at what percentage into the path should the renderer start drawing.
## ending
Two.Path.ending
Number between zero and one to state the ending of where the path is rendered.
[Two.Path.ending](/docs/path/#ending) is a percentage value that represents at what percentage into the path should the renderer start drawing.
## fill
Two.Path.fill
The value of what the path should be filled in with.
See: [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) for more information on CSS's colors as `String`.
## stroke
Two.Path.stroke
The value of what the path should be outlined in with.
See: [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) for more information on CSS's colors as `String`.
## linewidth
Two.Path.linewidth
The thickness in pixels of the stroke.
## opacity
Two.Path.opacity
The opaqueness of the path.
## className
Two.Path.className
A class to be applied to the element to be compatible with CSS styling.
## visible
Two.Path.visible
Display the path or not.
## cap
Two.Path.cap
See: [https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty](https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty)
## join
Two.Path.join
See: [https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty](https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty)
## miter
Two.Path.miter
See: [https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty](https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty)
## vertices
Two.Path.vertices
An ordered list of anchor points for rendering the path.
A list of [Two.Anchor](/docs/anchor/) objects that consist of what form the path takes.
## automatic
Two.Path.automatic
Determines whether or not Two.js should calculate curves, lines, and commands automatically for you or to let the developer manipulate them for themselves.
## dashes
Two.Path.dashes
Array of numbers. Odd indices represent dash length. Even indices represent dash space.
A list of numbers that represent the repeated dash length and dash space applied to the stroke of the text.
See: [https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) for more information on the SVG stroke-dasharray attribute.
## dashes.offset
Two.Path.dashes.offset
A number in pixels to offset [Two.Path.dashes](/docs/path/#dashes) display.
## copy
Two.Path.copy
| Argument | Description |
| ---- | ----------- |
| path | The reference [Two.Path](/docs/path/) |
Copy the properties of one [Two.Path](/docs/path/) onto another.
## clone
Two.Path.clone
__Returns__: Two.Path
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.Path](/docs/path/) with the same properties of the current path.
## toObject
Two.Path.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
## dispose
Two.Path.dispose
__Returns__: Two.Path
Release the path's renderer resources and detach all events.
This method cleans up vertices collection events, individual vertex events,
control point events, and disposes fill/stroke effects (calling dispose()
on Gradients and Textures for thorough cleanup) while preserving the
renderer type for potential re-attachment to a new renderer.
## noFill
Two.Path.noFill
Short hand method to set fill to `none`.
## noStroke
Two.Path.noStroke
Short hand method to set stroke to `none`.
## corner
Two.Path.corner
Orient the vertices of the shape to the upper left-hand corner of the path.
## center
Two.Path.center
Orient the vertices of the shape to the center of the path.
## getBoundingClientRect
Two.Path.getBoundingClientRect
__Returns__: Object
- Returns object with top, left, right, bottom, width, height attributes.
| Argument | Description |
| ---- | ----------- |
| shallow | Describes whether to calculate off local matrix or world matrix. |
Return an object with top, left, right, bottom, width, and height parameters of the path.
## contains
Two.Path.contains
__Returns__: Boolean
| Argument | Description |
| ---- | ----------- |
| x | x coordinate to hit test against |
| y | y coordinate to hit test against |
| options | Optional options object |
| options.ignoreVisibility | If `true`, hit test against `path.visible = false` shapes |
| options.tolerance | Padding to hit test against in pixels |
Check to see if coordinates are within a [Two.Path](/docs/path/)'s bounding rectangle
## getPointAt
Two.Path.getPointAt
__Returns__: Object
| Argument | Description |
| ---- | ----------- |
| t | Percentage value describing where on the [Two.Path](/docs/path/) to estimate and assign coordinate values. |
| obj | Object to apply calculated x, y to. If none available returns new `Object`. |
Given a float `t` from 0 to 1, return a point or assign a passed `obj`'s coordinates to that percentage on this [Two.Path](/docs/path/)'s curve.
## plot
Two.Path.plot
Based on closed / curved and sorting of vertices plot where all points should be and where the respective handles should be too.
## smooth
Two.Path.smooth
| Argument | Description |
| ---- | ----------- |
| options | Configuration for smoothing. |
| options.type | Type of smoothing algorithm. |
| options.from | Index of vertices to start smoothing |
| options.to | Index of vertices to terminate smoothing |
Adjust vertex handles to generate smooth curves without toggling `automatic`.
## subdivide
Two.Path.subdivide
| Argument | Description |
| ---- | ----------- |
| limit | How many times to recurse subdivisions. |
Insert a [Two.Anchor](/docs/anchor/) at the midpoint between every item in [Two.Path.vertices](/docs/path/#vertices).
## length
Two.Path.length
The sum of distances between all [Two.Path.vertices](/docs/path/#vertices).
## mask
Two.Path.mask
The shape whose alpha property becomes a clipping area for the path.
## clip
Two.Path.clip
Tells Two.js renderer if this object represents a mask for another object (or not).
## strokeAttenuation
================================================
FILE: wiki/docs/registry/README.md
================================================
---
title: Two.Registry
pageClass: docs
lang: en-US
---
# Two.Registry
An arbitrary class to manage a directory of things. Mainly used for keeping tabs of textures in Two.js.
Two.Path.strokeAttenuation
When set to `true`, stroke width scales with transformations (default behavior). When `false`, stroke width remains constant in screen space.
When `strokeAttenuation` is `false`, the stroke width is automatically adjusted to compensate for the object's world transform scale, maintaining constant visual thickness regardless of zoom level. When `true` (default), stroke width scales normally with transformations.
## add
Two.Registry.add
| Argument | Description |
| ---- | ----------- |
| id | A unique identifier. |
| obj | Any type of variable to be registered to the directory. |
Adds any value to the directory. Assigned by the `id`.
## remove
Two.Registry.remove
| Argument | Description |
| ---- | ----------- |
| id | A unique identifier. |
Remove any value from the directory by its `id`.
## get
Two.Registry.get
__Returns__: Object
The associated value. If unavailable then `undefined` is returned.
| Argument | Description |
| ---- | ----------- |
| id | A unique identifier. |
Get a registered value by its `id`.
## contains
================================================
FILE: wiki/docs/renderers/canvas/README.md
================================================
---
title: Two.CanvasRenderer
pageClass: docs
lang: en-US
---
# Two.CanvasRenderer
Two.Registry.contains
__Returns__: Boolean
| Argument | Description |
| ---- | ----------- |
| id | A unique identifier. |
Convenience method to see if a value is registered to an `id` already.
Extends: [Two.Events](/docs/events/)
This class is used by [Two]() when constructing with `type` of `Two.Types.canvas`. It takes Two.js' scenegraph and renders it to a ``.
## Utils
Two.CanvasRenderer.Utils
A massive object filled with utility functions and properties to render Two.js objects to a ``.
## domElement
Two.CanvasRenderer.domElement
The `` associated with the Two.js scene.
## ctx
Two.CanvasRenderer.ctx
Associated two dimensional context to render on the ``.
## overdraw
Two.CanvasRenderer.overdraw
Determines whether the canvas clears the background each draw call.
## scene
Two.CanvasRenderer.scene
The root group of the scenegraph.
## setSize
Two.CanvasRenderer.setSize
__Triggers__:
+ `event:resize`
| Argument | Description |
| ---- | ----------- |
| width | The new width of the renderer. |
| height | The new height of the renderer. |
| ratio | The new pixel ratio (pixel density) of the renderer. Defaults to calculate the pixel density of the user's screen. |
Change the size of the renderer.
## render
================================================
FILE: wiki/docs/renderers/svg/README.md
================================================
---
title: Two.SVGRenderer
pageClass: docs
lang: en-US
---
# Two.SVGRenderer
Two.CanvasRenderer.render
Render the current scene to the ``.
Extends: [Two.Events](/docs/events/)
This class is used by [Two]() when constructing with `type` of `Two.Types.svg` (the default type). It takes Two.js' scenegraph and renders it to a ``.
## Utils
Two.SVGRenderer.Utils
A massive object filled with utility functions and properties to render Two.js objects to a ``.
## domElement
Two.SVGRenderer.domElement
The `` associated with the Two.js scene.
## scene
Two.SVGRenderer.scene
The root group of the scenegraph.
## defs
Two.SVGRenderer.defs
The `
## setSize
Two.SVGRenderer.setSize
| Argument | Description |
| ---- | ----------- |
| width | The new width of the renderer. |
| height | The new height of the renderer. |
Change the size of the renderer.
## render
================================================
FILE: wiki/docs/renderers/webgl/README.md
================================================
---
title: Two.WebGLRenderer
pageClass: docs
lang: en-US
---
# Two.WebGLRenderer
Two.SVGRenderer.render
Render the current scene to the ``.
Extends: [Two.Events](/docs/events/)
This class is used by [Two]() when constructing with `type` of `Two.Types.webgl`. It takes Two.js' scenegraph and renders it to a `` through the WebGL api.
##
// * @type {(gl: any, programs: any) => any}
| Argument | Description |
| ---- | ----------- |
| gl | |
| programs | |
## Utils
Two.WebGLRenderer.Utils
A massive object filled with utility functions and properties to render Two.js objects to a `` through the WebGL API.
## domElement
Two.WebGLRenderer.domElement
The `` associated with the Two.js scene.
## scene
Two.WebGLRenderer.scene
The root group of the scenegraph.
## overdraw
Two.WebGLRenderer.overdraw
Determines whether the canvas clears the background each draw call.
## ctx
Two.WebGLRenderer.ctx
Associated two dimensional context to render on the ``.
## programs
Two.WebGLRenderer.programs
Associated WebGL programs to render all elements from the scenegraph.
## setSize
Two.WebGLRenderer.setSize
__Triggers__:
+ `event:resize`
| Argument | Description |
| ---- | ----------- |
| width | The new width of the renderer. |
| height | The new height of the renderer. |
| ratio | The new pixel ratio (pixel density) of the renderer. Defaults to calculate the pixel density of the user's screen. |
Change the size of the renderer.
## render
================================================
FILE: wiki/docs/shape/README.md
================================================
---
title: Two.Shape
pageClass: docs
lang: en-US
---
# Two.Shape
Two.WebGLRenderer.render
Render the current scene to the ``.
Extends: [Two.Element](/docs/element/)
The foundational transformation object for the Two.js scenegraph.
## fromObject
Two.Shape.fromObject
__Returns__: Two.Shape
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Shape](/docs/shape/) to create a new instance |
Create a new [Two.Shape](/docs/shape/) from an object notation of a [Two.Shape](/docs/shape/).
## renderer
Two.Shape.renderer
Object access to store relevant renderer specific variables. Warning: manipulating this object can create unintended consequences.
## position
Two.Shape.position
The x and y value for where the shape is placed relative to its parent.
## rotation
Two.Shape.rotation
The value in Number for how much the shape is rotated relative to its parent.
## scale
Two.Shape.scale
The value for how much the shape is scaled relative to its parent.
## skewX
Two.Shape.skewX
The value in Number for how much the shape is skewed relative to its parent.
Skew the shape by an angle in the x axis direction.
## skewY
Two.Shape.skewY
The value in Number for how much the shape is skewed relative to its parent.
Skew the shape by an angle in the y axis direction.
## translation
Two.Shape.translation
Alias for [Two.Shape.position](/docs/shape/#position).
## addTo
Two.Shape.addTo
| Argument | Description |
| ---- | ----------- |
| group | The parent the shape adds itself to. |
Convenience method to add itself to the scenegraph.
## remove
Two.Shape.remove
Remove self from the scene / parent.
## contains
Two.Shape.contains
__Returns__: Boolean
| Argument | Description |
| ---- | ----------- |
| x | x coordinate to hit test against |
| y | y coordinate to hit test against |
| options | Optional options object |
| options.ignoreVisibility | If `true`, hit test against `shape.visible = false` shapes |
| options.tolerance | Padding to hit test against in pixels |
Check to see if coordinates are within a [Two.Shape](/docs/shape/)'s bounding rectangle
## copy
Two.Shape.copy
| Argument | Description |
| ---- | ----------- |
| shape | |
Copy the properties of one [Two.Shape](/docs/shape/) onto another.
## clone
Two.Shape.clone
__Returns__: Two.Shape
| Argument | Description |
| ---- | ----------- |
| parent | Optional argument to automatically add the shape to a scenegraph. |
Create a new [Two.Shape](/docs/shape/) with the same values as the current shape.
## toObject
Two.Shape.toObject
Create a JSON compatible object that represents information of the shape.
## dispose
================================================
FILE: wiki/docs/shapes/arc-segment/README.md
================================================
---
title: Two.ArcSegment
pageClass: docs
lang: en-US
---
# Two.ArcSegment
Two.Shape.dispose
Release the shape's bound objects by unbinding relevant events.
Extends: [Two.Path](/docs/path/)
## Properties
Two.ArcSegment.Properties
A list of properties that are on every [Two.ArcSegment](/docs/shapes/arc-segment/).
## fromObject
Two.ArcSegment.fromObject
__Returns__: Two.ArcSegment
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.ArcSegment](/docs/shapes/arc-segment/) to create a new instance |
Create a new [Two.ArcSegment](/docs/shapes/arc-segment/) from an object notation of a [Two.ArcSegment](/docs/shapes/arc-segment/).
## innerRadius
Two.ArcSegment.innerRadius
The size of the inner radius of the arc segment.
## outerRadius
Two.ArcSegment.outerRadius
The size of the outer radius of the arc segment.
## startAngle
Two.ArcSegment.startAngle
The angle of one side for the arc segment.
## endAngle
Two.ArcSegment.endAngle
The angle of the other side for the arc segment.
## copy
Two.ArcSegment.copy
| Argument | Description |
| ---- | ----------- |
| arcSegment | The reference [Two.ArcSegment](/docs/shapes/arc-segment/) |
Copy the properties of one [Two.ArcSegment](/docs/shapes/arc-segment/) onto another.
## clone
Two.ArcSegment.clone
__Returns__: Two.ArcSegment
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.ArcSegment](/docs/shapes/arc-segment/) with the same properties of the current path.
## toObject
================================================
FILE: wiki/docs/shapes/circle/README.md
================================================
---
title: Two.Circle
pageClass: docs
lang: en-US
---
# Two.Circle
Two.ArcSegment.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
Extends: [Two.Path](/docs/path/)
## Properties
Two.Circle.Properties
A list of properties that are on every [Two.Circle](/docs/shapes/circle/).
## fromObject
Two.Circle.fromObject
__Returns__: Two.Circle
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Circle](/docs/shapes/circle/) to create a new instance |
Create a new [Two.Circle](/docs/shapes/circle/) from an object notation of a [Two.Circle](/docs/shapes/circle/).
## radius
Two.Circle.radius
The size of the radius of the circle.
## copy
Two.Circle.copy
| Argument | Description |
| ---- | ----------- |
| circle | The reference [Two.Circle](/docs/shapes/circle/) |
Copy the properties of one [Two.Circle](/docs/shapes/circle/) onto another.
## clone
Two.Circle.clone
__Returns__: Two.Circle
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.Circle](/docs/shapes/circle/) with the same properties of the current path.
## toObject
================================================
FILE: wiki/docs/shapes/ellipse/README.md
================================================
---
title: Two.Ellipse
pageClass: docs
lang: en-US
---
# Two.Ellipse
Two.Circle.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
Extends: [Two.Path](/docs/path/)
## Properties
Two.Ellipse.Properties
A list of properties that are on every [Two.Ellipse](/docs/shapes/ellipse/).
## fromObject
Two.Ellipse.fromObject
__Returns__: Two.Ellipse
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Ellipse](/docs/shapes/ellipse/) to create a new instance |
Create a new [Two.Ellipse](/docs/shapes/ellipse/) from an object notation of a [Two.Ellipse](/docs/shapes/ellipse/).
## width
Two.Ellipse.width
The width of the ellipse.
## height
Two.Ellipse.height
The height of the ellipse.
## copy
Two.Ellipse.copy
| Argument | Description |
| ---- | ----------- |
| ellipse | The reference [Two.Ellipse](/docs/shapes/ellipse/) |
Copy the properties of one [Two.Ellipse](/docs/shapes/ellipse/) onto another.
## clone
Two.Ellipse.clone
__Returns__: Two.Ellipse
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.Ellipse](/docs/shapes/ellipse/) with the same properties of the current path.
## toObject
================================================
FILE: wiki/docs/shapes/line/README.md
================================================
---
title: Two.Line
pageClass: docs
lang: en-US
---
# Two.Line
Two.Ellipse.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
Extends: [Two.Path](/docs/path/)
Extends: [Two.Shape](/docs/shape/)
This is a primary primitive class for quickly and easily drawing points in Two.js. Unless specified methods return their instance of `Two.Points` for the purpose of chaining.
## Properties
Two.Points.Properties
A list of properties that are on every [Two.Points](/docs/shapes/points/).
## fromObject
Two.Points.fromObject
__Returns__: Two.Points
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Points](/docs/shapes/points/) to create a new instance |
Create a new [Two.Points](/docs/shapes/points/) from an object notation of a [Two.Points](/docs/shapes/points/).
## size
Two.Points.size
Number describing the diameter each point should have
Set the size of each point in the collection of [Two.Points](/docs/shapes/points/)
## sizeAttenuation
Two.Points.sizeAttenuation
Boolean dictating whether Two.js should scale the size of the points based on its matrix hierarchy.
Set to `true` if you'd like the size of the points to be relative to the scale of its parents; `false` to disregard. Default is `false`.
## beginning
Two.Points.beginning
Number between zero and one to state the beginning of where the path is rendered.
[Two.Points.beginning](/docs/shapes/points/#beginning) is a percentage value that represents at what percentage into the path should the renderer start drawing.
## ending
Two.Points.ending
Number between zero and one to state the ending of where the path is rendered.
[Two.Points.ending](/docs/shapes/points/#ending) is a percentage value that represents at what percentage into the path should the renderer start drawing.
## fill
Two.Points.fill
The value of what the path should be filled in with.
See: [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) for more information on CSS's colors as `String`.
## stroke
Two.Points.stroke
The value of what the path should be outlined in with.
See: [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) for more information on CSS's colors as `String`.
## linewidth
Two.Points.linewidth
The thickness in pixels of the stroke.
## opacity
Two.Points.opacity
The opaqueness of the path.
## className
Two.Points.className
A class to be applied to the element to be compatible with CSS styling.
## visible
Two.Points.visible
Display the points or not.
## vertices
Two.Points.vertices
An ordered list of vector points for rendering points.
A list of [Two.Vector](/docs/vector/) objects that consist of which coordinates to draw points at.
## dashes
Two.Points.dashes
Array of numbers. Odd indices represent dash length. Even indices represent dash space.
A list of numbers that represent the repeated dash length and dash space applied to the stroke of the text.
See: [https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) for more information on the SVG stroke-dasharray attribute.
## dashes.offset
Two.Points.dashes.offset
A number in pixels to offset [Two.Points.dashes](/docs/shapes/points/#dashes) display.
## copy
Two.Points.copy
| Argument | Description |
| ---- | ----------- |
| points | The reference [Two.Points](/docs/shapes/points/) |
Copy the properties of one [Two.Points](/docs/shapes/points/) onto another.
## clone
Two.Points.clone
__Returns__: Two.Points
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.Points](/docs/shapes/points/) with the same properties of the current path.
## toObject
Two.Points.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the points object.
## dispose
Two.Points.dispose
__Returns__: Two.Points
Release the points' renderer resources and detach all events.
This method cleans up vertices collection events, individual vertex events,
and disposes fill/stroke effects (calling dispose() on Gradients and
Textures for thorough cleanup) while preserving the renderer type for
potential re-attachment to a new renderer.
## noFill
Two.Points.noFill
Short hand method to set fill to `none`.
## noStroke
Two.Points.noStroke
Short hand method to set stroke to `none`.
## corner
Two.Points.corner
Orient the vertices of the shape to the upper left-hand corner of the points object.
## center
Two.Points.center
Orient the vertices of the shape to the center of the points object.
## getBoundingClientRect
Two.Points.getBoundingClientRect
__Returns__: Object
- Returns object with top, left, right, bottom, width, height attributes.
| Argument | Description |
| ---- | ----------- |
| shallow | Describes whether to calculate off local matrix or world matrix. |
Return an object with top, left, right, bottom, width, and height parameters of the path.
## subdivide
Two.Points.subdivide
| Argument | Description |
| ---- | ----------- |
| limit | How many times to recurse subdivisions. |
Insert a [Two.Vector](/docs/vector/) at the midpoint between every item in [Two.Points.vertices](/docs/shapes/points/#vertices).
## length
Two.Points.length
The sum of distances between all [Two.Points.vertices](/docs/shapes/points/#vertices).
## strokeAttenuation
================================================
FILE: wiki/docs/shapes/polygon/README.md
================================================
---
title: Two.Polygon
pageClass: docs
lang: en-US
---
# Two.Polygon
Two.Points.strokeAttenuation
When set to `true`, stroke width scales with transformations (default behavior). When `false`, stroke width remains constant in screen space.
When `strokeAttenuation` is `false`, the stroke width is automatically adjusted to compensate for the object's world transform scale, maintaining constant visual thickness regardless of zoom level. When `true` (default), stroke width scales normally with transformations.
Extends: [Two.Path](/docs/path/)
## Properties
Two.Polygon.Properties
A list of properties that are on every [Two.Polygon](/docs/shapes/polygon/).
## fromObject
Two.Polygon.fromObject
__Returns__: Two.Polygon
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Polygon](/docs/shapes/polygon/) to create a new instance |
Create a new [Two.Polygon](/docs/shapes/polygon/) from an object notation of a [Two.Polygon](/docs/shapes/polygon/).
## radius
Two.Polygon.radius
The radius value of the polygon.
## width
Two.Polygon.width
The size of the width of the polygon.
## height
Two.Polygon.height
The size of the height of the polygon.
## sides
Two.Polygon.sides
The amount of sides the polyogn has.
## copy
Two.Polygon.copy
| Argument | Description |
| ---- | ----------- |
| polygon | The reference [Two.Polygon](/docs/shapes/polygon/) |
Copy the properties of one [Two.Polygon](/docs/shapes/polygon/) onto another.
## clone
Two.Polygon.clone
__Returns__: Two.Polygon
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.Polygon](/docs/shapes/polygon/) with the same properties of the current path.
## toObject
================================================
FILE: wiki/docs/shapes/rectangle/README.md
================================================
---
title: Two.Rectangle
pageClass: docs
lang: en-US
---
# Two.Rectangle
Two.Polygon.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
Extends: [Two.Path](/docs/path/)
## Properties
Two.Rectangle.Properties
A list of properties that are on every [Two.Rectangle](/docs/shapes/rectangle/).
## fromObject
Two.Rectangle.fromObject
__Returns__: Two.Rectangle
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Rectangle](/docs/shapes/rectangle/) to create a new instance |
Create a new [Two.Rectangle](/docs/shapes/rectangle/) from an object notation of a [Two.Rectangle](/docs/shapes/rectangle/).
## width
Two.Rectangle.width
The size of the width of the rectangle.
## height
Two.Rectangle.height
The size of the height of the rectangle.
## origin
Two.Rectangle.origin
A two-component vector describing the origin offset to draw the rectangle. Default is `0, 0`.
## copy
Two.Rectangle.copy
| Argument | Description |
| ---- | ----------- |
| rectangle | The reference [Two.Rectangle](/docs/shapes/rectangle/) |
Copy the properties of one [Two.Rectangle](/docs/shapes/rectangle/) onto another.
## clone
Two.Rectangle.clone
__Returns__: Two.Rectangle
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.Rectangle](/docs/shapes/rectangle/) with the same properties of the current path.
## toObject
================================================
FILE: wiki/docs/shapes/rounded-rectangle/README.md
================================================
---
title: Two.RoundedRectangle
pageClass: docs
lang: en-US
---
# Two.RoundedRectangle
Two.Rectangle.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
Extends: [Two.Path](/docs/path/)
## Properties
Two.RoundedRectangle.Properties
A list of properties that are on every [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/).
## fromObject
Two.RoundedRectangle.fromObject
__Returns__: Two.RoundedRectangle
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/) to create a new instance |
Create a new [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/) from an object notation of a [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/).
## width
Two.RoundedRectangle.width
The width of the rounded rectangle.
## height
Two.RoundedRectangle.height
The height of the rounded rectangle.
## radius
Two.RoundedRectangle.radius
The size of the radius of the rounded rectangle.
## copy
Two.RoundedRectangle.copy
| Argument | Description |
| ---- | ----------- |
| roundedRectangle | The reference [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/) |
Copy the properties of one [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/) onto another.
## clone
Two.RoundedRectangle.clone
__Returns__: Two.RoundedRectangle
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/) with the same properties of the current path.
## toObject
================================================
FILE: wiki/docs/shapes/star/README.md
================================================
---
title: Two.Star
pageClass: docs
lang: en-US
---
# Two.Star
Two.RoundedRectangle.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
Extends: [Two.Path](/docs/path/)
## Properties
Two.Star.Properties
A list of properties that are on every [Two.Star](/docs/shapes/star/).
## fromObject
Two.Star.fromObject
__Returns__: Two.Star
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Star](/docs/shapes/star/) to create a new instance |
Create a new [Two.Star](/docs/shapes/star/) from an object notation of a [Two.Star](/docs/shapes/star/).
## innerRadius
Two.Star.innerRadius
The size of the inner radius of the star.
## outerRadius
Two.Star.outerRadius
The size of the outer radius of the star.
## sides
Two.Star.sides
The amount of sides the star has.
## copy
Two.Star.copy
| Argument | Description |
| ---- | ----------- |
| star | The reference [Two.Star](/docs/shapes/star/) |
Copy the properties of one [Two.Star](/docs/shapes/star/) onto another.
## clone
Two.Star.clone
__Returns__: Two.Star
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.Star](/docs/shapes/star/) with the same properties of the current path.
## toObject
================================================
FILE: wiki/docs/text/README.md
================================================
---
title: Two.Text
pageClass: docs
lang: en-US
---
# Two.Text
Two.Star.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the path.
Extends: [Two.Shape](/docs/shape/)
This is a primitive class for creating drawable text that can be added to the scenegraph.
## Ratio
Two.Text.Ratio
Approximate aspect ratio of a typeface's character width to height.
## Properties
Two.Text.Properties
A list of properties that are on every [Two.Text](/docs/text/).
## Measure
Two.Measure
__Returns__: Object
- The width and height of the [Two.Text](/docs/text/) instance.
| Argument | Description |
| ---- | ----------- |
| text | The instance of [Two.Text](/docs/text/) to measure. |
## fromObject
Two.Text.fromObject
__Returns__: Two.Text
| Argument | Description |
| ---- | ----------- |
| obj | Object notation of a [Two.Text](/docs/text/) to create a new instance |
Create a new [Two.Text](/docs/text/) from an object notation of a [Two.Text](/docs/text/).
## value
Two.Text.value
The characters to be rendered to the the screen. Referred to in the documentation sometimes as the `message`.
## family
Two.Text.family
The font family Two.js should attempt to register for rendering. The default value is `'sans-serif'`. Comma separated font names can be supplied as a "stack", similar to the CSS implementation of `font-family`.
## size
Two.Text.size
The font size in Two.js point space. Defaults to `13`.
## leading
Two.Text.leading
The height between lines measured from base to base in Two.js point space. Defaults to `17`.
## alignment
Two.Text.alignment
Alignment of text in relation to [Two.Text.translation](/docs/text/#translation)'s coordinates. Possible values include `'left'`, `'center'`, `'right'`. Defaults to `'center'`.
## baseline
Two.Text.baseline
The vertical aligment of the text in relation to [Two.Text.translation](/docs/text/#translation)'s coordinates. Possible values include `'top'`, `'middle'`, `'bottom'`, and `'baseline'`. Defaults to `'baseline'`.
## style
Two.Text.style
The font's style. Possible values include '`normal`', `'italic'`. Defaults to `'normal'`.
## weight
Two.Text.weight
A number at intervals of 100 to describe the font's weight. This compatibility varies with the typeface's variant weights. Larger values are bolder. Smaller values are thinner. Defaults to `'500'`.
## decoration
Two.Text.decoration
String to delineate whether text should be decorated with for instance an `'underline'`. Defaults to `'none'`.
## direction
Two.Text.direction
String to determine what direction the text should run. Possibly values are `'ltr'` for left-to-right and `'rtl'` for right-to-left. Defaults to `'ltr'`.
## fill
Two.Text.fill
The value of what the text object should be filled in with.
See: [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) for more information on CSS's colors as `String`.
## stroke
Two.Text.stroke
The value of what the text object should be filled in with.
See: [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) for more information on CSS's colors as `String`.
## linewidth
Two.Text.linewidth
The thickness in pixels of the stroke.
## opacity
Two.Text.opacity
The opaqueness of the text object.
## visible
Two.Text.visible
Display the text object or not.
## mask
Two.Text.mask
The shape whose alpha property becomes a clipping area for the text.
## clip
Two.Text.clip
Object to define clipping area.
## dashes
Two.Text.dashes
Array of numbers. Odd indices represent dash length. Even indices represent dash space.
A list of numbers that represent the repeated dash length and dash space applied to the stroke of the text.
See: [https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) for more information on the SVG stroke-dasharray attribute.
## dashes.offset
Two.Text.dashes.offset
A number in pixels to offset [Two.Text.dashes](/docs/text/#dashes) display.
## copy
Two.Text.copy
| Argument | Description |
| ---- | ----------- |
| text | |
Copy the properties of one [Two.Text](/docs/text/) onto another.
## clone
Two.Text.clone
__Returns__: Two.Text
| Argument | Description |
| ---- | ----------- |
| parent | The parent group or scene to add the clone to. |
Create a new instance of [Two.Text](/docs/text/) with the same properties of the current text object.
## toObject
Two.Text.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the text object.
## dispose
Two.Text.dispose
__Returns__: Two.Text
Release the text's renderer resources and detach all events.
This method disposes fill and stroke effects (calling dispose() on
Gradients and Textures for thorough cleanup) while preserving the
renderer type for potential re-attachment to a new renderer.
## noFill
Two.Text.noFill
Short hand method to set fill to `none`.
## noStroke
Two.Text.noStroke
Short hand method to set stroke to `none`.
## getBoundingClientRect
Two.Text.getBoundingClientRect
__Returns__: Object
- Returns object with top, left, right, bottom, width, height attributes.
| Argument | Description |
| ---- | ----------- |
| shallow | Describes whether to calculate off local matrix or world matrix. |
Return an object with top, left, right, bottom, width, and height parameters of the text object.
## strokeAttenuation
================================================
FILE: wiki/docs/two/README.md
================================================
---
title: Two
pageClass: docs
lang: en-US
---
# Two
Two.Text.strokeAttenuation
When set to `true`, stroke width scales with transformations (default behavior). When `false`, stroke width remains constant in screen space.
When `strokeAttenuation` is `false`, the stroke width is automatically adjusted to compensate for the object's world transform scale, maintaining constant visual thickness regardless of zoom level. When `true` (default), stroke width scales normally with transformations.
Extends: [Two.Events](/docs/events/)
The entrypoint for Two.js. Instantiate a `new Two` in order to setup a scene to render to. `Two` is also the publicly accessible namespace that all other sub-classes, functions, and utilities attach to.
## Types
Two.Types
The different rendering types available in the library.
## Version
Two.Version
The current working version of the library, `v0.8.23`.
## PublishDate
Two.PublishDate
The automatically generated publish date in the build process to verify version release candidates.
## Identifier
Two.Identifier
String prefix for all Two.js object's ids. This trickles down to SVG ids.
## Resolution
Two.Resolution
Default amount of vertices to be used for interpreting Arcs and ArcSegments.
## AutoCalculateImportedMatrices
Two.AutoCalculateImportedMatrices
When importing SVGs through the [Two.interpret](/docs/two/#interpret) and [Two.load](/docs/two/#load), this boolean determines whether Two.js infers and then overrides the exact transformation matrix of the reference SVG.
## Instances
Two.Instances
Registered list of all Two.js instances in the current session.
## uniqueId
Two.uniqueId
__Returns__: Number
Ever increasing Number.
Simple method to access an incrementing value. Used for `id` allocation on all Two.js objects.
## Commands
Two.Commands
Map of possible path commands. Taken from the SVG specification. Commands include: `move`, `line`, `curve`, `arc`, and `close`.
## Utils
Two.Utils
A massive object filled with utility functions and properties.
__Two.Utils.read__: A collection of SVG parsing functions indexed by element name.
__Two.Utils.read.path__: Parse SVG path element or `d` attribute string.
## type
Two.type
A string representing which type of renderer the instance has instantiated.
## renderer
Two.renderer
The instantiated rendering class for the instance. For a list of possible rendering types check out Two.Types.
## scene
Two.scene
The base level [Two.Group](/docs/group/) which houses all objects for the instance. Because it is a [Two.Group](/docs/group/) transformations can be applied to it that will affect all objects in the instance. This is handy as a makeshift inverted camera.
## width
Two.width
The width of the instance's dom element.
## height
Two.height
The height of the instance's dom element.
## frameCount
Two.frameCount
An integer representing how many frames have elapsed.
## timeDelta
Two.timeDelta
A number representing how much time has elapsed since the last frame in milliseconds.
## playing
Two.playing
A boolean representing whether or not the instance is being updated through the automatic `requestAnimationFrame`.
## fit
Two.fit
If `options.fullscreen` or `options.fitted` in construction create this function. It sets the `width` and `height` of the instance to its respective parent `window` or `element` depending on the `options` passed.
## appendTo
Two.appendTo
| Argument | Description |
| ---- | ----------- |
| elem | The DOM element to append the Two.js stage to. |
Shorthand method to append your instance of Two.js to the `document`.
## pause
Two.pause
__Triggers__:
+ `event:pause`
Call to stop the internal animation loop for a specific instance of Two.js.
## release
Two.release
__Returns__: Two.Element
The object passed for event deallocation.
| Argument | Description |
| ---- | ----------- |
| obj | Object to release from event listening. If none provided then the root [Two.Group](/docs/group/) will be used. |
Release a [Two.Element](/docs/element/)’s events from memory and recurse through its children, effects, and/or vertices.
## getShapesAtPoint
Two.getShapesAtPoint
__Returns__: Array.\
Ordered list of shapes under the specified point, front to back.
| Argument | Description |
| ---- | ----------- |
| x | X coordinate in world space. |
| y | Y coordinate in world space. |
| options | Hit test configuration. |
| options.visibleOnly | Limit results to visible shapes. |
| options.includeGroups | Include groups in the hit results. |
| options.mode | Whether to return all intersecting shapes or only the top-most. |
| options.deepest | Alias for `mode: 'deepest'`. |
| options.precision | Segmentation precision for curved geometry. |
| options.tolerance | Pixel tolerance applied to hit testing. |
| options.fill | Override fill testing behaviour. |
| options.stroke | Override stroke testing behaviour. |
| options.filter | Predicate to filter shapes from the result set. |
Returns shapes underneath the provided coordinates. Coordinates are expected in world space (matching the renderer output).
## update
Two.update
__Triggers__:
+ `event:update`
Update positions and calculations in one pass before rendering. Then render to the canvas.
## render
Two.render
__Triggers__:
+ `event:render`
Render all drawable and visible objects of the scene.
## add
Two.add
| Argument | Description |
| ---- | ----------- |
| objects | An array of Two.js objects. Alternatively can add objects as individual arguments. |
A shorthand method to add specific Two.js objects to the scene.
## remove
Two.remove
| Argument | Description |
| ---- | ----------- |
| objects | An array of Two.js objects. |
A shorthand method to remove specific Two.js objects from the scene.
## clear
Two.clear
Removes all objects from the instance's scene. If you intend to have the browser garbage collect this, don't forget to delete the references in your application as well.
## makeLine
Two.makeLine
__Returns__: Two.Line
| Argument | Description |
| ---- | ----------- |
| x1 | |
| y1 | |
| x2 | |
| y2 | |
Creates a Two.js line and adds it to the scene.
## makeArrow
Two.makeArrow
__Returns__: Two.Path
| Argument | Description |
| ---- | ----------- |
| x1 | |
| y1 | |
| x2 | |
| y2 | |
Creates a Two.js arrow and adds it to the scene.
## makeRectangle
Two.makeRectangle
__Returns__: Two.Rectangle
| Argument | Description |
| ---- | ----------- |
| x | |
| y | |
| width | |
| height | |
Creates a Two.js rectangle and adds it to the scene.
## makeRoundedRectangle
Two.makeRoundedRectangle
__Returns__: Two.RoundedRectangle
| Argument | Description |
| ---- | ----------- |
| x | |
| y | |
| width | |
| height | |
| sides | |
Creates a Two.js rounded rectangle and adds it to the scene.
## makeCircle
Two.makeCircle
__Returns__: Two.Circle
| Argument | Description |
| ---- | ----------- |
| x | |
| y | |
| radius | |
| resolution | |
Creates a Two.js circle and adds it to the scene.
## makeEllipse
Two.makeEllipse
__Returns__: Two.Ellipse
| Argument | Description |
| ---- | ----------- |
| x | |
| y | |
| rx | |
| ry | |
| resolution | |
Creates a Two.js ellipse and adds it to the scene.
## makeStar
Two.makeStar
__Returns__: Two.Star
| Argument | Description |
| ---- | ----------- |
| x | |
| y | |
| outerRadius | |
| innerRadius | |
| sides | |
Creates a Two.js star and adds it to the scene.
## makeCurve
Two.makeCurve
__Returns__: Two.Path
- Where `path.curved` is set to `true`.
| Argument | Description |
| ---- | ----------- |
| points | An array of [Two.Anchor](/docs/anchor/) points. |
| | Alternatively you can pass alternating `x` / `y` coordinate values as individual arguments. These will be combined into [Two.Anchor](/docs/anchor/)s for use in the path. |
Creates a Two.js path that is curved and adds it to the scene.
## makePolygon
Two.makePolygon
__Returns__: Two.Polygon
| Argument | Description |
| ---- | ----------- |
| x | |
| y | |
| radius | |
| sides | |
Creates a Two.js polygon and adds it to the scene.
## makeArcSegment
Two.makeArcSegment
__Returns__: Two.ArcSegment
| Argument | Description |
| ---- | ----------- |
| x | |
| y | |
| innerRadius | |
| outerRadius | |
| startAngle | |
| endAngle | |
| resolution | The number of vertices that should comprise the arc segment. |
## makePoints
Two.makePoints
__Returns__: Two.Points
| Argument | Description |
| ---- | ----------- |
| points | An array of [Two.Vector](/docs/vector/) points |
| | Alternatively you can pass alternating `x` / `y` coordinate values as individual agrguments. These will be combined into [Two.Vector](/docs/vector/)s for use in the points object. |
Creates a Two.js points object and adds it to the current scene.
## makePath
Two.makePath
__Returns__: Two.Path
| Argument | Description |
| ---- | ----------- |
| points | An array of [Two.Anchor](/docs/anchor/) points |
| | Alternatively you can pass alternating `x` / `y` coordinate values as individual arguments. These will be combined into [Two.Anchor](/docs/anchor/)s for use in the path. |
Creates a Two.js path and adds it to the scene.
## makeText
Two.makeText
__Returns__: Two.Text
| Argument | Description |
| ---- | ----------- |
| message | |
| x | |
| y | |
| styles | An object to describe any of the [Two.Text.Properties](/docs/text/#properties) including `fill`, `stroke`, `linewidth`, `family`, `alignment`, `leading`, `opacity`, etc.. |
Creates a Two.js text object and adds it to the scene.
## makeLinearGradient
Two.makeLinearGradient
__Returns__: Two.LinearGradient
| Argument | Description |
| ---- | ----------- |
| x1 | |
| y1 | |
| x2 | |
| y2 | |
| args | Any number of color stops sometimes referred to as ramp stops. If none are supplied then the default black-to-white two stop gradient is applied. |
Creates a Two.js linear gradient and adds it to the scene. In the case of an effect it's added to an invisible "definitions" group.
## makeRadialGradient
Two.makeRadialGradient
__Returns__: Two.RadialGradient
| Argument | Description |
| ---- | ----------- |
| x1 | |
| y1 | |
| radius | |
| args | Any number of color stops sometimes referred to as ramp stops. If none are supplied then the default black-to-white two stop gradient is applied. |
Creates a Two.js linear-gradient object and adds it to the scene. In the case of an effect it's added to an invisible "definitions" group.
## makeSprite
Two.makeSprite
__Returns__: Two.Sprite
| Argument | Description |
| ---- | ----------- |
| src | The URL path to an image or an already created [Two.Texture](/docs/effects/texture/). |
| x | |
| y | |
| columns | |
| rows | |
| frameRate | |
| autostart | |
Creates a Two.js sprite object and adds it to the scene. Sprites can be used for still images as well as animations.
## makeImage
Two.makeImage
__Returns__: Two.Image
| Argument | Description |
| ---- | ----------- |
| src | The URL path to an image or an already created [Two.Texture](/docs/effects/texture/). |
| x | |
| y | |
| width | |
| height | |
| mode | |
Creates a Two.js image object and adds it to the scene. Images are scaled to fit the provided width and height.
## makeImageSequence
Two.makeImageSequence
__Returns__: Two.ImageSequence
| Argument | Description |
| ---- | ----------- |
| src | An array of paths or of [Two.Textures](/docs/effects/texture/). |
| x | |
| y | |
| frameRate | |
| autostart | |
Creates a Two.js image sequence object and adds it to the scene.
## makeTexture
Two.makeTexture
__Returns__: Two.Texture
| Argument | Description |
| ---- | ----------- |
| src | The URL path to an image or a DOM image-like element. |
| callback | Function to be invoked when the image is loaded. |
Creates a Two.js texture object.
## makeGroup
Two.makeGroup
__Returns__: Two.Group
| Argument | Description |
| ---- | ----------- |
| objects | Two.js objects to be added to the group in the form of an array or as individual arguments. |
Creates a Two.js group object and adds it to the scene.
## interpret
Two.interpret
__Returns__: Two.Group
| Argument | Description |
| ---- | ----------- |
| svg | The SVG node to be parsed. |
| shallow | Don't create a top-most group but append all content directly. |
| add | – Automatically add the reconstructed SVG node to scene. |
Interpret an SVG Node and add it to this instance's scene. The distinction should be made that this doesn't `import` svg's, it solely interprets them into something compatible for Two.js - this is slightly different than a direct transcription.
## load
================================================
FILE: wiki/docs/vector/README.md
================================================
---
title: Two.Vector
pageClass: docs
lang: en-US
---
# Two.Vector
Two.load
__Returns__: Two.Group
| Argument | Description |
| ---- | ----------- |
| pathOrSVGContent | The URL path of an SVG file or an SVG document as text. |
| callback | Function to call once loading has completed. |
Load an SVG file or SVG text and interpret it into Two.js legible objects.
Extends: [Two.Events](/docs/events/)
A class to store `x` / `y` component vector data. In addition to storing data `Two.Vector` has suped up methods for commonplace mathematical operations.
## zero
Two.Vector.zero
Handy reference to a vector with component values 0, 0 at all times.
## left
Two.Vector.left
Handy reference to a vector with component values -1, 0 at all times.
## right
Two.Vector.right
Handy reference to a vector with component values 1, 0 at all times.
## up
Two.Vector.up
Handy reference to a vector with component values 0, -1 at all times.
## down
Two.Vector.down
Handy reference to a vector with component values 0, 1 at all times.
## add
Two.Vector.add
__Returns__: Two.Vector
| Argument | Description |
| ---- | ----------- |
| v1 | First [Two.Vector](/docs/vector/) |
| v2 | Second [Two.Vector](/docs/vector/) |
Add two vectors together.
## sub
Two.Vector.sub
__Returns__: Two.Vector
| Argument | Description |
| ---- | ----------- |
| v1 | First [Two.Vector](/docs/vector/) |
| v2 | Second [Two.Vector](/docs/vector/) |
Subtract two vectors: `v2` from `v1`.
## subtract
Two.Vector.subtract
Alias for [Two.Vector.sub](/docs/vector/#sub).
## ratioBetween
Two.Vector.ratioBetween
__Returns__: Number
The ratio betwen two points `v1` and `v2`.
| Argument | Description |
| ---- | ----------- |
| v1 | First [Two.Vector](/docs/vector/) |
| v2 | Second [Two.Vector](/docs/vector/) |
## angleBetween
Two.Vector.angleBetween
__Returns__: Number
The angle between points `v1` and `v2`.
| Argument | Description |
| ---- | ----------- |
| v1 | First [Two.Vector](/docs/vector/) |
| v2 | Second [Two.Vector](/docs/vector/) |
## distanceBetween
Two.Vector.distanceBetween
__Returns__: Number
The distance between points `v1` and `v2`. Distance is always positive.
| Argument | Description |
| ---- | ----------- |
| v1 | First [Two.Vector](/docs/vector/) |
| v2 | Second [Two.Vector](/docs/vector/) |
## distanceBetweenSquared
Two.Vector.distanceBetweenSquared
__Returns__: Number
The squared distance between points `v1` and `v2`.
| Argument | Description |
| ---- | ----------- |
| v1 | First [Two.Vector](/docs/vector/) |
| v2 | Second [Two.Vector](/docs/vector/) |
## x
Two.Vector.x
The horizontal x-component of the vector.
## y
Two.Vector.y
The vertical y-component of the vector.
## set
Two.Vector.set
| Argument | Description |
| ---- | ----------- |
| x | Value of `x` component |
| y | Value of `y` component |
## copy
Two.Vector.copy
| Argument | Description |
| ---- | ----------- |
| v | The [Two.Vector](/docs/vector/) to copy |
Copy the `x` / `y` components of another object [Two.Vector](/docs/vector/).
## clear
Two.Vector.clear
Set the `x` / `y` component values of the vector to zero.
## clone
Two.Vector.clone
__Returns__: Two.Vector
Create a new vector and copy the existing values onto the newly created instance.
## add
Two.Vector.add
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| v | The [Two.Vector](/docs/vector/) to add |
Add an object with `x` / `y` component values to the instance.
## add
Two.Vector.add
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| n | Number to add |
Add the **same** number to both `x` / `y` component values of the instance.
## add
Two.Vector.add
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| x | Number to add to `x` component |
| y | Number to add to `y` component |
Add `x` / `y` values to their respective component value on the instance.
## addSelf
Two.Vector.addSelf
Alias for [Two.Vector.add](/docs/vector/#add).
## sub
Two.Vector.sub
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| v | The amount as a [Two.Vector](/docs/vector/) to subtract |
Subtract an object with `x` / `y` component values to the instance.
## sub
Two.Vector.sub
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| n | Number to subtract |
Subtract the **same** number to both `x` / `y` component values of the instance.
## sub
Two.Vector.sub
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| x | Number to subtract from `x` component |
| y | Number to subtract from `y` component |
Subtract `x` / `y` values to their respective component value on the instance.
## subtract
Two.Vector.subtract
Alias for [Two.Vector.sub](/docs/vector/#sub).
## subSelf
Two.Vector.subSelf
Alias for [Two.Vector.sub](/docs/vector/#sub).
## subtractSelf
Two.Vector.subtractSelf
Alias for [Two.Vector.sub](/docs/vector/#sub).
## multiply
Two.Vector.multiply
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| v | The [Two.Vector](/docs/vector/) to multiply |
Multiply an object with `x` / `y` component values to the instance.
## multiply
Two.Vector.multiply
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| n | The number to multiply |
Multiply the **same** number to both x / y component values of the instance.
## multiply
Two.Vector.multiply
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| x | The number to multiply to `x` component |
| y | The number to multiply to `y` component |
Multiply `x` / `y` values to their respective component value on the instance.
## multiplySelf
Two.Vector.multiplySelf
Alias for [Two.Vector.multiply](/docs/vector/#multiply).
## multiplyScalar
Two.Vector.multiplyScalar
| Argument | Description |
| ---- | ----------- |
| s | The scalar to multiply by. |
Mulitiply the vector by a single number. Shorthand to call [Two.Vector.multiply](/docs/vector/#multiply) directly.
## divide
Two.Vector.divide
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| v | The [Two.Vector](/docs/vector/) to divide |
Divide an object with `x` / `y` component values to the instance.
## divide
Two.Vector.divide
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| n | The number to divide |
Divide the **same** number to both x / y component values of the instance.
## divide
Two.Vector.divide
_Overloaded_
| Argument | Description |
| ---- | ----------- |
| x | The number to divide on the `x` component |
| y | The number to divide on the `y` component |
Divide `x` / `y` values to their respective component value on the instance.
## divideSelf
Two.Vector.divideSelf
Alias for [Two.Vector.divide](/docs/vector/#divide).
## divideScalar
Two.Vector.divideScalar
| Argument | Description |
| ---- | ----------- |
| s | The scalar to divide by. |
Divide the vector by a single number. Shorthand to call [Two.Vector.divide](/docs/vector/#divide) directly.
## negate
Two.Vector.negate
Invert each component's sign value.
## dot
Two.Vector.dot
__Returns__: Number
Get the [dot product](https://en.wikipedia.org/wiki/Dot_product) of the vector.
## lengthSquared
Two.Vector.lengthSquared
__Returns__: Number
Get the length of the vector to the power of two. Widely used as less expensive than [Two.Vector.length](/docs/vector/#length) because it isn't square-rooting any numbers.
## normalize
Two.Vector.normalize
Normalize the vector from negative one to one.
## distanceToSquared
Two.Vector.distanceToSquared
__Returns__: Number
Get the distance between two vectors to the power of two. Widely used as less expensive than [Two.Vector.distanceTo](/docs/vector/#distanceto) because it isn't square-rooting any numbers.
## setLength
Two.Vector.setLength
| Argument | Description |
| ---- | ----------- |
| l | length to set vector to. |
Set the length of a vector.
## equals
Two.Vector.equals
__Returns__: Boolean
| Argument | Description |
| ---- | ----------- |
| v | The vector to compare against. |
| eps | An options epsilon for precision. |
Qualify if one vector roughly equal another. With a margin of error defined by epsilon.
## lerp
Two.Vector.lerp
| Argument | Description |
| ---- | ----------- |
| v | The destination vector to step towards. |
| t | The zero to one value of how close the current vector gets to the destination vector. |
Linear interpolate one vector to another by an amount `t` defined as a zero to one number.
See: [Matt DesLauriers](https://twitter.com/mattdesl/status/1031305279227478016) has a good thread about this.
## isZero
Two.Vector.isZero
__Returns__: Boolean
| Argument | Description |
| ---- | ----------- |
| eps | Optional precision amount to check against. |
Check to see if vector is roughly zero, based on the `epsilon` precision value.
## toString
Two.Vector.toString
__Returns__: String
Return a comma-separated string of x, y value. Great for storing in a database.
## toObject
Two.Vector.toObject
__Returns__: Object
Return a JSON compatible plain object that represents the vector.
## rotate
================================================
FILE: wiki/donate/README.md
================================================
Two.Vector.rotate
| Argument | Description |
| ---- | ----------- |
| radians | The amount to rotate the vector by in radians. |
Rotate a vector.
#### Even More References There are many more examples that exist out on the internet. Some starting points are: - [Two.js Collection on Codepen](https://codepen.io/collection/DRdLJk) - [A Beginner's Guide to Drawing 2D Graphics With Two.js](https://code.tutsplus.com/tutorials/a-beginners-guide-to-drawing-2d-graphics-using-twojs--cms-31681) - [Drawing and Animating with Two.js and Illustrator](https://modernweb.com/drawing-and-animating-with-two-js-and-illustrator/) - [Two.js tutor as a ChatGPT bot](https://chatgpt.com/g/g-hkcTX8uPm-two-js-tutor) ================================================ FILE: wiki/incident-response-plan/README.md ================================================ --- pageClass: fine-print title: Two.js Incident Response Plan lang: en-US --- # Incident Response Plan ### Principles: - **Transparency:** All incidents and fixes are documented here for the community. - **Stewardship:** Take responsibility for protecting users and the project. - **Protection:** Act to minimize harm and provide guidance. # How Two.js Handles Incidents ### 1. Detection & Triage - We monitor security reports sent via [security](/security) outreach, GitHub advisories, issues, and npm notifications. - If we spot a bug or report that looks like a security risk, we treat it as an incident. ### 2. Assessment - Check the severity: - **Critical:** npm package or repo compromised, malicious code, supply chain attack. - **High:** Vulnerabilities that allow code execution, XSS, or leak secrets. - **Medium:** Denial of service, memory leaks, or integrity issues. - **Low:** Docs defacement, minor regressions. ### 3. Response - Acknowledge the report (privately if sensitive, publicly if not). - For critical/high issues: - Rotate any exposed secrets/tokens. - Patch the bug or vulnerability. - Deprecate or yank affected npm versions if needed. - Rebuild and redeploy docs/site from a clean commit. - For medium/low issues: - Patch and document the fix. ### 4. Communication - Update this wiki page with a summary of the incident and the fix. - For major issues, we post a GitHub Release note and a pinned Issue. - Provide upgrade or mitigation steps for users. ### 5. Recovery & Hardening - After fixing, review what happened and update this process if needed. - Add tests or automation to prevent similar issues. - Rotate credentials and check repo/npm security settings.
--- # Recent Incidents & Fixes
- None at this time
--- **If you spot a security issue, please report it via [security](/security) outreach. We’ll respond as quickly as possible.** ================================================ FILE: wiki/privacy/README.md ================================================ # Privacy Policy - Library: Two.js library code does not collect or send user data. - Website: This docs site uses Google Analytics (GA4). - Fonts: Third party fonts are provided by Adobe through Typekit - Data Collected (website): Page views, browser/device info, approximate location; no user accounts. - Retention: Analytics event data retained for up to 14 months. - Data Processors: Google (Analytics). Standard Contractual Clauses apply; see Google’s DPA. - Your Rights: Access, deletion, portability (where applicable). To exercise rights, contact [inquiries+two.js@jono.fyi](mailto:inquiries+two.js@jono.fyi). - Contact: [inquiries+two.js@jono.fyi](inquiries+two.js@jono.fyi) ================================================ FILE: wiki/security/README.md ================================================ --- pageClass: fine-print title: Two.js Security Policy lang: en-US --- # Notes on Safety When using Two.js or any other client-side rendering library we recommend considering: - Handle untrusted SVGs carefully: Do not load or interpret SVGs from untrusted users without sanitizing. Malicious SVGs can embed external references and scripts. Use an SVG sanitizer and set appropriate `Content-Security-Policy`. - Images and external assets: Prefer same-origin or vetted hosts. Disable `allow-scripts` in any embedders/iframes and avoid inline event handlers. - CSP recommended defaults: Consider a CSP that restricts scripts to self and trusted CDNs, disallows inline/eval, and sets `object-src 'none'`. ::: tip Note The Two.js library does not collect user data. If you embed Two.js in a site that handles user content, apply your own input validation, rate limiting, and abuse reporting workflow. ::: # Security Policy If you have discovered a security vulnerability in this project, please report it privately. **Do not disclose it as a public issue.** This gives us time to work with you to fix the issue before public exposure, reducing the chance that the exploit will be used before a patch is released. **You may submit the report in the following ways:** - Github users can privately report security advisories directly [here](https://github.com/jonobr1/two.js/security/advisories/new) - Send an email to [inquiries+two.js@jono.fyi](mailto:inquiries+two.js@jono.fyi). **Please provide the following information in your report:** - The type of issue (e.g., buffer overflow, SQL injection, or cross-site scripting) - Full paths of source file(s) related to the manifestation of the issue - The location of the affected source code (tag/branch/commit or direct URL) - Any special configuration required to reproduce the issue - Step-by-step instructions to reproduce the issue - Proof-of-concept or exploit code (if possible) - Impact of the issue, including how an attacker might exploit the issue This project is maintained by volunteers on a reasonable-effort basis. As such, we ask that you give us 90 days to work on a fix before public exposure.
---
_Two.js conforms to this [Incident Response Plan](https://two.js.org/incident-response-plan) in moments of security risks._