#

API Documentation for: NEXT
Show: Inherited Protected Private Deprecated

# Graphics Class

Defined in: `Graphics:39`
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 Easel 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.beginPath is a reusable BeginPath instance:
     myGraphics.append(Graphics.beginPath);
     // we need to define the path before applying the fill:
     var circle = new Graphics.Circle(0,0,30);
     myGraphics.append(circle);
     // fill the path we just defined:
     var fill = new 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.

Tiny | Method | Tiny | Method
mt | moveTo | lt | lineTo
a/at | arc / arcTo | bt | bezierCurveTo
qt | quadraticCurveTo (also curveTo) | r | rect
cp | closePath | c | clear
f | beginFill | lf | beginLinearGradientFill
rf | beginRadialGradientFill | bf | beginBitmapFill
ef | endFill | ss | setStrokeStyle
s | beginStroke | ls | beginLinearGradientStroke
rs | beginRadialGradientStroke | bs | beginBitmapStroke
es | endStroke | dr | drawRect
rr | drawRoundRect | rc | drawRoundRectComplex
dc | drawCircle | de | drawEllipse
dp | drawPolyStar | p | decodePath

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:39`

- Index
- Methods
- Properties

## Item Index

### Methods

- _setFill
- _setStroke
- _updateInstructions
- a
- append
- arc
- arcTo
- at
- beginBitmapFill
- beginBitmapStroke
- beginFill
- beginLinearGradientFill
- beginLinearGradientStroke
- beginRadialGradientFill
- beginRadialGradientStroke
- beginStroke
- bezierCurveTo
- bf
- bs
- bt
- c
- clear
- clone
- closePath
- cp
- curveTo
- dc
- de
- decodePath
- dp
- dr
- draw
- drawAsPath
- drawCircle
- drawEllipse
- drawPolyStar
- drawRect
- drawRoundRect
- drawRoundRectComplex
- ef
- endFill
- endStroke
- es
- f
- getHSL static
- getInstructions
- getRGB static
- initialize
- inject deprecated
- isEmpty
- lf
- lineTo
- ls
- lt
- moveTo
- mt
- p
- qt
- quadraticCurveTo
- r
- rc
- rect
- rf
- rr
- rs
- s
- setStrokeStyle
- ss
- toString

### Properties

- _activeInstructions
- _commitIndex
- _ctx static
- _dirty
- _fill
- _instructions
- _stroke
- _strokeIgnoreScale
- _strokeStyle
- BASE_64 static
- beginCmd static
- command
- STROKE_CAPS_MAP static
- STROKE_JOINTS_MAP static

## Methods

### `_setFill`

() protected

Defined in `_setFill:1223`

### `_setStroke`

() protected

Defined in `_setStroke:1233`

### `_updateInstructions`

() protected

Defined in `_updateInstructions:1200`

### `a`

() protected

Defined in `a:1044`

### `append`

(

- `command`
- `clean`

)
Graphics

Defined in `append:863`

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.append(new 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.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

Defined in `arc:438`

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:

- `x` Number
- `y` Number
- `radius` Number
- `startAngle` Number

  Measured in radians.

- `endAngle` Number

  Measured in radians.

- `anticlockwise` Boolean

#### Returns:

Graphics:

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

### `arcTo`

(

- `x1`
- `y1`
- `x2`
- `y2`
- `radius`

)
Graphics

Defined in `arcTo:422`

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:

- `x1` Number
- `y1` Number
- `x2` Number
- `y2` Number
- `radius` Number

#### Returns:

Graphics:

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

### `at`

() protected

Defined in `at:1023`

### `beginBitmapFill`

(

- `image`
- `repetition`
- `matrix`

)
Graphics

Defined in `beginBitmapFill:594`

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.

- `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

Defined in `beginBitmapStroke:714`

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.

- `[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

Defined in `beginFill:536`

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

Defined in `beginLinearGradientFill:547`

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

Defined in `beginLinearGradientStroke:663`

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

Defined in `beginRadialGradientFill:570`

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

Defined in `beginRadialGradientStroke:687`

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

Defined in `beginStroke:652`

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

Defined in `bezierCurveTo:475`

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:

- `cp1x` Number
- `cp1y` Number
- `cp2x` Number
- `cp2y` Number
- `x` Number
- `y` Number

#### Returns:

Graphics:

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

### `bf`

() protected

Defined in `bf:1093`

### `bs`

() protected

Defined in `bs:1135`

### `bt`

() protected

Defined in `bt:1030`

### `c`

() protected

Defined in `c:1065`

### `clear`

() Graphics

Defined in `clear:521`

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:980`

Returns a clone of this Graphics instance.

#### Returns:

Graphics:

A clone of the current Graphics instance.

### `closePath`

() Graphics

Defined in `closePath:509`

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`

() protected

Defined in `cp:1058`

### `curveTo`

()

Defined in `curveTo:740`

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

### `dc`

() protected

Defined in `dc:1170`

### `de`

() protected

Defined in `de:1177`

### `decodePath`

(

- `str`

)
Graphics

Defined in `decodePath:896`

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`

() protected

Defined in `dp:1184`

### `dr`

() protected

Defined in `dr:1149`

### `draw`

(

- `ctx`
- `data`

)

Defined in `draw:362`

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:379`

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.

#### Parameters:

- `ctx` CanvasRenderingContext2D

  The canvas 2D context object to draw into.

### `drawCircle`

(

- `x`
- `y`
- `radius`

)
Graphics

Defined in `drawCircle:788`

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

Defined in `drawEllipse:815`

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

Defined in `drawPolyStar:832`

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`

()

Defined in `drawRect:748`

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

### `drawRoundRect`

(

- `x`
- `y`
- `w`
- `h`
- `radius`

)
Graphics

Defined in `drawRoundRect:756`

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

#### Parameters:

- `x` Number
- `y` Number
- `w` Number
- `h` Number
- `radius` Number

  Corner radius.

#### Returns:

Graphics:

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

### `drawRoundRectComplex`

(

- `x`
- `y`
- `w`
- `h`
- `radiusTL`
- `radiusTR`
- `radiusBR`
- `radiusBL`

)
Graphics

Defined in `drawRoundRectComplex:770`

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`

() protected

Defined in `ef:1100`

### `endFill`

() Graphics

Defined in `endFill:611`

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

Defined in `endStroke:730`

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`

() protected

Defined in `es:1142`

### `f`

() protected

Defined in `f:1072`

### `getHSL`

(

- `hue`
- `saturation`
- `lightness`
- `[alpha]`

)
String static

Defined in `getHSL:179`

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`

() Array

Defined in `getInstructions:967`

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

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

#### Returns:

Array:

The graphics instructions array.

### `getRGB`

(

- `r`
- `g`
- `b`
- `[alpha]`

)
String static

Defined in `getRGB:143`

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)".

### `initialize`

() protected

Defined in `initialize:343`

Initialization method.

### `inject`

() deprecated

Defined in `inject:857`

Removed in favour of using custom command objects with append.

### `isEmpty`

() Boolean

Defined in `isEmpty:353`

Returns true if this Graphics instance has no drawing commands.

#### Returns:

Boolean:

Returns true if this Graphics instance has no drawing commands.

### `lf`

() protected

Defined in `lf:1079`

### `lineTo`

(

- `x`
- `y`

)
Graphics

Defined in `lineTo:406`

Draws a line from the current drawing point to the specified position, which become the new current drawing point. 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`

() protected

Defined in `ls:1121`

### `lt`

() protected

Defined in `lt:1016`

### `moveTo`

(

- `x`
- `y`

)
Graphics

Defined in `moveTo:395`

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`

() protected

Defined in `mt:1009`

### `p`

() protected

Defined in `p:1191`

### `qt`

() protected

Defined in `qt:1037`

### `quadraticCurveTo`

(

- `cpx`
- `cpy`
- `x`
- `y`

)
Graphics

Defined in `quadraticCurveTo:460`

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:

- `cpx` Number
- `cpy` Number
- `x` Number
- `y` Number

#### Returns:

Graphics:

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

### `r`

() protected

Defined in `r:1051`

### `rc`

() protected

Defined in `rc:1163`

### `rect`

(

- `x`
- `y`
- `w`
- `h`

)
Graphics

Defined in `rect:493`

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:

- `x` Number
- `y` Number
- `w` Number

  Width of the rectangle

- `h` Number

  Height of the rectangle

#### Returns:

Graphics:

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

### `rf`

() protected

Defined in `rf:1086`

### `rr`

() protected

Defined in `rr:1156`

### `rs`

() protected

Defined in `rs:1128`

### `s`

() protected

Defined in `s:1114`

### `setStrokeStyle`

(

- `thickness`
- `[caps=0]`
- `[joints=0]`
- `[miterLimit=10]`
- `[ignoreScale=false]`

)
Graphics

Defined in `setStrokeStyle:621`

Sets the stroke style for the current sub-path. 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`

() protected

Defined in `ss:1107`

### `toString`

() String

Defined in `toString:998`

Returns a string representation of this object.

#### Returns:

String:

a string representation of the instance.

## Properties

### `_activeInstructions`

Array protected

Defined in `_activeInstructions:326`

Uncommitted instructions.

### `_commitIndex`

Number protected

Defined in `_commitIndex:318`

Indicates the last instruction index that was committed.

### `_ctx`

CanvasRenderingContext2D protected static

Defined in `_ctx:258`

### `_dirty`

Boolean protected

Defined in `_dirty:334`

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

Default: false

### `_fill`

Array protected

Defined in `_fill:304`

### `_instructions`

Array protected

Defined in `_instructions:311`

### `_stroke`

Array protected

Defined in `_stroke:283`

### `_strokeIgnoreScale`

Boolean protected

Defined in `_strokeIgnoreScale:297`

### `_strokeStyle`

Array protected

Defined in `_strokeStyle:290`

### `BASE_64`

Object final static

Defined in `BASE_64:215`

Map of Base64 characters to values. Used by decodePath.

### `beginCmd`

Graphics.BeginPath static

Defined in `beginCmd:206`

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

### `command`

Object

Defined in `command:271`

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: myFill = myGraphics.beginFill("red").command; // update color later: myFill.style = "yellow";

### `STROKE_CAPS_MAP`

Array final static

Defined in `STROKE_CAPS_MAP:226`

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

Defined in `STROKE_JOINTS_MAP:242`

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);