API Documentation for: 1.0.0
Show:

Text Class

Extends DisplayObject
Defined in: Text:41
Module: EaselJS

Display one or more lines of dynamic text (not user editable) in the display list. Line wrapping support (using the lineWidth) is very basic, wrapping on spaces and tabs only. Note that as an alternative to Text, you can position HTML text above or below the canvas relative to items in the display list using the localToGlobal method, or using DOMElement.

Please note that Text does not support HTML text, and can only display one font style at a time. To use multiple font styles, you will need to create multiple text instances, and position them manually.

Example

 var text = new createjs.Text("Hello World", "20px Arial", "#ff7700");
 text.x = 100;
 text.textBaseline = "alphabetic";

CreateJS Text supports web fonts (the same rules as Canvas). The font must be loaded and supported by the browser before it can be displayed.

Note: Text can be expensive to generate, so cache instances where possible. Be aware that not all browsers will render Text exactly the same.

Constructor

Text

(
  • [text]
  • [font]
  • [color]
)

Defined in Text:41

Parameters:

  • [text] String optional

    The text to display.

  • [font] String optional

    The font style to use. Any valid value for the CSS font attribute is acceptable (ex. "bold 36px Arial").

  • [color] String optional

    The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex. "#F00", "red", or "#FF0000").

Methods

_applyShadow

(
  • ctx
  • shadow
)
protected

Parameters:

  • ctx CanvasRenderingContext2D
  • shadow Shadow

_cloneProps

(
  • o
)
Text protected

Inherited from DisplayObject but overwritten in _cloneProps:298

Parameters:

Returns:

Text:

o

_dispatchEvent

(
  • eventObj
  • eventPhase
)
protected

Parameters:

_drawText

(
  • ctx
  • o
  • lines
)
Object protected

Defined in _drawText:330

Draws multiline text.

Parameters:

Returns:

_drawTextLine

(
  • ctx
  • text
  • y
)
protected

Defined in _drawTextLine:392

Parameters:

_getBounds

(
  • matrix
  • ignoreTransform
)
Rectangle protected

Inherited from DisplayObject: _getBounds:1320

Parameters:

  • matrix Matrix2D
  • ignoreTransform Boolean

    If true, does not apply this object's transform.

Returns:

_getMeasuredWidth

(
  • text
)
protected

Parameters:

_getStage

() Stage protected

Inherited from DisplayObject: _getStage:677

Use the stage property instead.

Returns:

_getWorkingContext

(
  • ctx
)
CanvasRenderingContext2D protected

Parameters:

  • ctx CanvasRenderingContext2D

Returns:

CanvasRenderingContext2D:

_isMouseOpaque

() Boolean protected

Indicates whether the display object has any mouse event listeners or a cursor.

Returns:

_testHit

(
  • ctx
)
Boolean protected

Inherited from DisplayObject: _testHit:1303

Parameters:

  • ctx CanvasRenderingContext2D

Returns:

_tick

(
  • evtObj
)
protected

Inherited from DisplayObject: _tick:1287

Parameters:

  • evtObj Object

    An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.

_transformBounds

(
  • bounds
  • matrix
  • ignoreTransform
)
Rectangle protected

Parameters:

Returns:

_updateState

() protected

Called before the object gets drawn and is a chance to ensure the display state of the object is correct. Mostly used by MovieClip and BitmapText to correct their internal state and children prior to being drawn.

Is manually called via draw in a Stage but is automatically called when present in a StageGL instance.

addEventListener

(
  • type
  • listener
  • [useCapture]
)
Function | Object

Adds the specified event listener. Note that adding multiple listeners to the same function will result in multiple callbacks getting fired.

Example

 displayObject.addEventListener("click", handleClick);
 function handleClick(event) {
    // Click happened.
 }

Parameters:

  • type String

    The string type of the event.

  • listener Function | Object

    An object with a handleEvent method, or a function that will be called when the event is dispatched.

  • [useCapture] Boolean optional

    For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

Returns:

Function | Object:

Returns the listener for chaining or assignment.

cache

(
  • x
  • y
  • width
  • height
  • [scale=1]
  • [options=undefined]
)

Inherited from DisplayObject: cache:803

Draws the display object into a new element, which is then used for subsequent draws. Intended for complex content that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape), this can provide for much faster rendering because the content does not need to be re-rendered each tick. The cached display object can be moved, rotated, faded, etc freely, however if its content changes, you must manually update the cache by calling updateCache() again. You must specify the cached area via the x, y, w, and h parameters. This defines the rectangle that will be rendered and cached using this display object's coordinates.

Example

For example if you defined a Shape that drew a circle at 0, 0 with a radius of 25:

 var shape = new createjs.Shape();
 shape.graphics.beginFill("#ff0000").drawCircle(0, 0, 25);
 shape.cache(-25, -25, 50, 50);

Note that filters need to be defined before the cache is applied or you will have to call updateCache after application. Check out the Filter class for more information. Some filters (ex. BlurFilter) may not work as expected in conjunction with the scale param.

Usually, the resulting cacheCanvas will have the dimensions width scale, height scale, however some filters (ex. BlurFilter) will add padding to the canvas dimensions.

In previous versions caching was handled on DisplayObject but has since been moved to BitmapCache. This allows for easier interaction and alternate cache methods like WebGL with StageGL. For more information on the options object, see the BitmapCache define.

Parameters:

  • x Number

    The x coordinate origin for the cache region.

  • y Number

    The y coordinate origin for the cache region.

  • width Number

    The width of the cache region.

  • height Number

    The height of the cache region.

  • [scale=1] Number optional

    The scale at which the cache will be created. For example, if you cache a vector shape using myShape.cache(0,0,100,100,2) then the resulting cacheCanvas will be 200x200 px. This lets you scale and rotate cached elements with greater fidelity. Default is 1.

  • [options=undefined] Object optional

    Specify additional parameters for the cache logic

clone

() Text

Inherited from DisplayObject but overwritten in clone:278

Returns a clone of the Text instance.

Returns:

Text:

a clone of the Text instance.

dispatchEvent

(
  • eventObj
  • [bubbles]
  • [cancelable]
)
Boolean

Dispatches the specified event to all listeners.

Example

 // Use a string event
 this.dispatchEvent("complete");

 // Use an Event instance
 var event = new createjs.Event("progress");
 this.dispatchEvent(event);

Parameters:

  • eventObj Object | String | Event

    An object with a "type" property, or a string type. While a generic object will work, it is recommended to use a CreateJS Event instance. If a string is used, dispatchEvent will construct an Event instance if necessary with the specified type. This latter approach can be used to avoid event object instantiation for non-bubbling events that may not have any listeners.

  • [bubbles] Boolean optional

    Specifies the bubbles value when a string was passed to eventObj.

  • [cancelable] Boolean optional

    Specifies the cancelable value when a string was passed to eventObj.

Returns:

Boolean:

Returns false if preventDefault() was called on a cancelable event, true otherwise.

draw

(
  • ctx
  • ignoreCache
)

Inherited from DisplayObject but overwritten in draw:198

Draws the Text into the specified context ignoring its visible, alpha, shadow, and transform. Returns true if the draw was handled (useful for overriding functionality). NOTE: This method is mainly for internal use, though it may be useful for advanced uses.

Parameters:

  • ctx CanvasRenderingContext2D

    The canvas 2D context object to draw into.

  • ignoreCache Boolean

    Indicates whether the draw operation should ignore any current cache. For example, used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).

getBounds

() Rectangle

Inherited from DisplayObject: getBounds:1100

Returns a rectangle representing this object's bounds in its local coordinate system (ie. with no transformation). Objects that have been cached will return the bounds of the cache.

Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use setBounds so that they are included when calculating Container bounds.

All All display objects support setting bounds manually using setBounds(). Likewise, display objects that have been cached using cache() will return the bounds of their cache. Manual and cache bounds will override the automatic calculations listed below.
Bitmap Returns the width and height of the Bitmap/sourceRect (if specified) or image, extending from (x=0,y=0).
Sprite Returns the bounds of the current frame. May have non-zero x/y if a frame registration point was specified in the spritesheet data. See also getFrameBounds
Container Returns the aggregate (combined) bounds of all children that return a non-null value from getBounds().
Shape Does not currently support automatic bounds calculations. Use setBounds() to manually define bounds.
Text Returns approximate bounds. Horizontal values (x/width) are quite accurate, but vertical values (y/height) are not, especially when using textBaseline values other than "top".
BitmapText Returns approximate bounds. Values will be more accurate if spritesheet frame registration points are close to (x=0,y=0).

Bounds can be expensive to calculate for some objects (ex. text, or containers with many children), and are recalculated each time you call getBounds(). You can prevent recalculation on static objects by setting the bounds explicitly:

var bounds = obj.getBounds();
obj.setBounds(bounds.x, bounds.y, bounds.width, bounds.height);
// getBounds will now use the set values, instead of recalculating

To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its values if you need to retain it.

var myBounds = obj.getBounds().clone();
// OR:
myRect.copy(obj.getBounds());

Returns:

Rectangle:

A Rectangle instance representing the bounds, or null if bounds are not available for this object.

getCacheDataURL

() String

Returns a data URL for the cache, or null if this display object is not cached. Only generated if the cache has changed, otherwise returns last result.

Returns:

String:

The image data url for the cache.

getConcatenatedDisplayProps

(
  • [props]
)
DisplayProps

Generates a DisplayProps object representing the combined display properties of the object and all of its parent Containers up to the highest level ancestor (usually the Stage).

Parameters:

  • [props] DisplayProps optional

    A DisplayProps object to populate with the calculated values. If null, a new DisplayProps object is returned.

Returns:

DisplayProps:

The combined display properties.

getConcatenatedMatrix

(
  • [matrix]
)
Matrix2D

Generates a Matrix2D object representing the combined transform of the display object and all of its parent Containers up to the highest level ancestor (usually the Stage). This can be used to transform positions between coordinate spaces, such as with localToGlobal and globalToLocal.

Parameters:

  • [matrix] Matrix2D optional

    A Matrix2D object to populate with the calculated values. If null, a new Matrix2D object is returned.

Returns:

Matrix2D:

The combined matrix.

getMatrix

(
  • matrix
)
Matrix2D

Inherited from DisplayObject: getMatrix:1002

Returns a matrix based on this object's current transform.

Parameters:

  • matrix Matrix2D

    Optional. A Matrix2D object to populate with the calculated values. If null, a new Matrix object is returned.

Returns:

Matrix2D:

A matrix representing this display object's transform.

getMeasuredHeight

() Number

Returns the approximate height of multi-line text by multiplying the number of lines against either the lineHeight (if specified) or getMeasuredLineHeight. Note that this operation requires the text flowing logic to run, which has an associated CPU cost.

Returns:

Number:

The approximate height of the untransformed multi-line text.

getMeasuredLineHeight

() Number

Returns an approximate line height of the text, ignoring the lineHeight property. This is based on the measured width of a "M" character multiplied by 1.2, which provides an approximate line height for most fonts.

Returns:

Number:

an approximate line height of the text, ignoring the lineHeight property. This is based on the measured width of a "M" character multiplied by 1.2, which approximates em for most fonts.

getMeasuredWidth

() Number

Returns the measured, untransformed width of the text without wrapping. Use getBounds for a more robust value.

Returns:

Number:

The measured, untransformed width of the text.

getMetrics

() Object

Defined in getMetrics:263

Returns an object with width, height, and lines properties. The width and height are the visual width and height of the drawn text. The lines property contains an array of strings, one for each line of text that will be drawn, accounting for line breaks and wrapping. These strings have trailing whitespace removed.

Returns:

Object:

An object with width, height, and lines properties.

getStage

() deprecated

Inherited from DisplayObject: getStage:691

Use the stage property instead.

getTransformedBounds

() Rectangle

Returns a rectangle representing this object's bounds in its parent's coordinate system (ie. with transformations applied). Objects that have been cached will return the transformed bounds of the cache.

Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use setBounds so that they are included when calculating Container bounds.

To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its values if you need to retain it.

Container instances calculate aggregate bounds for all children that return bounds via getBounds.

Returns:

Rectangle:

A Rectangle instance representing the bounds, or null if bounds are not available for this object.

globalToLocal

(
  • x
  • y
  • [pt]
)
Point

Transforms the specified x and y position from the global (stage) coordinate space to the coordinate space of the display object. For example, this could be used to determine the current mouse position within the display object. Returns a Point instance with x and y properties correlating to the transformed position in the display object's coordinate space.

Example

 displayObject.x = 300;
 displayObject.y = 200;
 stage.addChild(displayObject);
 var point = displayObject.globalToLocal(100, 100);
 // Results in x=-200, y=-100

Parameters:

  • x Number

    The x position on the stage to transform.

  • y Number

    The y position on the stage to transform.

  • [pt] Point | Object optional

    An object to copy the result into. If omitted a new Point object with x/y properties will be returned.

Returns:

Point:

A Point instance with x and y properties correlating to the transformed position in the display object's coordinate space.

hasEventListener

(
  • type
)
Boolean

Indicates whether there is at least one listener for the specified event type.

Parameters:

  • type String

    The string type of the event.

Returns:

Boolean:

Returns true if there is at least one listener for the specified event.

hitTest

(
  • x
  • y
)
Boolean

Inherited from DisplayObject: hitTest:1053

Tests whether the display object intersects the specified point in local coordinates (ie. draws a pixel with alpha > 0 at the specified position). This ignores the alpha, shadow, hitArea, mask, and compositeOperation of the display object.

Example

 stage.addEventListener("stagemousedown", handleMouseDown);
 function handleMouseDown(event) {
     var hit = myShape.hitTest(event.stageX, event.stageY);
 }

Please note that shape-to-shape collision is not currently supported by EaselJS.

Parameters:

  • x Number

    The x position to check in the display object's local coordinates.

  • y Number

    The y position to check in the display object's local coordinates.

Returns:

Boolean:

A Boolean indicating whether a visible portion of the DisplayObject intersect the specified local Point.

isVisible

() Boolean

Inherited from DisplayObject but overwritten in isVisible:186

Returns true or false indicating whether the display object would be visible if drawn to a canvas. This does not account for whether it would be visible within the boundaries of the stage. NOTE: This method is mainly for internal use, though it may be useful for advanced uses.

Returns:

Boolean:

Whether the display object would be visible if drawn to a canvas

localToGlobal

(
  • x
  • y
  • [pt]
)
Point

Transforms the specified x and y position from the coordinate space of the display object to the global (stage) coordinate space. For example, this could be used to position an HTML label over a specific point on a nested display object. Returns a Point instance with x and y properties correlating to the transformed coordinates on the stage.

Example

 displayObject.x = 300;
 displayObject.y = 200;
 stage.addChild(displayObject);
 var point = displayObject.localToGlobal(100, 100);
 // Results in x=400, y=300

Parameters:

  • x Number

    The x position in the source display object to transform.

  • y Number

    The y position in the source display object to transform.

  • [pt] Point | Object optional

    An object to copy the result into. If omitted a new Point object with x/y properties will be returned.

Returns:

Point:

A Point instance with x and y properties correlating to the transformed coordinates on the stage.

localToLocal

(
  • x
  • y
  • target
  • [pt]
)
Point

Transforms the specified x and y position from the coordinate space of this display object to the coordinate space of the target display object. Returns a Point instance with x and y properties correlating to the transformed position in the target's coordinate space. Effectively the same as using the following code with localToGlobal and globalToLocal.

 var pt = this.localToGlobal(x, y);
 pt = target.globalToLocal(pt.x, pt.y);

Parameters:

  • x Number

    The x position in the source display object to transform.

  • y Number

    The y position on the source display object to transform.

  • target DisplayObject

    The target display object to which the coordinates will be transformed.

  • [pt] Point | Object optional

    An object to copy the result into. If omitted a new Point object with x/y properties will be returned.

Returns:

Point:

Returns a Point instance with x and y properties correlating to the transformed position in the target's coordinate space.

off

(
  • type
  • listener
  • [useCapture]
)

Inherited from EventDispatcher: off:249

A shortcut to the removeEventListener method, with the same parameters and return value. This is a companion to the .on method.

IMPORTANT: To remove a listener added with on, you must pass in the returned wrapper function as the listener. See on for an example.

Parameters:

  • type String

    The string type of the event.

  • listener Function | Object

    The listener function or object.

  • [useCapture] Boolean optional

    For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

on

(
  • type
  • listener
  • [scope]
  • [once=false]
  • [data]
  • [useCapture=false]
)
Function

Inherited from EventDispatcher: on:173

A shortcut method for using addEventListener that makes it easier to specify an execution scope, have a listener only run once, associate arbitrary data with the listener, and remove the listener.

This method works by creating an anonymous wrapper function and subscribing it with addEventListener. The wrapper function is returned for use with removeEventListener (or off).

IMPORTANT: To remove a listener added with on, you must pass in the returned wrapper function as the listener, or use remove. Likewise, each time you call on a NEW wrapper function is subscribed, so multiple calls to on with the same params will create multiple listeners.

Example

    var listener = myBtn.on("click", handleClick, null, false, {count:3});
    function handleClick(evt, data) {
        data.count -= 1;
        console.log(this == myBtn); // true - scope defaults to the dispatcher
        if (data.count == 0) {
            alert("clicked 3 times!");
            myBtn.off("click", listener);
            // alternately: evt.remove();
        }
    }

Parameters:

  • type String

    The string type of the event.

  • listener Function | Object

    An object with a handleEvent method, or a function that will be called when the event is dispatched.

  • [scope] Object optional

    The scope to execute the listener in. Defaults to the dispatcher/currentTarget for function listeners, and to the listener itself for object listeners (ie. using handleEvent).

  • [once=false] Boolean optional

    If true, the listener will remove itself after the first time it is triggered.

  • [data] optional

    Arbitrary data that will be included as the second parameter when the listener is called.

  • [useCapture=false] Boolean optional

    For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

Returns:

Function:

Returns the anonymous function that was created and assigned as the listener. This is needed to remove the listener later using .removeEventListener.

removeAllEventListeners

(
  • [type]
)

Removes all listeners for the specified type, or all listeners of all types.

Example

 // Remove all listeners
 displayObject.removeAllEventListeners();

 // Remove all click listeners
 displayObject.removeAllEventListeners("click");

Parameters:

  • [type] String optional

    The string type of the event. If omitted, all listeners for all types will be removed.

removeEventListener

(
  • type
  • listener
  • [useCapture]
)

Removes the specified event listener.

Important Note: that you must pass the exact function reference used when the event was added. If a proxy function, or function closure is used as the callback, the proxy/closure reference must be used - a new proxy or closure will not work.

Example

 displayObject.removeEventListener("click", handleClick);

Parameters:

  • type String

    The string type of the event.

  • listener Function | Object

    The listener function or object.

  • [useCapture] Boolean optional

    For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

set

(
  • props
)
DisplayObject chainable

Inherited from DisplayObject: set:1082

Provides a chainable shortcut method for setting a number of properties on the instance.

Example

 var myGraphics = new createjs.Graphics().beginFill("#ff0000").drawCircle(0, 0, 25);
 var shape = stage.addChild(new Shape()).set({graphics:myGraphics, x:100, y:100, alpha:0.5});

Parameters:

  • props Object

    A generic object containing properties to copy to the DisplayObject instance.

Returns:

DisplayObject:

Returns the instance the method is called on (useful for chaining calls.)

setBounds

(
  • x
  • y
  • width
  • height
)

Inherited from DisplayObject: setBounds:1185

Allows you to manually specify the bounds of an object that either cannot calculate their own bounds (ex. Shape & Text) for future reference, or so the object can be included in Container bounds. Manually set bounds will always override calculated bounds.

The bounds should be specified in the object's local (untransformed) coordinates. For example, a Shape instance with a 25px radius circle centered at 0,0 would have bounds of (-25, -25, 50, 50).

Parameters:

  • x Number

    The x origin of the bounds. Pass null to remove the manual bounds.

  • y Number

    The y origin of the bounds.

  • width Number

    The width of the bounds.

  • height Number

    The height of the bounds.

setTransform

(
  • [x=0]
  • [y=0]
  • [scaleX=1]
  • [scaleY=1]
  • [rotation=0]
  • [skewX=0]
  • [skewY=0]
  • [regX=0]
  • [regY=0]
)
DisplayObject chainable

Shortcut method to quickly set the transform properties on the display object. All parameters are optional. Omitted parameters will have the default value set.

Example

 displayObject.setTransform(100, 100, 2, 2);

Parameters:

  • [x=0] Number optional

    The horizontal translation (x position) in pixels

  • [y=0] Number optional

    The vertical translation (y position) in pixels

  • [scaleX=1] Number optional

    The horizontal scale, as a percentage of 1

  • [scaleY=1] Number optional

    the vertical scale, as a percentage of 1

  • [rotation=0] Number optional

    The rotation, in degrees

  • [skewX=0] Number optional

    The horizontal skew factor

  • [skewY=0] Number optional

    The vertical skew factor

  • [regX=0] Number optional

    The horizontal registration point in pixels

  • [regY=0] Number optional

    The vertical registration point in pixels

Returns:

DisplayObject:

Returns this instance. Useful for chaining commands.

toString

() String

Inherited from EventDispatcher but overwritten in toString:287

Returns a string representation of this object.

Returns:

String:

a string representation of the instance.

uncache

()

Inherited from DisplayObject: uncache:875

Clears the current cache. See cache for more information.

updateCache

(
  • compositeOperation
)

Inherited from DisplayObject: updateCache:846

Redraws the display object to its cache. Calling updateCache without an active cache will throw an error. If compositeOperation is null the current cache will be cleared prior to drawing. Otherwise the display object will be drawn over the existing cache using the specified compositeOperation.

Example

Clear the current graphics of a cached shape, draw some new instructions, and then update the cache. The new line will be drawn on top of the old one.

 // Not shown: Creating the shape, and caching it.
 shapeInstance.clear();
 shapeInstance.setStrokeStyle(3).beginStroke("#ff0000").moveTo(100, 100).lineTo(200,200);
 shapeInstance.updateCache();

In previous versions caching was handled on DisplayObject but has since been moved to BitmapCache. This allows for easier interaction and alternate cache methods like WebGL and StageGL.

Parameters:

updateContext

(
  • ctx
)

Applies this display object's transformation, alpha, globalCompositeOperation, clipping path (mask), and shadow to the specified context. This is typically called prior to draw.

Parameters:

  • ctx CanvasRenderingContext2D

    The canvas 2D to update.

willTrigger

(
  • type
)
Boolean

Indicates whether there is at least one listener for the specified event type on this object or any of its ancestors (parent, parent's parent, etc). A return value of true indicates that if a bubbling event of the specified type is dispatched from this object, it will trigger at least one listener.

This is similar to hasEventListener, but it searches the entire event flow for a listener, not just this object.

Parameters:

  • type String

    The string type of the event.

Returns:

Boolean:

Returns true if there is at least one listener for the specified event.

Properties

_bounds

Rectangle protected

Inherited from DisplayObject: _bounds:446

Default: null

_cacheDataURL

String deprecated protected

Moved to BitmapCache

Default: null

_cacheDataURLID

Number deprecated protected

Moved to BitmapCache

Default: 0

_cacheScale

Number deprecated protected

Inherited from DisplayObject: _cacheScale:403

Moved to BitmapCache

Default: 1

_captureListeners

Object protected

_listeners

Object protected

Inherited from EventDispatcher: _listeners:99

_props

DisplayObject protected

Inherited from DisplayObject: _props:430

Default: null

_rectangle

Rectangle protected

Inherited from DisplayObject: _rectangle:438

Default: null

_webGLRenderStyle

Number protected

Where StageGL should look for required display properties, matters only for leaf display objects. Containers or cached objects won't use this property, it's for native display of terminal elements.

Default: 0

_workingContext

CanvasRenderingContext2D private

Defined in _workingContext:156

alpha

Number

Inherited from DisplayObject: alpha:147

The alpha (transparency) for this display object. 0 is fully transparent, 1 is fully opaque.

Default: 1

bitmapCache

BitmapCache readonly

Inherited from DisplayObject: bitmapCache:165

If a cache has been made, this returns the class that is managing the cacheCanvas and its properties. See BitmapCache for more information. Use this to control, inspect, and change the cache. In special circumstances this may be a modified or subclassed BitmapCache.

Default: null

cacheCanvas

HTMLCanvasElement | Object readonly

Inherited from DisplayObject: cacheCanvas:155

If a cache is active, this returns the canvas that holds the image of this display object. See cache for more information. Use this to display the result of a cache. This will be a HTMLCanvasElement unless special cache rules have been deliberately enabled for this cache.

Default: null

cacheID

Number deprecated

Inherited from DisplayObject: cacheID:706

Returns an ID number that uniquely identifies the current cache for this display object. This can be used to determine if the cache has changed since a previous check. Moved to BitmapCache

Default: 0

color

String

Defined in color:89

The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex. "#F00"). Default is "#000". It will also accept valid canvas fillStyle values.

compositeOperation

String

The composite operation indicates how the pixels of this display object will be composited with the elements behind it. If null, this property is inherited from the parent container. For more information, read the whatwg spec on compositing. For a list of supported compositeOperation value, visit the W3C draft on Compositing and Blending.

Default: null

cursor

String

Inherited from DisplayObject: cursor:391

A CSS cursor (ex. "pointer", "help", "text", etc) that will be displayed when the user hovers over this display object. You must enable mouseover events using the enableMouseOver method to use this property. Setting a non-null cursor on a Container will override the cursor set on its descendants.

Default: null

filters

Array

Inherited from DisplayObject: filters:355

An array of Filter objects to apply to this display object. Filters are only applied / updated when Cache or UpdateCache is called on the display object, and only apply to the area that is cached.

Default: null

font

String

Defined in font:82

The font style to use. Any valid value for the CSS font attribute is acceptable (ex. "bold 36px Arial").

H_OFFSETS

Object protected static

Defined in H_OFFSETS:175

Lookup table for the ratio to offset bounds y calculations based on the textBaseline property.

H_OFFSETS

Object protected static

Defined in H_OFFSETS:166

Lookup table for the ratio to offset bounds x calculations based on the textAlign property.

hitArea

DisplayObject

Inherited from DisplayObject: hitArea:374

A display object that will be tested when checking mouse interactions or testing getObjectsUnderPoint. The hit area will have its transformation applied relative to this display object's coordinate space (as though the hit test object were a child of this display object and relative to its regX/Y). The hitArea will be tested using only its own alpha value regardless of the alpha value on the target display object, or the target's ancestors (parents).

If set on a Container, children of the Container will not receive mouse events. This is similar to setting MouseChildren to false.

Note that hitArea is NOT currently used by the hitTest() method, nor is it supported for Stage.

Default: null

id

Number

Inherited from DisplayObject: id:175

Unique ID for this display object. Makes display objects easier for some uses.

Default: -1

lineHeight

Number

Defined in lineHeight:133

Indicates the line height (vertical distance between baselines) for multi-line text. If null or 0, the value of getMeasuredLineHeight is used.

lineWidth

Number

Defined in lineWidth:141

Indicates the maximum width for a line of text before it is wrapped to multiple lines. If null, the text will not be wrapped.

mask

Shape

Inherited from DisplayObject: mask:365

A Shape instance that defines a vector mask (clipping path) for this display object. The shape's transformation will be applied relative to the display object's parent coordinates (as if it were a child of the parent).

Default: null

maxWidth

Number

Defined in maxWidth:116

The maximum width to draw the text. If maxWidth is specified (not null), the text will be condensed or shrunk to make it fit in this width. For detailed information view the whatwg spec.

mouseEnabled

Boolean

Indicates whether to include this object when running mouse interactions. Setting this to false for children of a Container will cause events on the Container to not fire when that child is clicked. Setting this property to false does not prevent the getObjectsUnderPoint method from returning the child.

Note: In EaselJS 0.7.0, the mouseEnabled property will not work properly with nested Containers. Please check out the latest NEXT version in GitHub for an updated version with this issue resolved. The fix will be provided in the next release of EaselJS.

Default: true

name

String

Inherited from DisplayObject: name:208

An optional name for this display object. Included in toString . Useful for debugging.

Default: null

outline

Number

Defined in outline:126

If greater than 0, the text will be drawn as a stroke (outline) of the specified width.

parent

Container final readonly

Inherited from DisplayObject: parent:217

A reference to the Container or Stage object that contains this display object, or null if it has not been added to one.

Default: null

regX

Number

Inherited from DisplayObject: regX:229

The left offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate around its center, you would set regX and regY to 50. Cached object's registration points should be set based on pre-cache conditions, not cached size.

Default: 0

regY

Number

Inherited from DisplayObject: regY:239

The y offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate around its center, you would set regX and regY to 50. Cached object's registration points should be set based on pre-cache conditions, not cached size.

Default: 0

rotation

Number

Inherited from DisplayObject: rotation:249

The rotation in degrees for this display object.

Default: 0

scale

Number

Inherited from DisplayObject: scale:716

Set both the scaleX and the scaleY property to the same value. Note that when you get the value, if the scaleX and scaleY are different values, it will return only the scaleX.

Default: 1

scaleX

Number

Inherited from DisplayObject: scaleX:257

The factor to stretch this display object horizontally. For example, setting scaleX to 2 will stretch the display object to twice its nominal width. To horizontally flip an object, set the scale to a negative number.

Default: 1

scaleY

Number

Inherited from DisplayObject: scaleY:266

The factor to stretch this display object vertically. For example, setting scaleY to 0.5 will stretch the display object to half its nominal height. To vertically flip an object, set the scale to a negative number.

Default: 1

shadow

Shadow

Inherited from DisplayObject: shadow:291

A shadow object that defines the shadow to render on this display object. Set to null to remove a shadow. If null, this property is inherited from the parent container.

Default: null

skewX

Number

Inherited from DisplayObject: skewX:275

The factor to skew this display object horizontally.

Default: 0

skewY

Number

Inherited from DisplayObject: skewY:283

The factor to skew this display object vertically.

Default: 0

snapToPixel

Boolean

Inherited from DisplayObject: snapToPixel:345

Indicates whether the display object should be drawn to a whole pixel when snapToPixelEnabled is true. To enable/disable snapping on whole categories of display objects, set this value on the prototype (Ex. Text.prototype.snapToPixel = true).

Default: true

stage

Stage readonly

Inherited from DisplayObject: stage:699

Returns the Stage instance that this display object will be rendered on, or null if it has not been added to one.

text

String

Defined in text:75

The text to display.

textAlign

String

Defined in textAlign:97

The horizontal text alignment. Any of "start", "end", "left", "right", and "center". For detailed information view the whatwg spec. Default is "left".

textBaseline

String

Defined in textBaseline:107

The vertical alignment point on the font. Any of "top", "hanging", "middle", "alphabetic", "ideographic", or "bottom". For detailed information view the whatwg spec. Default is "top".

tickEnabled

Boolean

Inherited from DisplayObject: tickEnabled:198

If false, the tick will not run on this display object (or its children). This can provide some performance benefits. In addition to preventing the "tick" event from being dispatched, it will also prevent tick related updates on some display objects (ex. Sprite & MovieClip frame advancing, and DOMElement display properties).

Default: true

transformMatrix

Matrix2D

If set, defines the transformation for this display object, overriding all other transformation properties (x, y, rotation, scale, skew).

Default: null

visible

Boolean

Inherited from DisplayObject: visible:300

Indicates whether this display object should be rendered to the canvas and included when running the Stage getObjectsUnderPoint method.

Default: true

x

Number

Inherited from DisplayObject: x:309

The x (horizontal) position of the display object, relative to its parent.

Default: 0

y

Number

Inherited from DisplayObject: y:317

Default: 0

Events

added

Inherited from DisplayObject: added:651

Dispatched when the display object is added to a parent container.

click

Inherited from DisplayObject: click:549

Available since 0.6.0

Dispatched when the user presses their left mouse button and then releases it while over the display object. See the MouseEvent class for a listing of event properties.

dblclick

Inherited from DisplayObject: dblclick:556

Available since 0.6.0

Dispatched when the user double clicks their left mouse button over this display object. See the MouseEvent class for a listing of event properties.

mousedown

Inherited from DisplayObject: mousedown:542

Available since 0.6.0

Dispatched when the user presses their left mouse button over the display object. See the MouseEvent class for a listing of event properties.

mouseout

Inherited from DisplayObject: mouseout:571

Available since 0.6.0

Dispatched when the user's mouse leaves this display object. This event must be enabled using enableMouseOver. See also rollout. See the MouseEvent class for a listing of event properties.

mouseover

Inherited from DisplayObject: mouseover:563

Available since 0.6.0

Dispatched when the user's mouse enters this display object. This event must be enabled using enableMouseOver. See also rollover. See the MouseEvent class for a listing of event properties.

pressmove

Inherited from DisplayObject: pressmove:621

Available since 0.7.0

After a mousedown occurs on a display object, a pressmove event will be generated on that object whenever the mouse moves until the mouse press is released. This can be useful for dragging and similar operations.

Please note that if the initial mouse target from a mousedown event is removed from the stage after being pressed (e.g. during a pressmove event), a pressmove event is still generated. However since it is no longer in the display list, the event can not bubble. This means that previous ancestors (parent containers) will not receive the event, and therefore can not re-dispatch it. If you intend to listen for pressup or pressmove on a dynamic object (such as a MovieClip or Container), then ensure you set mouseChildren to false.

pressup

Inherited from DisplayObject: pressup:636

Available since 0.7.0

After a mousedown occurs on a display object, a pressup event will be generated on that object when that mouse press is released. This can be useful for dragging and similar operations.

Please note that if the initial mouse target from a mousedown event is removed from the stage after being pressed (e.g. during a pressmove event), a pressup event is still generated. However since it is no longer in the display list, the event can not bubble. This means that previous ancestors (parent containers) will not receive the event, and therefore can not re-dispatch it. If you intend to listen for pressmove or pressup on a dynamic object (such as a MovieClip or Container), then ensure you set mouseChildren to false.

removed

Inherited from DisplayObject: removed:656

Dispatched when the display object is removed from its parent container.

rollout

Inherited from DisplayObject: rollout:600

Available since 0.7.0

This event is similar to mouseout, with the following differences: it does not bubble, and it considers Container instances as an aggregate of their content.

For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over shapeA, then directly on to shapeB, then off both. With a listener for Mouseout:event on myContainer, two events would be received, each targeting a child element:

  1. when the mouse leaves shapeA (target=shapeA)
  2. when the mouse leaves shapeB (target=shapeB)
However, with a listener for "rollout" instead, only a single event is received when the mouse leaves the aggregate myContainer content (target=myContainer).

This event must be enabled using enableMouseOver. See the MouseEvent class for a listing of event properties.

rollover

Inherited from DisplayObject: rollover:579

Available since 0.7.0

This event is similar to mouseover, with the following differences: it does not bubble, and it considers Container instances as an aggregate of their content.

For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over shapeA and then directly on to shapeB. With a listener for Mouseover:event on myContainer, two events would be received, each targeting a child element:

  1. when the mouse enters shapeA (target=shapeA)
  2. when the mouse enters shapeB (target=shapeB)
However, with a listener for "rollover" instead, only a single event is received when the mouse first enters the aggregate myContainer content (target=myContainer).

This event must be enabled using enableMouseOver. See the MouseEvent class for a listing of event properties.

tick

Inherited from DisplayObject: tick:661

Available since 0.6.0

Dispatched on each display object on a stage whenever the stage updates. This occurs immediately before the rendering (draw) pass. When update is called, first all display objects on the stage dispatch the tick event, then all of the display objects are drawn to stage. Children will have their Tick:event event dispatched in order of their depth prior to the event being dispatched on their parent.

Event Payload:

  • target Object

    The object that dispatched the event.

  • type String

    The event type.

  • params Array

    An array containing any arguments that were passed to the Stage.update() method. For example if you called stage.update("hello"), then the params would be ["hello"].