API Documentation for: 1.0.0
Show:

Graphics Class

Defined in: Graphics:41
Module: EaselJS

The Graphics class exposes an easy to use API for generating vector drawing instructions and drawing them to a specified context. Note that you can use Graphics without any dependency on the EaselJS framework by calling draw directly, or it can be used with the Shape object to draw vector graphics within the context of an EaselJS display list.

There are two approaches to working with Graphics object: calling methods on a Graphics instance (the "Graphics API"), or instantiating Graphics command objects and adding them to the graphics queue via append. The former abstracts the latter, simplifying beginning and ending paths, fills, and strokes.

 var g = new createjs.Graphics();
 g.setStrokeStyle(1);
 g.beginStroke("#000000");
 g.beginFill("red");
 g.drawCircle(0,0,30);

All drawing methods in Graphics return the Graphics instance, so they can be chained together. For example, the following line of code would generate the instructions to draw a rectangle with a red stroke and blue fill:

 myGraphics.beginStroke("red").beginFill("blue").drawRect(20, 20, 100, 50);

Each graphics API call generates a command object (see below). The last command to be created can be accessed via command:

 var fillCommand = myGraphics.beginFill("red").command;
 // ... later, update the fill style/color:
 fillCommand.style = "blue";
 // or change it to a bitmap fill:
 fillCommand.bitmap(myImage);

For more direct control of rendering, you can instantiate and append command objects to the graphics queue directly. In this case, you need to manage path creation manually, and ensure that fill/stroke is applied to a defined path:

 // start a new path. Graphics.beginCmd is a reusable BeginPath instance:
 myGraphics.append(createjs.Graphics.beginCmd);
 // we need to define the path before applying the fill:
 var circle = new createjs.Graphics.Circle(0,0,30);
 myGraphics.append(circle);
 // fill the path we just defined:
 var fill = new createjs.Graphics.Fill("red");
 myGraphics.append(fill);

These approaches can be used together, for example to insert a custom command:

 myGraphics.beginFill("red");
 var customCommand = new CustomSpiralCommand(etc);
 myGraphics.append(customCommand);
 myGraphics.beginFill("blue");
 myGraphics.drawCircle(0, 0, 30);

See append for more info on creating custom commands.

Tiny API

The Graphics class also includes a "tiny API", which is one or two-letter methods that are shortcuts for all of the Graphics methods. These methods are great for creating compact instructions, and is used by the Toolkit for CreateJS to generate readable code. All tiny methods are marked as protected, so you can view them by enabling protected descriptions in the docs.

TinyMethodTinyMethod
mtmoveTo lt lineTo
a/atarc / arcTo btbezierCurveTo
qtquadraticCurveTo (also curveTo) rrect
cpclosePath cclear
fbeginFill lfbeginLinearGradientFill
rfbeginRadialGradientFill bfbeginBitmapFill
efendFill ss / sdsetStrokeStyle / setStrokeDash
sbeginStroke lsbeginLinearGradientStroke
rsbeginRadialGradientStroke bsbeginBitmapStroke
esendStroke drdrawRect
rrdrawRoundRect rcdrawRoundRectComplex
dcdrawCircle dedrawEllipse
dpdrawPolyStar pdecodePath

Here is the above example, using the tiny API instead.

 myGraphics.s("red").f("blue").r(20, 20, 100, 50);

Constructor

Graphics

()

Defined in Graphics:41

Methods

_getInstructions

() Array protected

Defined in _getInstructions:379

Use the instructions property instead.

Returns:

Array:

The instructions array, useful for chaining

_setFill

(
  • fill
)
protected

Defined in _setFill:1597

Parameters:

_setStroke

(
  • stroke
)
protected

Defined in _setStroke:1608

Parameters:

_updateInstructions

(
  • commit
)
protected

Defined in _updateInstructions:1556

Parameters:

a

(
  • x
  • y
  • radius
  • startAngle
  • endAngle
  • anticlockwise
)
Graphics protected chainable

Defined in a:1234

Shortcut to arc.

Parameters:

Returns:

Graphics:

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

append

(
  • command
  • clean
)
Graphics chainable

Defined in append:977

Appends a graphics command object to the graphics queue. Command objects expose an "exec" method that accepts two parameters: the Context2D to operate on, and an arbitrary data object passed into draw. The latter will usually be the Shape instance that called draw.

This method is used internally by Graphics methods, such as drawCircle, but can also be used directly to insert built-in or custom graphics commands. For example:

    // attach data to our shape, so we can access it during the draw:
    myShape.color = "red";

    // append a Circle command object:
    myShape.graphics.append(new createjs.Graphics.Circle(50, 50, 30));

    // append a custom command object with an exec method that sets the fill style
    // based on the shape's data, and then fills the circle.
    myShape.graphics.append({exec:function(ctx, shape) {
        ctx.fillStyle = shape.color;
        ctx.fill();
    }});

Parameters:

  • command Object

    A graphics command object exposing an "exec" method.

  • clean Boolean

    The clean param is primarily for internal use. A value of true indicates that a command does not generate a path that should be stroked or filled.

Returns:

Graphics:

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

arc

(
  • x
  • y
  • radius
  • startAngle
  • endAngle
  • anticlockwise
)
Graphics chainable

Defined in arc:507

Draws an arc defined by the radius, startAngle and endAngle arguments, centered at the position (x, y). For example, to draw a full circle with a radius of 20 centered at (100, 100):

 arc(100, 100, 20, 0, Math.PI*2);

For detailed information, read the whatwg spec. A tiny API method "a" also exists.

Parameters:

Returns:

Graphics:

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

arcTo

(
  • x1
  • y1
  • x2
  • y2
  • radius
)
Graphics chainable

Defined in arcTo:490

Draws an arc with the specified control points and radius. For detailed information, read the whatwg spec. A tiny API method "at" also exists.

Parameters:

Returns:

Graphics:

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

at

(
  • x1
  • y1
  • x2
  • y2
  • radius
)
Graphics protected chainable

Defined in at:1193

Shortcut to arcTo.

Parameters:

Returns:

Graphics:

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

beginBitmapFill

(
  • image
  • repetition
  • matrix
)
Graphics chainable

Defined in beginBitmapFill:670

Begins a pattern fill using the specified image. This ends the current sub-path. A tiny API method "bf" also exists.

Parameters:

  • image HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    The Image, Canvas, or Video object to use as the pattern. Must be loaded prior to creating a bitmap fill, or the fill will be empty.

  • repetition String

    Optional. Indicates whether to repeat the image in the fill area. One of "repeat", "repeat-x", "repeat-y", or "no-repeat". Defaults to "repeat". Note that Firefox does not support "repeat-x" or "repeat-y" (latest tests were in FF 20.0), and will default to "repeat".

  • matrix Matrix2D

    Optional. Specifies a transformation matrix for the bitmap fill. This transformation will be applied relative to the parent transform.

Returns:

Graphics:

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

beginBitmapStroke

(
  • image
  • [repetition=repeat]
)
Graphics chainable

Defined in beginBitmapStroke:816

Begins a pattern fill using the specified image. This ends the current sub-path. Note that unlike bitmap fills, strokes do not currently support a matrix parameter due to limitations in the canvas API. A tiny API method "bs" also exists.

Parameters:

  • image HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    The Image, Canvas, or Video object to use as the pattern. Must be loaded prior to creating a bitmap fill, or the fill will be empty.

  • [repetition=repeat] String optional

    Optional. Indicates whether to repeat the image in the fill area. One of "repeat", "repeat-x", "repeat-y", or "no-repeat". Defaults to "repeat".

Returns:

Graphics:

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

beginFill

(
  • color
)
Graphics chainable

Defined in beginFill:609

Begins a fill with the specified color. This ends the current sub-path. A tiny API method "f" also exists.

Parameters:

  • color String

    A CSS compatible color value (ex. "red", "#FF0000", or "rgba(255,0,0,0.5)"). Setting to null will result in no fill.

Returns:

Graphics:

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

beginLinearGradientFill

(
  • colors
  • ratios
  • x0
  • y0
  • x1
  • y1
)
Graphics chainable

Defined in beginLinearGradientFill:621

Begins a linear gradient fill defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a square to display it:

 myGraphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);

A tiny API method "lf" also exists.

Parameters:

  • colors Array

    An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.

  • ratios Array

    An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.

  • x0 Number

    The position of the first point defining the line that defines the gradient direction and size.

  • y0 Number

    The position of the first point defining the line that defines the gradient direction and size.

  • x1 Number

    The position of the second point defining the line that defines the gradient direction and size.

  • y1 Number

    The position of the second point defining the line that defines the gradient direction and size.

Returns:

Graphics:

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

beginLinearGradientStroke

(
  • colors
  • ratios
  • x0
  • y0
  • x1
  • y1
)
Graphics chainable

Defined in beginLinearGradientStroke:763

Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a square to display it:

 myGraphics.setStrokeStyle(10).
     beginLinearGradientStroke(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);

A tiny API method "ls" also exists.

Parameters:

  • colors Array

    An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.

  • ratios Array

    An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.

  • x0 Number

    The position of the first point defining the line that defines the gradient direction and size.

  • y0 Number

    The position of the first point defining the line that defines the gradient direction and size.

  • x1 Number

    The position of the second point defining the line that defines the gradient direction and size.

  • y1 Number

    The position of the second point defining the line that defines the gradient direction and size.

Returns:

Graphics:

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

beginRadialGradientFill

(
  • colors
  • ratios
  • x0
  • y0
  • r0
  • x1
  • y1
  • r1
)
Graphics chainable

Defined in beginRadialGradientFill:645

Begins a radial gradient fill. This ends the current sub-path. For example, the following code defines a red to blue radial gradient centered at (100, 100), with a radius of 50, and draws a circle to display it:

 myGraphics.beginRadialGradientFill(["#F00","#00F"], [0, 1], 100, 100, 0, 100, 100, 50).drawCircle(100, 100, 50);

A tiny API method "rf" also exists.

Parameters:

  • colors Array

    An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.

  • ratios Array

    An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.

  • x0 Number

    Center position of the inner circle that defines the gradient.

  • y0 Number

    Center position of the inner circle that defines the gradient.

  • r0 Number

    Radius of the inner circle that defines the gradient.

  • x1 Number

    Center position of the outer circle that defines the gradient.

  • y1 Number

    Center position of the outer circle that defines the gradient.

  • r1 Number

    Radius of the outer circle that defines the gradient.

Returns:

Graphics:

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

beginRadialGradientStroke

(
  • colors
  • ratios
  • x0
  • y0
  • r0
  • x1
  • y1
  • r1
)
Graphics chainable

Defined in beginRadialGradientStroke:788

Begins a radial gradient stroke. This ends the current sub-path. For example, the following code defines a red to blue radial gradient centered at (100, 100), with a radius of 50, and draws a rectangle to display it:

 myGraphics.setStrokeStyle(10)
     .beginRadialGradientStroke(["#F00","#00F"], [0, 1], 100, 100, 0, 100, 100, 50)
     .drawRect(50, 90, 150, 110);

A tiny API method "rs" also exists.

Parameters:

  • colors Array

    An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.

  • ratios Array

    An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%, then draw the second color to 100%.

  • x0 Number

    Center position of the inner circle that defines the gradient.

  • y0 Number

    Center position of the inner circle that defines the gradient.

  • r0 Number

    Radius of the inner circle that defines the gradient.

  • x1 Number

    Center position of the outer circle that defines the gradient.

  • y1 Number

    Center position of the outer circle that defines the gradient.

  • r1 Number

    Radius of the outer circle that defines the gradient.

Returns:

Graphics:

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

beginStroke

(
  • color
)
Graphics chainable

Defined in beginStroke:751

Begins a stroke with the specified color. This ends the current sub-path. A tiny API method "s" also exists.

Parameters:

  • color String

    A CSS compatible color value (ex. "#FF0000", "red", or "rgba(255,0,0,0.5)"). Setting to null will result in no stroke.

Returns:

Graphics:

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

bezierCurveTo

(
  • cp1x
  • cp1y
  • cp2x
  • cp2y
  • x
  • y
)
Graphics chainable

Defined in bezierCurveTo:546

Draws a bezier curve from the current drawing point to (x, y) using the control points (cp1x, cp1y) and (cp2x, cp2y). For detailed information, read the whatwg spec. A tiny API method "bt" also exists.

Parameters:

Returns:

Graphics:

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

bf

(
  • image
  • repetition
  • matrix
)
Graphics protected chainable

Defined in bf:1327

Shortcut to beginBitmapFill.

Parameters:

  • image HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    The Image, Canvas, or Video object to use as the pattern.

  • repetition String

    Optional. Indicates whether to repeat the image in the fill area. One of "repeat", "repeat-x", "repeat-y", or "no-repeat". Defaults to "repeat". Note that Firefox does not support "repeat-x" or "repeat-y" (latest tests were in FF 20.0), and will default to "repeat".

  • matrix Matrix2D

    Optional. Specifies a transformation matrix for the bitmap fill. This transformation will be applied relative to the parent transform.

Returns:

Graphics:

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

bs

(
  • image
  • [repetition=repeat]
)
Graphics protected chainable

Defined in bs:1433

Shortcut to beginBitmapStroke.

Parameters:

  • image HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    The Image, Canvas, or Video object to use as the pattern.

  • [repetition=repeat] String optional

    Optional. Indicates whether to repeat the image in the fill area. One of "repeat", "repeat-x", "repeat-y", or "no-repeat". Defaults to "repeat".

Returns:

Graphics:

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

bt

(
  • cp1x
  • cp1y
  • cp2x
  • cp2y
  • x
  • y
)
Graphics protected chainable

Defined in bt:1207

Shortcut to bezierCurveTo.

Parameters:

Returns:

Graphics:

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

c

() Graphics protected chainable

Defined in c:1271

Shortcut to clear.

Returns:

Graphics:

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

clear

() Graphics chainable

Defined in clear:595

Clears all drawing instructions, effectively resetting this Graphics instance. Any line and fill styles will need to be redefined to draw shapes following a clear call. A tiny API method "c" also exists.

Returns:

Graphics:

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

clone

() Graphics

Defined in clone:1139

Returns a clone of this Graphics instance. Note that the individual command objects are not cloned.

Returns:

Graphics:

A clone of the current Graphics instance.

closePath

() Graphics chainable

Defined in closePath:582

Closes the current path, effectively drawing a line from the current drawing point to the first drawing point specified since the fill or stroke was last set. A tiny API method "cp" also exists.

Returns:

Graphics:

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

cp

() Graphics protected chainable

Defined in cp:1262

Shortcut to closePath.

Returns:

Graphics:

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

curveTo

(
  • cpx
  • cpy
  • x
  • y
)
Graphics chainable

Defined in curveTo:844

Maps the familiar ActionScript curveTo() method to the functionally similar quadraticCurveTo method.

Parameters:

Returns:

Graphics:

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

dc

(
  • x
  • y
  • radius
)
Graphics protected chainable

Defined in dc:1499

Shortcut to drawCircle.

Parameters:

  • x Number

    x coordinate center point of circle.

  • y Number

    y coordinate center point of circle.

  • radius Number

    Radius of circle.

Returns:

Graphics:

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

de

(
  • x
  • y
  • w
  • h
)
Graphics protected chainable

Defined in de:1511

Shortcut to drawEllipse.

Parameters:

  • x Number

    The left coordinate point of the ellipse. Note that this is different from drawCircle which draws from center.

  • y Number

    The top coordinate point of the ellipse. Note that this is different from drawCircle which draws from the center.

  • w Number

    The height (horizontal diameter) of the ellipse. The horizontal radius will be half of this number.

  • h Number

    The width (vertical diameter) of the ellipse. The vertical radius will be half of this number.

Returns:

Graphics:

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

decodePath

(
  • str
)
Graphics chainable

Defined in decodePath:1011

Decodes a compact encoded path string into a series of draw instructions. This format is not intended to be human readable, and is meant for use by authoring tools. The format uses a base64 character set, with each character representing 6 bits, to define a series of draw commands.

Each command is comprised of a single "header" character followed by a variable number of alternating x and y position values. Reading the header bits from left to right (most to least significant): bits 1 to 3 specify the type of operation (0-moveTo, 1-lineTo, 2-quadraticCurveTo, 3-bezierCurveTo, 4-closePath, 5-7 unused). Bit 4 indicates whether position values use 12 bits (2 characters) or 18 bits (3 characters), with a one indicating the latter. Bits 5 and 6 are currently unused.

Following the header is a series of 0 (closePath), 2 (moveTo, lineTo), 4 (quadraticCurveTo), or 6 (bezierCurveTo) parameters. These parameters are alternating x/y positions represented by 2 or 3 characters (as indicated by the 4th bit in the command char). These characters consist of a 1 bit sign (1 is negative, 0 is positive), followed by an 11 (2 char) or 17 (3 char) bit integer value. All position values are in tenths of a pixel. Except in the case of move operations which are absolute, this value is a delta from the previous x or y position (as appropriate).

For example, the string "A3cAAMAu4AAA" represents a line starting at -150,0 and ending at 150,0.
A - bits 000000. First 3 bits (000) indicate a moveTo operation. 4th bit (0) indicates 2 chars per parameter.
n0 - 110111011100. Absolute x position of -150.0px. First bit indicates a negative value, remaining bits indicate 1500 tenths of a pixel.
AA - 000000000000. Absolute y position of 0.
I - 001100. First 3 bits (001) indicate a lineTo operation. 4th bit (1) indicates 3 chars per parameter.
Au4 - 000000101110111000. An x delta of 300.0px, which is added to the previous x value of -150.0px to provide an absolute position of +150.0px.
AAA - 000000000000000000. A y delta value of 0.

A tiny API method "p" also exists.

Parameters:

  • str String

    The path string to decode.

Returns:

Graphics:

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

dp

(
  • x
  • y
  • radius
  • sides
  • pointSize
  • angle
)
Graphics protected chainable

Defined in dp:1527

Shortcut to drawPolyStar.

Parameters:

  • x Number

    Position of the center of the shape.

  • y Number

    Position of the center of the shape.

  • radius Number

    The outer radius of the shape.

  • sides Number

    The number of points on the star or sides on the polygon.

  • pointSize Number

    The depth or "pointy-ness" of the star points. A pointSize of 0 will draw a regular polygon (no points), a pointSize of 1 will draw nothing because the points are infinitely pointy.

  • angle Number

    The angle of the first point / corner. For example a value of 0 will draw the first point directly to the right of the center.

Returns:

Graphics:

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

dr

(
  • x
  • y
  • w
  • h
)
Graphics protected chainable

Defined in dr:1455

Shortcut to drawRect.

Parameters:

Returns:

Graphics:

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

draw

(
  • ctx
  • data
)

Defined in draw:424

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.

Parameters:

  • ctx CanvasRenderingContext2D

    The canvas 2D context object to draw into.

  • data Object

    Optional data that is passed to graphics command exec methods. When called from a Shape instance, the shape passes itself as the data parameter. This can be used by custom graphic commands to insert contextual data.

drawAsPath

(
  • ctx
)

Defined in drawAsPath:441

Draws only the path described for this Graphics instance, skipping any non-path instructions, including fill and stroke descriptions. Used for DisplayObject.mask to draw the clipping path, for example.

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.

drawCircle

(
  • x
  • y
  • radius
)
Graphics chainable

Defined in drawCircle:905

Draws a circle with the specified radius at (x, y).

 var g = new createjs.Graphics();
    g.setStrokeStyle(1);
    g.beginStroke(createjs.Graphics.getRGB(0,0,0));
    g.beginFill(createjs.Graphics.getRGB(255,0,0));
    g.drawCircle(0,0,3);

    var s = new createjs.Shape(g);
    s.x = 100;
    s.y = 100;

    stage.addChild(s);
    stage.update();

A tiny API method "dc" also exists.

Parameters:

  • x Number

    x coordinate center point of circle.

  • y Number

    y coordinate center point of circle.

  • radius Number

    Radius of circle.

Returns:

Graphics:

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

drawEllipse

(
  • x
  • y
  • w
  • h
)
Graphics chainable

Defined in drawEllipse:933

Draws an ellipse (oval) with a specified width (w) and height (h). Similar to drawCircle, except the width and height can be different. A tiny API method "de" also exists.

Parameters:

  • x Number

    The left coordinate point of the ellipse. Note that this is different from drawCircle which draws from center.

  • y Number

    The top coordinate point of the ellipse. Note that this is different from drawCircle which draws from the center.

  • w Number

    The height (horizontal diameter) of the ellipse. The horizontal radius will be half of this number.

  • h Number

    The width (vertical diameter) of the ellipse. The vertical radius will be half of this number.

Returns:

Graphics:

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

drawPolyStar

(
  • x
  • y
  • radius
  • sides
  • pointSize
  • angle
)
Graphics chainable

Defined in drawPolyStar:951

Draws a star if pointSize is greater than 0, or a regular polygon if pointSize is 0 with the specified number of points. For example, the following code will draw a familiar 5 pointed star shape centered at 100, 100 and with a radius of 50:

 myGraphics.beginFill("#FF0").drawPolyStar(100, 100, 50, 5, 0.6, -90);
 // Note: -90 makes the first point vertical

A tiny API method "dp" also exists.

Parameters:

  • x Number

    Position of the center of the shape.

  • y Number

    Position of the center of the shape.

  • radius Number

    The outer radius of the shape.

  • sides Number

    The number of points on the star or sides on the polygon.

  • pointSize Number

    The depth or "pointy-ness" of the star points. A pointSize of 0 will draw a regular polygon (no points), a pointSize of 1 will draw nothing because the points are infinitely pointy.

  • angle Number

    The angle of the first point / corner. For example a value of 0 will draw the first point directly to the right of the center.

Returns:

Graphics:

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

drawRect

(
  • x
  • y
  • w
  • h
)
Graphics chainable

Defined in drawRect:857

Maps the familiar ActionScript drawRect() method to the functionally similar rect method.

Parameters:

Returns:

Graphics:

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

drawRoundRect

(
  • x
  • y
  • w
  • h
  • radius
)
Graphics chainable

Defined in drawRoundRect:871

Draws a rounded rectangle with all corners with the specified radius.

Parameters:

Returns:

Graphics:

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

drawRoundRectComplex

(
  • x
  • y
  • w
  • h
  • radiusTL
  • radiusTR
  • radiusBR
  • radiusBL
)
Graphics chainable

Defined in drawRoundRectComplex:886

Draws a rounded rectangle with different corner radii. Supports positive and negative corner radii. A tiny API method "rc" also exists.

Parameters:

  • x Number

    The horizontal coordinate to draw the round rect.

  • y Number

    The vertical coordinate to draw the round rect.

  • w Number

    The width of the round rect.

  • h Number

    The height of the round rect.

  • radiusTL Number

    Top left corner radius.

  • radiusTR Number

    Top right corner radius.

  • radiusBR Number

    Bottom right corner radius.

  • radiusBL Number

    Bottom left corner radius.

Returns:

Graphics:

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

ef

() Graphics protected chainable

Defined in ef:1343

Shortcut to endFill.

Returns:

Graphics:

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

endFill

() Graphics chainable

Defined in endFill:688

Ends the current sub-path, and begins a new one with no fill. Functionally identical to beginFill(null). A tiny API method "ef" also exists.

Returns:

Graphics:

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

endStroke

() Graphics chainable

Defined in endStroke:833

Ends the current sub-path, and begins a new one with no stroke. Functionally identical to beginStroke(null). A tiny API method "es" also exists.

Returns:

Graphics:

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

es

() Graphics protected chainable

Defined in es:1446

Shortcut to endStroke.

Returns:

Graphics:

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

f

(
  • color
)
Graphics protected chainable

Defined in f:1280

Shortcut to beginFill.

Parameters:

  • color String

    A CSS compatible color value (ex. "red", "#FF0000", or "rgba(255,0,0,0.5)"). Setting to null will result in no fill.

Returns:

Graphics:

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

getHSL

(
  • hue
  • saturation
  • lightness
  • [alpha]
)
String static

Defined in getHSL:288

Returns a CSS compatible color string based on the specified HSL numeric color values in the format "hsla(360,100,100,1.0)", or if alpha is null then in the format "hsl(360,100,100)".

 createjs.Graphics.getHSL(150, 100, 70);
 // Returns "hsl(150,100,70)"

Parameters:

  • hue Number

    The hue component for the color, between 0 and 360.

  • saturation Number

    The saturation component for the color, between 0 and 100.

  • lightness Number

    The lightness component for the color, between 0 and 100.

  • [alpha] Number optional

    The alpha component for the color where 0 is fully transparent and 1 is fully opaque.

Returns:

String:

A CSS compatible color string based on the specified HSL numeric color values in the format "hsla(360,100,100,1.0)", or if alpha is null then in the format "hsl(360,100,100)".

getInstructions

() deprecated

Defined in getInstructions:390

Use the instructions property instead.

getRGB

(
  • r
  • g
  • b
  • [alpha]
)
String static

Defined in getRGB:252

Returns a CSS compatible color string based on the specified RGB numeric color values in the format "rgba(255,255,255,1.0)", or if alpha is null then in the format "rgb(255,255,255)". For example,

 createjs.Graphics.getRGB(50, 100, 150, 0.5);
 // Returns "rgba(50,100,150,0.5)"

It also supports passing a single hex color value as the first param, and an optional alpha value as the second param. For example,

 createjs.Graphics.getRGB(0xFF00FF, 0.2);
 // Returns "rgba(255,0,255,0.2)"

Parameters:

  • r Number

    The red component for the color, between 0 and 0xFF (255).

  • g Number

    The green component for the color, between 0 and 0xFF (255).

  • b Number

    The blue component for the color, between 0 and 0xFF (255).

  • [alpha] Number optional

    The alpha component for the color where 0 is fully transparent and 1 is fully opaque.

Returns:

String:

A CSS compatible color string based on the specified RGB numeric color values in the format "rgba(255,255,255,1.0)", or if alpha is null then in the format "rgb(255,255,255)".

isEmpty

() Boolean

Defined in isEmpty:415

Returns true if this Graphics instance has no drawing commands.

Returns:

Boolean:

Returns true if this Graphics instance has no drawing commands.

lf

(
  • colors
  • ratios
  • x0
  • y0
  • x1
  • y1
)
Graphics protected chainable

Defined in lf:1291

Shortcut to beginLinearGradientFill.

Parameters:

  • colors Array

    An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.

  • ratios Array

    An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.

  • x0 Number

    The position of the first point defining the line that defines the gradient direction and size.

  • y0 Number

    The position of the first point defining the line that defines the gradient direction and size.

  • x1 Number

    The position of the second point defining the line that defines the gradient direction and size.

  • y1 Number

    The position of the second point defining the line that defines the gradient direction and size.

Returns:

Graphics:

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

lineTo

(
  • x
  • y
)
Graphics chainable

Defined in lineTo:472

Draws a line from the current drawing point to the specified position, which become the new current drawing point. Note that you must call moveTo before the first lineTo(). A tiny API method "lt" also exists.

For detailed information, read the whatwg spec.

Parameters:

  • x Number

    The x coordinate the drawing point should draw to.

  • y Number

    The y coordinate the drawing point should draw to.

Returns:

Graphics:

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

ls

(
  • colors
  • ratios
  • x0
  • y0
  • x1
  • y1
)
Graphics protected chainable

Defined in ls:1396

Shortcut to beginLinearGradientStroke.

Parameters:

  • colors Array

    An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.

  • ratios Array

    An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.

  • x0 Number

    The position of the first point defining the line that defines the gradient direction and size.

  • y0 Number

    The position of the first point defining the line that defines the gradient direction and size.

  • x1 Number

    The position of the second point defining the line that defines the gradient direction and size.

  • y1 Number

    The position of the second point defining the line that defines the gradient direction and size.

Returns:

Graphics:

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

lt

(
  • x
  • y
)
Graphics protected chainable

Defined in lt:1182

Shortcut to lineTo.

Parameters:

  • x Number

    The x coordinate the drawing point should draw to.

  • y Number

    The y coordinate the drawing point should draw to.

Returns:

Graphics:

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

moveTo

(
  • x
  • y
)
Graphics chainable

Defined in moveTo:460

Moves the drawing point to the specified position. A tiny API method "mt" also exists.

Parameters:

  • x Number

    The x coordinate the drawing point should move to.

  • y Number

    The y coordinate the drawing point should move to.

Returns:

Graphics:

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

mt

(
  • x
  • y
)
Graphics protected chainable

Defined in mt:1171

Shortcut to moveTo.

Parameters:

  • x Number

    The x coordinate the drawing point should move to.

  • y Number

    The y coordinate the drawing point should move to.

Returns:

Graphics:

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

p

(
  • str
)
Graphics protected chainable

Defined in p:1544

Shortcut to decodePath.

Parameters:

  • str String

    The path string to decode.

Returns:

Graphics:

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

qt

(
  • cpx
  • cpy
  • x
  • y
)
protected chainable

Defined in qt:1222

Shortcut to quadraticCurveTo / curveTo.

Parameters:

quadraticCurveTo

(
  • cpx
  • cpy
  • x
  • y
)
Graphics chainable

Defined in quadraticCurveTo:530

Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy). For detailed information, read the whatwg spec. A tiny API method "qt" also exists.

Parameters:

Returns:

Graphics:

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

r

(
  • x
  • y
  • w
  • h
)
Graphics protected chainable

Defined in r:1249

Shortcut to rect.

Parameters:

Returns:

Graphics:

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

rc

(
  • x
  • y
  • w
  • h
  • radiusTL
  • radiusTR
  • radiusBR
  • radiusBL
)
Graphics protected chainable

Defined in rc:1482

Shortcut to drawRoundRectComplex.

Parameters:

  • x Number

    The horizontal coordinate to draw the round rect.

  • y Number

    The vertical coordinate to draw the round rect.

  • w Number

    The width of the round rect.

  • h Number

    The height of the round rect.

  • radiusTL Number

    Top left corner radius.

  • radiusTR Number

    Top right corner radius.

  • radiusBR Number

    Bottom right corner radius.

  • radiusBL Number

    Bottom left corner radius.

Returns:

Graphics:

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

rect

(
  • x
  • y
  • w
  • h
)
Graphics chainable

Defined in rect:565

Draws a rectangle at (x, y) with the specified width and height using the current fill and/or stroke. For detailed information, read the whatwg spec. A tiny API method "r" also exists.

Parameters:

Returns:

Graphics:

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

rf

(
  • colors
  • ratios
  • x0
  • y0
  • r0
  • x1
  • y1
  • r1
)
Graphics protected chainable

Defined in rf:1308

Shortcut to beginRadialGradientFill.

Parameters:

  • colors Array

    An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.

  • ratios Array

    An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.

  • x0 Number

    Center position of the inner circle that defines the gradient.

  • y0 Number

    Center position of the inner circle that defines the gradient.

  • r0 Number

    Radius of the inner circle that defines the gradient.

  • x1 Number

    Center position of the outer circle that defines the gradient.

  • y1 Number

    Center position of the outer circle that defines the gradient.

  • r1 Number

    Radius of the outer circle that defines the gradient.

Returns:

Graphics:

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

rr

(
  • x
  • y
  • w
  • h
  • radius
)
Graphics protected chainable

Defined in rr:1468

Shortcut to drawRoundRect.

Parameters:

Returns:

Graphics:

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

rs

(
  • colors
  • ratios
  • x0
  • y0
  • r0
  • x1
  • y1
  • r1
)
Graphics protected chainable

Defined in rs:1413

Shortcut to beginRadialGradientStroke.

Parameters:

  • colors Array

    An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.

  • ratios Array

    An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%, then draw the second color to 100%.

  • x0 Number

    Center position of the inner circle that defines the gradient.

  • y0 Number

    Center position of the inner circle that defines the gradient.

  • r0 Number

    Radius of the inner circle that defines the gradient.

  • x1 Number

    Center position of the outer circle that defines the gradient.

  • y1 Number

    Center position of the outer circle that defines the gradient.

  • r1 Number

    Radius of the outer circle that defines the gradient.

Returns:

Graphics:

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

s

(
  • color
)
Graphics protected chainable

Defined in s:1385

Shortcut to beginStroke.

Parameters:

  • color String

    A CSS compatible color value (ex. "#FF0000", "red", or "rgba(255,0,0,0.5)"). Setting to null will result in no stroke.

Returns:

Graphics:

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

sd

(
  • [segments]
  • [offset=0]
)
Graphics protected chainable

Defined in sd:1372

Shortcut to setStrokeDash.

Parameters:

  • [segments] Array optional

    An array specifying the dash pattern, alternating between line and gap. For example, [20,10] would create a pattern of 20 pixel lines with 10 pixel gaps between them. Passing null or an empty array will clear any existing dash.

  • [offset=0] Number optional

    The offset of the dash pattern. For example, you could increment this value to create a "marching ants" effect.

Returns:

Graphics:

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

setStrokeDash

(
  • [segments]
  • [offset=0]
)
Graphics chainable

Defined in setStrokeDash:731

Sets or clears the stroke dash pattern.

myGraphics.setStrokeDash([20, 10], 0);

A tiny API method sd also exists.

Parameters:

  • [segments] Array optional

    An array specifying the dash pattern, alternating between line and gap. For example, [20,10] would create a pattern of 20 pixel lines with 10 pixel gaps between them. Passing null or an empty array will clear the existing stroke dash.

  • [offset=0] Number optional

    The offset of the dash pattern. For example, you could increment this value to create a "marching ants" effect.

Returns:

Graphics:

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

setStrokeStyle

(
  • thickness
  • [caps=0]
  • [joints=0]
  • [miterLimit=10]
  • [ignoreScale=false]
)
Graphics chainable

Defined in setStrokeStyle:699

Sets the stroke style. Like all drawing methods, this can be chained, so you can define the stroke style and color in a single line of code like so:

myGraphics.setStrokeStyle(8,"round").beginStroke("#F00");

A tiny API method "ss" also exists.

Parameters:

  • thickness Number

    The width of the stroke.

  • [caps=0] String | Number optional

    Indicates the type of caps to use at the end of lines. One of butt, round, or square. Defaults to "butt". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with the tiny API.

  • [joints=0] String | Number optional

    Specifies the type of joints that should be used where two lines meet. One of bevel, round, or miter. Defaults to "miter". Also accepts the values 0 (miter), 1 (round), and 2 (bevel) for use with the tiny API.

  • [miterLimit=10] Number optional

    If joints is set to "miter", then you can specify a miter limit ratio which controls at what point a mitered joint will be clipped.

  • [ignoreScale=false] Boolean optional

    If true, the stroke will be drawn at the specified thickness regardless of active transformations.

Returns:

Graphics:

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

ss

(
  • thickness
  • [caps=0]
  • [joints=0]
  • [miterLimit=10]
  • [ignoreScale=false]
)
Graphics protected chainable

Defined in ss:1352

Shortcut to setStrokeStyle.

Parameters:

  • thickness Number

    The width of the stroke.

  • [caps=0] String | Number optional

    Indicates the type of caps to use at the end of lines. One of butt, round, or square. Defaults to "butt". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with the tiny API.

  • [joints=0] String | Number optional

    Specifies the type of joints that should be used where two lines meet. One of bevel, round, or miter. Defaults to "miter". Also accepts the values 0 (miter), 1 (round), and 2 (bevel) for use with the tiny API.

  • [miterLimit=10] Number optional

    If joints is set to "miter", then you can specify a miter limit ratio which controls at what point a mitered joint will be clipped.

  • [ignoreScale=false] Boolean optional

    If true, the stroke will be drawn at the specified thickness regardless of active transformations.

Returns:

Graphics:

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

store

() Graphics chainable

Defined in store:1083

Stores all graphics commands so they won't be executed in future draws. Calling store() a second time adds to the existing store. This also affects drawAsPath().

This is useful in cases where you are creating vector graphics in an iterative manner (ex. generative art), so that only new graphics need to be drawn (which can provide huge performance benefits), but you wish to retain all of the vector instructions for later use (ex. scaling, modifying, or exporting).

Note that calling store() will force the active path (if any) to be ended in a manner similar to changing the fill or stroke.

For example, consider a application where the user draws lines with the mouse. As each line segment (or collection of segments) are added to a Shape, it can be rasterized using updateCache, and then stored, so that it can be redrawn at a different scale when the application is resized, or exported to SVG.

// set up cache:
myShape.cache(0,0,500,500,scale);

// when the user drags, draw a new line:
myShape.graphics.moveTo(oldX,oldY).lineTo(newX,newY);
// then draw it into the existing cache:
myShape.updateCache("source-over");
// store the new line, so it isn't redrawn next time:
myShape.store();

// then, when the window resizes, we can re-render at a different scale:
// first, unstore all our lines:
myShape.unstore();
// then cache using the new scale:
myShape.cache(0,0,500,500,newScale);
// finally, store the existing commands again:
myShape.store();

Returns:

Graphics:

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

toString

() String

Defined in toString:1160

Returns a string representation of this object.

Returns:

String:

a string representation of the instance.

unstore

() Graphics chainable

Defined in unstore:1126

Unstores any graphics commands that were previously stored using store so that they will be executed in subsequent draw calls.

Returns:

Graphics:

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

Properties

_activeInstructions

Array protected

Defined in _activeInstructions:219

Uncommitted instructions.

_commitIndex

Number protected

Defined in _commitIndex:211

Indicates the last instruction index that was committed.

_ctx

CanvasRenderingContext2D protected static

Defined in _ctx:365

_dirty

Boolean protected

Defined in _dirty:227

This indicates that there have been changes to the activeInstruction list since the last updateInstructions call.

Default: false

_fill

Fill protected

Defined in _fill:197

_instructions

Array protected

Defined in _instructions:204

_oldStrokeDash

StrokeDash protected

Defined in _oldStrokeDash:183

_oldStrokeStyle

StrokeStyle protected

Defined in _oldStrokeStyle:169

_storeIndex

Number protected

Defined in _storeIndex:236

Index to draw from if a store operation has happened.

Default: 0

_stroke

Stroke protected

Defined in _stroke:155

_strokeDash

StrokeDash protected

Defined in _strokeDash:176

_strokeIgnoreScale

Boolean protected

Defined in _strokeIgnoreScale:190

_strokeStyle

StrokeStyle protected

Defined in _strokeStyle:162

BASE_64

Object final static readonly

Defined in BASE_64:323

Map of Base64 characters to values. Used by decodePath.

beginCmd

Graphics.BeginPath static

Defined in beginCmd:314

A reusable instance of Graphics.BeginPath to avoid unnecessary instantiation.

command

Object

Defined in command:140

Holds a reference to the last command that was created or appended. For example, you could retain a reference to a Fill command in order to dynamically update the color later by using:

    var myFill = myGraphics.beginFill("red").command;
    // update color later:
    myFill.style = "yellow";

instructions

Array readonly

Defined in instructions:398

Returns the graphics instructions array. Each entry is a graphics command object (ex. Graphics.Fill, Graphics.Rect) Modifying the returned array directly is not recommended, and is likely to result in unexpected behaviour.

This property is mainly intended for introspection of the instructions (ex. for graphics export).

STROKE_CAPS_MAP

Array final static readonly

Defined in STROKE_CAPS_MAP:333

Maps numeric values for the caps parameter of setStrokeStyle to corresponding string values. This is primarily for use with the tiny API. The mappings are as follows: 0 to "butt", 1 to "round", and 2 to "square". For example, to set the line caps to "square":

 myGraphics.ss(16, 2);

STROKE_JOINTS_MAP

Array final static readonly

Defined in STROKE_JOINTS_MAP:349

Maps numeric values for the joints parameter of setStrokeStyle to corresponding string values. This is primarily for use with the tiny API. The mappings are as follows: 0 to "miter", 1 to "round", and 2 to "bevel". For example, to set the line joints to "bevel":

 myGraphics.ss(16, 0, 2);