API Documentation for: 0.6.1
Show:

Graphics Class

Defined in: Graphics:53
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 Easel display list.

Example

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

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

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

Note that 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, then render it to the specified context2D:

 myGraphics.beginStroke("#F00").beginFill("#00F").drawRect(20, 20, 100, 50).draw(myContext2D);

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 sssetStrokeStyle
sbeginStroke lsbeginLinearGradientStroke
rsbeginRadialGradientStroke bsbeginBitmapStroke
esendStroke drdrawRect
rrdrawRoundRect rcdrawRoundRectComplex
dcdrawCircle dedrawEllipse
dpdrawPolyStar pdecodePath

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

 myGraphics.s("#F00").f("#00F").r(20, 20, 100, 50).draw(myContext2D);

Constructor

Graphics

()

Defined in Graphics:53

Methods

_newPath

() protected

Defined in _newPath:1289

_setProp

(
  • name
  • value
)
protected

Defined in _setProp:1301

Used to create Commands that set properties

Parameters:

_updateInstructions

() protected

a

() protected

Defined in a:1104

arc

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

Defined in arc:430

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

Defined in arcTo:412

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

() protected

Defined in at:1083

beginBitmapFill

(
  • image
  • repetition
  • matrix
)
Graphics

Defined in beginBitmapFill:613

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

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:541

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

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

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

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

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:690

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:472

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

() protected

Defined in bf:1153

bs

() protected

Defined in bs:1195

bt

() protected

Defined in bt:1090

c

() protected

Defined in c:1125

clear

() Graphics

Defined in clear:526

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:1040

Returns a clone of this Graphics instance.

Returns:

Graphics: A clone of the current Graphics instance.

closePath

() Graphics

Defined in closePath:510

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:1118

curveTo

()

Defined in curveTo:797

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

dc

() protected

Defined in dc:1230

de

() protected

Defined in de:1237

decodePath

(
  • str
)
Graphics

Defined in decodePath:969

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:1244

dr

() protected

Defined in dr:1209

draw

(
  • ctx
)

Defined in draw:350

Draws the display object into the specified context ignoring it's 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.

drawAsPath

(
  • ctx
)

Defined in drawAsPath:366

Draws only the path described for this Graphics instance, skipping any non-path instructions, including fill and stroke descriptions. Used by DisplayObject.clippingPath 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:870

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

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

    var s = new 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:898

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

    x coordinate center point of ellipse.

  • y Number

    y coordinate center point of ellipse.

  • w Number

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

  • h Number

    width (vertical diameter) of 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:928

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:805

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

drawRoundRect

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

Defined in drawRoundRect:813

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

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:1160

endFill

() Graphics

Defined in endFill:647

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:786

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:1202

f

() protected

Defined in f:1132

getHSL

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

Defined in getHSL:167

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

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

getRGB

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

Defined in getRGB:131

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,

 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,

 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:331

Initialization method.

isEmpty

() Boolean

Defined in isEmpty:341

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:1139

lineTo

(
  • x
  • y
)
Graphics

Defined in lineTo:394

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:1181

lt

() protected

Defined in lt:1076

moveTo

(
  • x
  • y
)
Graphics

Defined in moveTo:382

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:1069

p

() protected

Defined in p:1251

qt

() protected

Defined in qt:1097

quadraticCurveTo

(
  • cpx
  • cpy
  • x
  • y
)
Graphics

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

() protected

Defined in r:1111

rc

() protected

Defined in rc:1223

rect

(
  • x
  • y
  • w
  • h
)
Graphics

Defined in rect:492

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

() protected

Defined in rf:1146

rr

() protected

Defined in rr:1216

rs

() protected

Defined in rs:1188

s

() protected

Defined in s:1174

setStrokeStyle

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

Defined in setStrokeStyle:657

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:1167

toString

() String

Defined in toString:1058

Returns a string representation of this object.

Returns:

String: a string representation of the instance.

Properties

_active

Boolean protected

Defined in _active:315

Default: false

_activeInstructions

Array protected

_ctx

CanvasRenderingContext2D protected static

Defined in _ctx:231

_dirty

Boolean protected

Defined in _dirty:323

Default: false

_fillInstructions

Array protected

_ignoreScaleStroke

Boolean protected

_instructions

Array protected

Defined in _instructions:294

_oldInstructions

Array protected

_strokeInstructions

Array protected

_strokeStyleInstructions

Array protected

BASE_64

Object final static

Defined in BASE_64:191

Map of Base64 characters to values. Used by decodePath.

beginCmd

Command protected static

Defined in beginCmd:239

fillCmd

Command protected static

Defined in fillCmd:247

STROKE_CAPS_MAP

Array final static

Defined in STROKE_CAPS_MAP:201

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

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

strokeCmd

Command protected static

Defined in strokeCmd:255