A Bitmap represents an Image, Canvas, or Video in the display list. A Bitmap can be instantiated using an existing HTML element, or a string.

Example

var bitmap = new createjs.Bitmap("imagePath.jpg");

Notes:

The source image to display. This can be a CanvasImageSource (image, video, canvas), an object with a getImage method that returns a CanvasImageSource, or a string URL to an image. If the latter, a new Image instance with the URL as its src will be used.

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.

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.
        
Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.
You should not cache Bitmap instances as it can degrade performance.
However: If you want to use a filter on a Bitmap, you MUST cache it, or it will not work.
To see the API for caching, please visit the DisplayObject cache
method.
                        
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.
        
Draws the display object 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.
                        
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).
        
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 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.
        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());
                        Rectangle:
                    
A Rectangle instance representing the bounds, or null if bounds are not available for this
object.
        
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).
        
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.
        
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.
        
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
                        Point:
                    
A Point instance with x and y properties correlating to the transformed position in the
display object's coordinate space.
        
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.
                        Boolean:
                    
A Boolean indicating whether a visible portion of the DisplayObject intersect the specified
local Point.
        
Constructor alias for backwards compatibility. This method will be removed in future versions.
Subclasses should be updated to use Utility Methods/extends.
        
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.
        
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
                        Point:
                    
A Point instance with x and y properties correlating to the transformed coordinates
on the stage.
        
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);
                        Point:
                    
Returns a Point instance with x and y properties correlating to the transformed position
in the target's coordinate space.
        
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.
        
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();
        
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);
        
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});
        
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).
        
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);
        
Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.
You should not cache Bitmap instances as it can degrade performance.
However: If you want to use a filter on a Bitmap, you MUST cache it, or it will not work.
To see the API for caching, please visit the DisplayObject cache
method.
        
Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.
You should not cache Bitmap instances as it can degrade performance.
However: If you want to use a filter on a Bitmap, you MUST cache it, or it will not work.
To see the API for caching, please visit the DisplayObject cache
method.
        
Applies this display object's transformation, alpha, globalCompositeOperation, clipping path (mask), and shadow
to the specified context. This is typically called prior to draw.
        
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.
        
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.
        
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.
        
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.
        
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
        
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.
        
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.
        
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.
        
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.
        
The source image to display. This can be a CanvasImageSource
(image, video, canvas), an object with a getImage method that returns a CanvasImageSource, or a string URL to an image.
If the latter, a new Image instance with the URL as its src will be used.
        
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).
        
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.
        
A reference to the Container or Stage object that
contains this display object, or null if it has not been added
to one.
        
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.
        
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.
        
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.
        
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.
        
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.
        
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.
        
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).
        
Specifies an area of the source image to draw. If omitted, the whole image will be drawn.
Notes:
    
that video sources must have a width / height set to work correctly with sourceRect
    
Cached objects will ignore the sourceRect property
        
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).
        
If set, defines the transformation for this display object, overriding all other transformation properties
(x, y, rotation, scale, skew).
        
Indicates whether this display object should be rendered to the canvas and included when running the Stage
getObjectsUnderPoint method.
        
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.
        
Dispatched when the user presses their left mouse button over the display object. See the 
MouseEvent class for a listing of event properties.
        
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.
        
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.
        
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.
        
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.
        
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:
        
when the mouse leaves shapeA (target=shapeA)
        
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.
        
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:
        
when the mouse enters shapeA (target=shapeA)
        
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.
        
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.