API Documentation for: 0.7.0
Show:

Graphics Class

Defined in: Graphics:58
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 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();

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

Methods

_appendDraw

() protected

Defined in _appendDraw:1361

_appendInstructions

() protected

_newPath

() protected

Defined in _newPath:1377

_setProp

(
  • name
  • value
)
protected

Defined in _setProp:1389

Used to create Commands that set properties

Parameters:

_updateInstructions

() protected

a

() protected

Defined in a:1175

arc

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

Defined in arc:460

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

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

beginBitmapFill

(
  • image
  • repetition
  • matrix
)
Graphics

Defined in beginBitmapFill:646

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

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

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

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

bs

() protected

Defined in bs:1266

bt

() protected

Defined in bt:1161

c

() protected

Defined in c:1196

clear

() Graphics

Defined in clear:556

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

Returns a clone of this Graphics instance.

Returns:

Graphics:

A clone of the current Graphics instance.

closePath

() Graphics

Defined in closePath:540

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

curveTo

()

Defined in curveTo:819

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

dc

() protected

Defined in dc:1301

de

() protected

Defined in de:1308

decodePath

(
  • str
)
Graphics

Defined in decodePath:1038

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

dr

() protected

Defined in dr:1280

draw

(
  • ctx
)

Defined in draw:380

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.

drawAsPath

(
  • ctx
)

Defined in drawAsPath:396

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

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

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

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

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

drawRoundRect

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

Defined in drawRoundRect:835

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

endFill

() Graphics

Defined in endFill:668

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

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

f

() protected

Defined in f:1203

getHSL

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

Defined in getHSL:172

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

getRGB

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

Defined in getRGB:136

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

Initialization method.

inject

(
  • callback
  • data
)
Graphics

Defined in inject:950

Provides a method for injecting arbitrary Context2D (aka Canvas) API calls into a Graphics queue. The specified callback function will be called in sequence with other drawing instructions. The callback will be executed in the scope of the target canvas's Context2D object, and will be passed the data object as a parameter.

This is an advanced feature. It can allow for powerful functionality, like injecting output from tools that export Context2D instructions, executing raw canvas calls within the context of the display list, or dynamically modifying colors or stroke styles within a Graphics instance over time, but it is not intended for general use.

Within a Graphics queue, each path begins by applying the fill and stroke styles and settings, followed by drawing instructions, followed by the fill() and/or stroke() commands. This means that within a path, inject() can update the fill & stroke styles, but for it to be applied in a predictable manner, you must have begun a fill or stroke (as appropriate) normally via the Graphics API. For example:

function setColor(color) {
    this.fillStyle = color;
}

// this will not draw anything - no fill was begun, so fill() is not called:
myGraphics.inject(setColor, "red").drawRect(0,0,100,100);

// this will draw the rect in green:
myGraphics.beginFill("#000").inject(setColor, "green").drawRect(0,0,100,100);

// this will draw both rects in blue, because there is only a single path
// so the second inject overwrites the first:
myGraphics.beginFill("#000").inject(setColor, "green").drawRect(0,0,100,100)
    .inject(setColor, "blue").drawRect(100,0,100,100);

// this will draw the first rect in green, and the second in blue:
myGraphics.beginFill("#000").inject(setColor, "green").drawRect(0,0,100,100)
    .beginFill("#000").inject(setColor, "blue").drawRect(100,0,100,100);

Parameters:

  • callback Function

    The function to execute.

  • data Object

    Arbitrary data that will be passed to the callback when it is executed.

Returns:

Graphics:

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

isEmpty

() Boolean

Defined in isEmpty:371

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

lineTo

(
  • x
  • y
)
Graphics

Defined in lineTo:424

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

lt

() protected

Defined in lt:1147

moveTo

(
  • x
  • y
)
Graphics

Defined in moveTo:412

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

p

() protected

Defined in p:1322

qt

() protected

Defined in qt:1168

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

rc

() protected

Defined in rc:1294

rect

(
  • x
  • y
  • w
  • h
)
Graphics

Defined in rect:522

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

rr

() protected

Defined in rr:1287

rs

() protected

Defined in rs:1259

s

() protected

Defined in s:1245

setStrokeStyle

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

Defined in setStrokeStyle:678

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

toString

() String

Defined in toString:1129

Returns a string representation of this object.

Returns:

String:

a string representation of the instance.

Properties

_active

Boolean protected

Defined in _active:345

Default: false

_activeInstructions

Array protected

_ctx

CanvasRenderingContext2D protected static

Defined in _ctx:250

_dirty

Boolean protected

Defined in _dirty:353

Default: false

_fillInstructions

Array protected

_instructions

Array protected

Defined in _instructions:324

_oldInstructions

Array protected

_strokeIgnoreScale

Boolean protected

_strokeInstructions

Array protected

_strokeMatrix

Array protected

Defined in _strokeMatrix:317

_strokeStyleInstructions

Array protected

BASE_64

Object final static

Defined in BASE_64:207

Map of Base64 characters to values. Used by decodePath.

beginCmd

Command protected static

Defined in beginCmd:257

Command

Function static

Defined in Command:198

Exposes the Command class used internally by Graphics. Useful for extending the Graphics class or injecting functionality.

fillCmd

Command protected static

Defined in fillCmd:264

STROKE_CAPS_MAP

Array final static

Defined in STROKE_CAPS_MAP:218

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