## Tutorials

If you are just starting out, see the Tour of Scenery

## Get the code

Scenery depends on a few other libraries, and needs to have them checked out as siblings. It is recommended to place all of these inside a containing directory. Make sure you have git installed, then run:

git clone https://github.com/phetsims/sherpa.git
git clone https://github.com/phetsims/chipper.git
git clone https://github.com/phetsims/assert.git
git clone https://github.com/phetsims/axon.git
git clone https://github.com/phetsims/phet-core.git
git clone https://github.com/phetsims/dot.git
git clone https://github.com/phetsims/kite.git
git clone https://github.com/phetsims/scenery.git

For some examples and tests, and to build a custom version, you'll need to install node.js, and grunt-cli. Then,

cd scenery
npm install
grunt

You will now have the built files under build/, and all of the documentation/examples should work locally.

## Dependencies

• jQuery for parts of DOM manipulation.
• Lo-Dash for utility functions, as a replacement for Underscore.js.
• [optional] Canvg, for supporting SVG → Canvas operations, like rendering to Canvas
Internal dependencies:

## Debugging

window.assertions.enableAssert();
window.assertions.enableAssertSlow();


or to disable assertions:

window.assertions.disableAssert();
window.assertions.disableAssertSlow();


## In-Depth Information

See the User Input documentation for handling user-generated events.

For information on Scenery's internal code, see the Implementation Notes.

## Scenery API

### Node

A default node can be created with new scenery.Node(), but usually a parameter object is given, for example new scenery.Node( { x: 20, y: 100 } ). Below are all of the available parameter object options:

#### Node Options

A Node (and Node subtypes) have the following parameter object options available, executed in in the order listed.
• children: A list of children to add (in order)
• cursor: Will display the specified CSS cursor when the mouse is over this Node or one of its descendents. The Scene needs to have input listeners attached with an initialize method first.
• visible: If false, this node (and its children) will not be displayed (or get input events)
• pickable: If false, this node (and its children) will not get input events
• opacity: From 0 (transparent) to 1 (opaque)
• matrix: Sets the transform matrix of the node to the specified dot.Matrix3 value
• translation: Sets the translation of the node to either the specified dot.Vector2 value, or the x,y values from an object (e.g. translation: { x: 1, y: 2 } )
• x: Sets the x-translation of the node
• y: Sets the y-translation of the node
• rotation: Sets the rotation of the node in radians
• scale: Sets the scale of the node. Supports either a number (same x-y scale), or a dot.Vector2 / object with ob.x and ob.y to set the scale for each axis independently
• left: Sets the x-translation so that the left (min X) of the bounding box (in the parent coordinate frame) is at the specified value
• right: Sets the x-translation so that the right (max X) of the bounding box (in the parent coordinate frame) is at the specified value
• top: Sets the y-translation so that the top (min Y) of the bounding box (in the parent coordinate frame) is at the specified value
• bottom: Sets the y-translation so that the bottom (min Y) of the bounding box (in the parent coordinate frame) is at the specified value
• center: Sets the translation so that the center of the bounding box (in the parent coordinate frame) is at the specified dot.Vector2 value
• centerX: Sets the x-translation so that the horizontal center of the bounding box (in the parent coordinate frame) is at the specified value
• centerY: Sets the y-translation so that the vertical center of the bounding box (in the parent coordinate frame) is at the specified value
• renderer: Forces Scenery to use the specific renderer (canvas/svg) to display this node (and if possible, children). Accepts both strings (e.g. 'canvas', 'svg', etc.) or actual Renderer objects (e.g. Renderer.Canvas, Renderer.SVG, etc.)
• rendererOptions: Parameter object that is passed to the created layer, and can affect how the layering process works.
• layerSplit: Forces a split between layers before and after this node (and its children) have been rendered. Useful for performance with Canvas-based renderers.
• mouseArea: Shape (in local coordinate frame) that overrides the 'hit area' for mouse input.
• touchArea: Shape (in local coordinate frame) that overrides the 'hit area' for touch input.
• clipArea: Shape (in local coordinate frame) that causes any graphics outside of the shape to be invisible (for the node and any children).

#### Node Events

A Node (and Node subtypes) extend Axon's Events type, which exposes the following types of events (fired when they either occur or change):
• childInserted: function( childNode, index ) Called when a child is added or inserted, and includes the new index into the children.
• childRemoved: function( childNode, index ) Called when a child is removed and includes the old index into the children.
• bounds: function() Called when the bounds in the parent coordinate frame changes. See bounds.
• localBounds: function() Called when the bounds in the local coordinate frame changes. See localBounds.
• childBounds: function() Called when the bounds of all children in the local coordinate frame changes. See childBounds.
• selfBounds: function() Called when the self bounds change. See selfBounds.
• transform: function() Called when the transform changes.
• visibility: function() Called when the visibility changes.
• opacity: function() Called when the opacity changes.
• clip: function() Called when the clipArea changes.

#### node.children

node.children is a getter/setter linked to node.getChildren() and node.setChildren( children ). This will return a copy of node's array of children, in rendering order (later children render above previous children). Making changes to the returned array will not change node's children.

This can also be used when creating a Node:

#### node.parents

node.parents or node.getParents() will return an array of parent nodes, but order is not significant.

Appends childNode to node's list of children. childNode will be displayed above node and node's other children.

#### node.insertChild( index, childNode )

Inserts childNode into node's children at the specified index. node.insertChild( 0, childNode ) will make childNode the first child, and node.insertChild( node.children.length, childNode ) is the same as node.addChild( childNode ).

#### node.removeChild( childNode )

Removes childNode from node's children.

#### node.removeChildAt( index )

Removes the child node node.children[ index ] from node's children.

#### node.removeAllChildren()

Removes all of the Node's children.

Adds an accessibility peer described by the element and options to the tab order (handled for each instance). element can be either a DOM element (it is used directly, and tabindex is set on it), or an HTML string (which will be duplicated for each instance). The peer can be focused, and peers can be modified to reflect the current state of the node.

Currently if it exists, options.click is called when the peer is activated by the keyboard while focused.

For instance, a toggle button or checkbox should generally use '<input type="checkbox">' for its element.

#### node.detach()

Removes this node from all of its parents.

#### node.cursor

node.cursor is a getter/setter linked to node.getCursor() and node.setCursor( cursor ). By default it is null (default cursor), but this can be set to the string for any CSS cursor value, and some extra Scenery-specified ones below. There is a cursor example page that demos a number of available cursors.

The cursor is updated whenever display.updateDisplay is called, and event initialization like display.initializeStandaloneEvents should be added so Scenery can track the mouse input.

There are some Scenery-specific cursor values that can be set:

• scenery-grab-pointer: attempts to use browser-prefixed 'grab' values (newer), but falls back to the 'pointer' if not available
• scenery-grabbing-pointer: attempts to use browser-prefixed 'grabbing' values (newer), but falls back to the 'pointer' if not available

#### node.mouseArea

Sets an alternative hit region when receiving mouse events. Useful for when there are gaps between children which should still respond to the event.

Accepts both arbitrary shapes (Shape) and bounding boxes (Bounds2).

The mouse area supersedes the hit regions for mouse events of the node itself and its descendants. Setting mouseArea on a Node will cause it to either return no hit (for it or its children when outside of the mouseArea) or this Node as an event target.

#### node.touchArea

Sets an alternative hit region when receiving touch events. Useful for expanding where the user can touch controls.

Accepts both arbitrary shapes (Shape) and bounding boxes (Bounds2).

The touch area supersedes the hit regions for touch events of the node itself and its descendants. Setting touchArea on a Node will cause it to either return no hit (for it or its children when outside of the touchArea) or this Node as an event target.

#### node.clipArea

node.clipArea is a getter/setter linked to node.getClipArea() and node.setClipArea( shape ). Default is null (no clipping), but when the clipArea is set to a Shape, anything outside of the clip area Shape (in the node's local coordinate frame) is not displayed. This clipping affects both the node's own display, and the display of any of its children.

clipArea currently does not affect DOM layers, and the general case can't be added in (CSS clip only allows rectangles currently).

clipArea is not currently compatible with CSS-transformed SVG rendering if the clipArea is on an ancestor of the CSS-transformed Node.

clipArea affects the bounds of the Node, and pointers are not considered "over" a node if they are outside of its clipArea.

#### node.visible

node.visible is a getter/setter linked to node.isVisible() and node.setVisible( boolean ). Nodes are by default visible, but when invisible they will not be displayed and will not be pickable (no input events will be targeted to them).

#### node.pickable

node.pickable is a getter/setter linked to node.isPickable() and node.setPickable( boolean | null ). Pickable can take three values:

• null: (default) pass-through behavior. Hit-testing will prune this subtree if there are no ancestors/descendants with either pickable: true set or with any input listeners
• false: Hit-testing is pruned, nothing under a pickable: false will respond to events or be picked
• true: Hit-testing will not be pruned in this subtree, except for pickable: false cases.

Hit testing is accomplished mainly with node.trailUnderPointer and node.trailUnderPoint, following the above rules. Nodes that are not pickable (pruned) will not have input events targeted to them.

Thus in order for a Node (really, a Trail) to be able to receive input events:

1. If the node or one of its ancestors has pickable: false OR is invisible, the node will not receive events or hit testing
2. If the node or one of its ancestors or descendants is pickable: true OR has an input listener attached, it will receive events or hit testing
3. Otherwise, it will not receive events or hit testing

This is useful for semi-transparent overlays or other visual elements that should be displayed but should not prevent objects below from being manipulated by user input, and the default 'null' value is used to increase performance by ignoring areas that don't need user input.

#### node.opacity

node.opacity is a getter/setter linked to node.getOpacity() and node.setOpacity( opacity ). Opacity should be in the inclusive range of 0 to 1, where 0 is fully transparent, and 1 is fully opaque. opacity controls not only the opacity (alpha) of the node itself, but also all of its children.

#### node.matrix

node.matrix (node.getMatrix(), node.setMatrix( matrix )) gets or sets the transformation matrix associated with the node, of type dot.Matrix3.

#### node.translation

Getting the translation: node.translation or node.getTranslation(). It always returns a dot.Vector2 instance representing the translation part of the node's transform. See dot.Matrix3.getTranslation for more information.

Setting the translation: node.translation = translation, node.setTranslation( translation ) or node.setTranslation( x, y ). In both instances, translation can be either a dot.Vector2 or an object literal like { x: 5, y: 10 }.

#### node.translate( x, y )

Translates the node relatively by x and y. In addition to node.translate( x, y ), node.translate( translation ) can be used, where transform is either a dot.Vector2 or an object like { x: 5, y: 10 }

#### node.x

node.x gets or sets the node's x-translation with node.getX() and node.setX( x ). Accessing node.x is equivalent to node.translation.x, and setting node.x is equivalent to node.setTranslation( x, node.y ).

#### node.y

node.y gets or sets the node's y-translation with node.getY() and node.setY( y ). Accessing node.y is equivalent to node.translation.y, and setting node.y is equivalent to node.setTranslation( node.x, y ).

#### node.rotation

node.rotation gets or sets the node's rotation with node.getRotation() and node.setRotation( radians ). All rotations are handled in radians ($\pi$ is a 180-degree rotation). If you wish to rotate a node by a specific rotation (instead of setting its rotation), use node.rotate

Rotates the node's transform. By default the rotation is appended to the node's transform, but the optional prepend boolean flag can be added for the rotation to be prepended to the node's transform.

#### node.rotateAround( point, angle )

Rotates the node by angle in radians around the dot.Vector2 point. point should be in the node's parent coordinate frame.

#### node.scale( x, y, [prepend] )

Scales the node in each axis. By default the scale is appended to the node's transform, but the optional prepend boolean flag can be added for the scale to be prepended to the node's transform.

node.scale( s ) will scale by s in both dimensions, and is equivalent to node.scale( s, s )

#### node.bounds

Returns the bounding box of this node (and its children) in the parent coordinate frame. Also available with node.getBounds(). It includes all children, regardless of whether they are visible or not.

#### node.selfBounds

Returns the bounding box of this node (without its children) in the local coordinate frame. Also available with node.getSelfBounds().

#### node.childBounds

Returns the bounding box of this node's children (without include the node's selfBounds) in the local coordinate frame. Also available with node.getChildBounds().

#### node.visibleBounds

Returns the bounding box of this node (and its children) in the parent coordinate frame. Also available with node.getVisibleBounds(). Unlike bounds, this includes only descendants which are visible. It is not tracked, so each call will need to traverse the subtree to get the bounds.

#### node.left

node.left gets or sets the left bound (minimum x value) of this node's bounds in the parent coordinate frame, with node.getLeft() and node.setLeft( x ). Setting this left bound effectively translates the node horizontally.

#### node.right

node.right gets or sets the right bound (maximum x value) of this node's bounds in the parent coordinate frame, with node.getRight() and node.setRight( x ). Setting this right bound effectively translates the node horizontally.

#### node.top

node.top gets or sets the top bound (minimum y value) of this node's bounds in the parent coordinate frame, with node.getTop() and node.setTop( y ). Setting this top bound effectively translates the node vertically.

#### node.bottom

node.bottom gets or sets the bottom bound (maximum y value) of this node's bounds in the parent coordinate frame, with node.getBottom() and node.setBottom( y ). Setting this bottom bound effectively translates the node vertically.

#### node.center

node.center gets or sets the center of this node's bounds in the parent coordinate frame, with node.getCenter() and node.setCenter( center ), which both handle the center as a dot.Vector2 instance. Setting center effectively translates the node.

#### node.centerX

node.centerX gets or sets the horizontal center of this node's bounds in the parent coordinate frame, with node.getCenterX() and node.setCenterX( x ). Setting centerX effectively translates the node horizontally.

#### node.centerY

node.centerY gets or sets the vertical center of this node's bounds in the parent coordinate frame, with node.getCenterY() and node.setCenterY( y ). Setting centerY effectively translates the node vertically.

#### node.renderer

node.renderer gets or sets the preferred rendering backend for the node (and children) using node.getRenderer() or node.setRenderer( renderer ).

It will always return a Renderer object back, but setting the renderer can be done either with an Renderer reference or a string (either 'canvas', 'svg', 'dom' or 'webgl'). Manually specifying a renderer may preclude future performance/quality tradeoffs from being automatically made.

Setting a renderer will have this node and its children use that renderer if they support it. This may be impossible (for instance, Paths do not support the 'dom' renderer, and DOM nodes do not support the 'canvas' renderer).

This renderer (if non-null) will override any renderers set on ancestor nodes. Effectively, a node's renderer will be decided by whatever the closest ancestor renderer that is compatible, or the scene default.

node.hasRenderer() is a convenience function to determine if this is set on the node.

#### node.rendererOptions

node.rendererOptions gets or sets options for the specified renderer using node.getRendererOptions() or node.setRendererOptions( renderer ). Setting rendererOptions without setting renderer will have no effect, and may in future versions throw an error. If this option and the renderer is set, this node will have layer boundaries inserted before and after.

#### node.layerSplit

Setter backed by node.setLayerSplit( boolean ) that, when to true will cause anything rendered before or after to be in a separate layer from this node and its children.

### Display

The Display is responsible for visually displaying a specific root Node and all of its descendants. It is created with new scenery.Display( node, [options] ), where node is the Node to display, and the options available are documented below. Unlike earlier versions, the Display is NOT a sub-type of Node, and the root node may be referred to as the 'scene'.

#### Display Options

A Display has the following options for the parameter object:
• allowSceneOverflow (default false): usually anything displayed outside of this \$main (DOM/CSS3 transformed SVG) is hidden with CSS overflow
• allowCSSHacks (default true): applies styling that prevents mobile browser graphical issues
• enablePointerEvents (default true): allows pointer events / MSPointerEvent to be used on supported platforms.
• allowWebGL (default true): sets whether WebGL can be used.
• width (default currentWidth): override the main container's width
• height (default currentHeight): override the main container's height

#### display.domElement

The Display's block-level DOM element that will show all rendered content, to be added to the DOM.

#### display.updateDisplay()

This redraws and/or repositions whatever rendering backends are being used to display the scene. It should be called whenever the scene's display should reflect new changes, generally on each requestAnimationFrame.

#### display.rootNode

display.rootNode or display.getRootNode() will contain the displayed node that was passed in the constructor.

#### display.size

display.size is a getter/setter for display.getSize() and display.setSize( size ) which can retrieve or set the size of the display's DOM element (of type Dimension2). The size will not change until after the next updateDisplay call.

#### display.width

display.width is a getter/setter for display.getWidth() and display.setWidth( width ) which can retrieve or set the width of the display's DOM element. The width will not change until after the next updateDisplay call.

#### display.height

display.height is a getter/setter for display.getHeight() and display.setHeight( height ) which can retrieve or set the height of the display's DOM element. The height will not change until after the next updateDisplay call.

#### display.backgroundColor

display.backgroundColor is a getter/setter for display.getBackgroundColor() and display.setBackgroundColor( backgroundColor ) which can retrieve or set the background color (String or Color) of the display's DOM element (defaults to transparent). The background color will not change until after the next updateDisplay call.

### Paintable

A mix-in for Node subtypes that can be filled and/or stroked with a color/gradient/pattern.

#### fill

Paintable nodes provide a single node.fill getter and setter that uses node.getFill() and node.setFill( fill ). node.hasFill() is also available as a quick check, and a null fill is interpreted as not having a fill.

fill can currently be either a string (interpreted as a CSS color), a Color object, or an instance of a LinearGradient, RadialGradient or Pattern.

If a Color object is used for a fill, any changes to the Color object will update this node.

#### fillPickable

node.fillPickable is a getter/setter linked to node.isFillPickable() and node.setFillPickable( boolean ). Paths or other Paintable objects will be considered to be under a Pointer when it is over the region where the fill is painted. This defaults to true.

NOTE: Text nodes currently do not respect this setting, since there is no easy/fast way of determining whether a point is inside or outside of a Text node's painted region.

#### stroke

node.stroke is a getter and setter that uses node.getStroke() and node.setStroke( stroke ). node.hasStroke() is also available as a quick check, and a null stroke is interpreted as not having a stroke.

stroke can currently be either a string (interpreted as a CSS color), a Color object, or an instance of a LinearGradient, RadialGradient or Pattern.

If a Color object is used for a stroke, any changes to the Color object will update this node.

#### strokePickable

node.strokePickable is a getter/setter linked to node.isStrokePickable() and node.setStrokePickable( boolean ). Paths or other Paintable objects will be considered to be under a Pointer when it is over the region where the stroke is painted. This defaults to false, as it is generally more computationally expensive, and Scenery did not support this initially.

NOTE: Text nodes currently do not respect this setting, since there is no easy/fast way of determining whether a point is inside or outside of a Text node's painted region.

#### lineWidth

node.lineWidth (node.getLineWidth(), node.setLineWidth( lineWidth )) controls the thickness of the stroke.

#### lineCap

node.lineCap (node.getLineCap(), node.setLineCap( lineCap )) controls the shape of end-caps, and uses the Canvas lineCap definitions of 'butt' (default), 'round' and 'square'.

#### lineJoin

node.lineJoin (node.getLineJoin(), node.setLineJoin( lineJoin )) controls the shape of segment joins, and uses the Canvas lineJoin definitions of 'miter' (default), 'round' and 'bevel'.

#### lineDash

node.lineDash (node.getLineDash(), node.setLineDash( lineDash )) controls any dashing of the stroke (or null for no dashing), and uses the Canvas setLineDash handling as an even-length array of dash lengths.

#### lineDashOffset

node.lineDashOffset (node.getLineDashOffset(), node.setLineDashOffset( lineDashOffset )) controls the how far the dash pattern in lineDash is offset from the start, same as the Canvas lineDashOffset.

#### cachedPaints

node.cachedPaints (node.getCachedPaints(), node.setCachedPaints( paints )) controls an array of paints (LinearGradients, RadialGradients, and Patterns) that will be kept in-memory when the node is being displayed. This allows for much faster performance switching to/from these paints. For instance, in SVG the gradients will be kept in the <defs> section even while not being used, so they don't have to be recreated when switched to (where we have seen major performance drops in the past).

Additionally, node.addCachedPaint( paint ) and node.removeCachedPaint( paint ) exist to be able to manipulate the cached paints without redoing all of them.

### Path

Path is a Node subtype that includes the Paintable mixin. The main displayed behavior is controlled by its single additional option shape along with the fill and stroke options.

A path is constructed with new scenery.Path( options ), where options is the standard Node parameter object, where the shape should be specified.

#### shape

node.shape (node.getShape(), node.setShape( shape )) controls the shape of this path, and is either an instance of Kite's Shape, or it is a string representing an SVG path, and will be converted into a Shape.

### Image

Image is a Node subtype that displays a single image in either Canvas, SVG or DOM. An image node is constructed with new scenery.Image( image, [options] ), where image is as described in image, and options is the normal options parameter object.

#### image

node.image (node.getImage(), node.setImage( image )) gets or sets the 'image' of the Image node. It can be one of the following:

• A String, treated as a URL and loads the image. Bounds-based mutators like left and centerY will not work, since the image will not have the correct dimensions on node construction.
• A HTMLImageElement will be used directly. If the image is not loaded yet, the bounds-based mutators (as noted above for the String case) will not work properly.
• A HTMLCanvasElement can also be used, but will force the node to use a Canvas renderer.

### Text

Text is a Node subtype that (currently) displays a single line of text in Canvas or SVG. DOM and multiline support is planned. It also mixes in Paintable, so it supports fills and strokes with colors, gradients and patterns. The default fill is '#000', so text is black by default, with no stroke, so to JUST stroke text, set fill to null.

Text nodes are constructed with new scenery.Text( text, [options] ), where text is described by text, and options is the standard Node parameter object.

#### Text Options

A Text node has the following parameter object options, in addition to the ones from Paintable.

#### text

node.text (node.getText(), node.setText( string )) gets or sets the string text.

#### font

node.font (node.getFont(), node.setFont( font )) gets or sets the entire font. This can be a Font object, or a String that is interpreted as a CSS font.

Note that Canvas places restrictions on the possible interpreted values, so only those should be set on a Text node.

#### fontWeight

node.fontWeight (node.getFontWeight(), node.setFontWeight( weight )) gets or sets the font weight by internally forwarding to the Text node's internal Font reference.

Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.

#### fontFamily

node.fontFamily (node.getFontFamily(), node.setFontFamily( family )) gets or sets the font family by internally forwarding to the Text node's internal Font reference.

Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.

#### fontStretch

node.fontStretch (node.getFontStretch(), node.setFontStretch( stretch )) gets or sets the font stretch by internally forwarding to the Text node's internal Font reference.

Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.

#### fontStyle

node.fontStyle (node.getFontStyle(), node.setFontStyle( style )) gets or sets the font style by internally forwarding to the Text node's internal Font reference.

Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.

#### fontSize

node.fontSize (node.getFontSize(), node.setFontSize( size )) gets or sets the font size by internally forwarding to the Text node's internal Font reference.

Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.

#### lineHeight

node.lineHeight (node.getLineHeight(), node.setLineHeight( lineHeight )) gets or sets the line height by internally forwarding to the Text node's internal Font reference.

Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.

#### direction

node.direction (node.getDirection(), node.setDirection( direction )) sets the LTR or RTL direction of the text. It should take on values from Canvas's context.direction, but proper bounds and renderer compatibility is not ensured yet

#### boundsMethod

node.boundsMethod (node.getBoundsMethod(), node.setBoundsMethod( method )) sets what type of method is used for determining Text bounds. Currently, there are three options: "fast" which may be somewhat inaccurate, is much faster, and disables Canvas rendering entirely, "fastCanvas" (default) which is similar but allows Canvas rendering but with dirty region redrawing disabled, or "accurate" which is accurate and supports dirty regions, but is much slower.

### HTMLText

HTMLText behaves exactly like Text, except that it displays the text as unescaped HTML. It will force the DOM renderer (possibly it might also allow the SVG renderer with foreignObject in the future). The "accurate" boundsMethod is also disallowed, since using Canvas for HTML bounds would be extremely inaccurate.

### DOM

DOM is a subtype of Node that positions a DOM element inside the scene using CSS transforms. If the element is attached somewhere else, it will be removed and added into the DOM within the display's container block-level element.

DOM nodes should be constructed by passing in the DOM element, along with a parameter object if desired: new scenery.DOM( element, [options] )

#### element

node.element (node.getElement(), node.setElement( domElement )) controls the displayed DOM element. If the element is a block-level element, it should have a specified width and height.

#### interactive

node.interactive (node.getInteractive(), node.setInteractive( boolean )), when set to true, will signal to Scenery's event system that preventDefault() should not be called on DOM events when the DOM node is the event target.

A LinearGradient can be used in place of a color for any fill or stroke, but is usually done for Paths.

LinearGradient is constructed and used very similarly to Canvas's context.createLinearGradient, with new scenery.LinearGradient( x0, y0, x1, y1 ) where the gradient goes from (x0,y0) to (x1,y1), and then color stops can be added.

Adds a point of color along the gradient, where a ratio of 0 is a color point at (x0,y0) and a ratio of 1 is a color point at (x1,y1).

#### setTransformMatrix( matrix )

Given a Matrix3 for matrix, it will transform the gradient as it is applied. This should only be done before adding it as a fill/stroke to any nodes.

A RadialGradient can be used in place of a color for any fill or stroke, but is usually done for Paths.

RadialGradient is constructed and used very similarly to Canvas's context.createRadialGradient, with new scenery.RadialGradient( x0, y0, r0, x1, y1, r1 ) where the gradient handled between two circles, one centered at (x0,y0) with a radius r0, and the other at (x1,y1) with a radius r1. Due to SVG compatibility, this is slightly constricted, as the smaller circle needs to be completely within the larger circle. Then color stops can be added.

NOTE: Firefox 19 (Win 7) does not currently render "conic" radial gradients correctly (where x0 != x1 or y0 != y1). This does not appear to be the case with Firefox 19 on Mac, but please refrain from those edge-case gradients.

Adds a point of color along the gradient, where a ratio of 0 is a color point at (x0,y0) and a ratio of 1 is a color point at (x1,y1).

#### setTransformMatrix( matrix )

Given a Matrix3 for matrix, it will transform the gradient as it is applied. This should only be done before adding it as a fill/stroke to any nodes.

### Pattern

A Pattern can be used in place of a color for any fill or stroke, but is usually done for Paths.

Pattern is constructed and used very similarly to Canvas's context.createPattern, with new scenery.Pattern( image ) where image is an HTMLImageElement.

#### setTransformMatrix( matrix )

Given a Matrix3 for matrix, it will transform the gradient as it is applied. This should only be done before adding it as a fill/stroke to any nodes.

### Rectangle

Rectangle is a subtype of Path that is more convenient to construct and modify, and contains more optimized drawing routines for Canvas and SVG.

A Rectangle is normally created with new scenery.Rectangle( x, y, width, height, [options] ), but rounded corners can be specified with new scenery.Rectangle( x, y, width, height, arcWidth, arcHeight, [options] ), or all of the parameters can be specified in the options with new scenery.Rectangle( { rectX: _, rectY: _, rectWidth: _, rectHeight: _, ... } )

#### rectX

node.rectX (node.getRectX(), node.setRectX( x )) retrieves or modifies the 'x' parameter of the Rectangle.

#### rectY

node.rectY (node.getRectY(), node.setRectY( y )) retrieves or modifies the 'y' parameter of the Rectangle.

#### rectWidth

node.rectWidth (node.getRectWidth(), node.setRectWidth( width )) retrieves or modifies the 'width' parameter of the Rectangle.

#### rectHeight

node.rectHeight (node.getRectHeight(), node.setRectHeight( height )) retrieves or modifies the 'height' parameter of the Rectangle.

node.cornerRadius (node.getCornerRadius(), node.setCornerRadius( radius )) retrieves or modifies the 'cornerRadius' parameter of the Rectangle. This effectively sets both the cornerXRadius and cornerYRadius at the same time. An assertion will fail if the getter is called while the two corner radii are different.

node.cornerXRadius (node.getCornerXRadius(), node.setCornerXRadius( radius )) retrieves or modifies the 'cornerXRadius' parameter of the Rectangle.

node.cornerYRadius (node.getCornerYRadius(), node.setCornerYRadius( radius )) retrieves or modifies the 'cornerYRadius' parameter of the Rectangle.

### Circle

Circle is a subtype of Path that is more convenient to construct and modify, and contains more optimized drawing routines for SVG.

A Circle is created with new scenery.Circle( radius, [options] ) with the specified radius.

node.radius (node.getRadius(), node.setRadius( radius )) retrieves or modifies the 'radius' parameter of the Circle.

### Line

Line is a subtype of Path that is more convenient to construct and modify, and contains more optimized drawing routines for SVG.

A Line is created with new scenery.Line( x1, y1, x2, y2, [options] ) as a line from (x1,y1) to (x2,y2). Additionally, the constructors new scenery.Line( new Vector2( x1, y1 ), new Vector2( x2, y2 ), [options] ) and new scenery.Line( { x1: x1, y1: y1, x2: x2, y2: y2, [other options] } ) are supported.

#### x1

node.x1 (node.getX1(), node.setX1( x1 )) retrieves or modifies the 'x1' parameter of the Line.

#### y1

node.y1 (node.getY1(), node.setY1( y1 )) retrieves or modifies the 'y1' parameter of the Line.

#### x2

node.x2 (node.getX2(), node.setX2( x2 )) retrieves or modifies the 'x2' parameter of the Line.

#### y2

node.y2 (node.getY2(), node.setY2( y2 )) retrieves or modifies the 'y2' parameter of the Line.

#### p1

node.p1 (node.getPoint1(), node.setPoint1( p1 )) retrieves or modifies the Vector2 (x1,y1) of the Line.

#### p2

node.p2 (node.getPoint2(), node.setPoint2( p2 )) retrieves or modifies the Vector2 (x2,y2) of the Line.

### Font

Font represents a single immutablefont, which can be queried for various parameters, and can be changed.

It can be constructed with new scenery.Font() initialized with the default font '10px sans-serif', new scenery.Font( cssFontString ) initialized with the specified CSS Font, or with a property object new scenery.Font( { ... } ), where any of the Font's properties (font, family, weight, stretch, style, size, and lineHeight) can be present.

For example, new scenery.Font( { size: 16, style: 'italic' } ) and new scenery.Font( 'italic 16px sans-serif' ) are equivalent ways of creating that specific Font instance. In addition:

new scenery.Font().font                      // "10px sans-serif" (the default)
new scenery.Font( { family: 'serif' } ).font // "10px serif"
new scenery.Font( { weight: 'bold' } ).font  // "bold 10px sans-serif"
new scenery.Font( { size: 16 } ).font        // "16px sans-serif"
var font = new scenery.Font( {
family: '"Times New Roman", serif',
style: 'italic',
lineHeight: 10
} );
font.font;                                   // "italic 10px/10 'Times New Roman', serif"
font.family;                                 // "'Times New Roman', serif"
font.weight;                                 // 400 (the default)


#### font

font.font (font.getFont()) retrieves the shorthand CSS 'font' property of the Font object. This property completely specifies all font settings.

#### family

font.family (font.getFamily()) retrieves the CSS 'font-family' property of the Font object.

#### weight

font.weight (font.getWeight()) retrieves the CSS 'font-weight' property of the Font object.

#### stretch

font.stretch (font.getStretch()) retrieves the CSS 'font-stretch' property of the Font object.

#### style

font.style (font.getStyle()) retrieves the CSS 'font-style' property of the Font object.

#### size

font.size (font.getSize()) retrieves the CSS 'font-size' property of the Font object.

#### lineHeight

Deprecated: font.lineHeight (font.getLineHeight()) retrieves the CSS 'line-height' property of the Font object.

### Color

A Color can be constructed either with any valid CSS color (new scenery.Color( cssColorString )), or with components directly (new scenery.Color( red, green blue [, alpha] )) where red/green/blue are 0-255, and alpha is 0-1.

Color operations will assume that the color is not pre-multiplied.

#### red

color.red (color.getRed(), color.setRed( redInt )) retrieves or modifies the red component of the color. It will be returned or converted to an integral value between 0-255 (inclusive).

#### green

color.green (color.getGreen(), color.setGreen( greenInt )) retrieves or modifies the green component of the color. It will be returned or converted to an integral value between 0-255 (inclusive).

#### blue

color.blue (color.getBlue(), color.setBlue( blueInt )) retrieves or modifies the blue component of the color. It will be returned or converted to an integral value between 0-255 (inclusive).

#### alpha

color.alpha (color.getAlpha(), color.setAlpha( alphaFloat )) retrieves or modifies the alpha component of the color. It will be returned or converted to an integral value between 0-1 (inclusive).

#### toCSS()

Returns a CSS value for the color, currently using 'rgb' or 'rgba'.