Graphics Class
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.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("#F00").f("#00F").r(20, 20, 100, 50).draw(myContext2D);
Constructor
Graphics
()
Item Index
Methods
- _appendDraw
- _appendInstructions
- _newPath
- _setProp
- _updateInstructions
- a
- 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
- getRGB static
- initialize
- inject
- isEmpty
- lf
- lineTo
- ls
- lt
- moveTo
- mt
- p
- qt
- quadraticCurveTo
- r
- rc
- rect
- rf
- rr
- rs
- s
- setStrokeStyle
- ss
- toString
Properties
- _active
- _activeInstructions
- _ctx static
- _dirty
- _fillInstructions
- _instructions
- _oldInstructions
- _strokeIgnoreScale
- _strokeInstructions
- _strokeMatrix
- _strokeStyleInstructions
- BASE_64 static
- beginCmd static
- Command static
- fillCmd static
- STROKE_CAPS_MAP static
- STROKE_JOINTS_MAP static
- strokeCmd static
Methods
_appendDraw
()
protected
_appendInstructions
()
protected
_newPath
()
protected
_setProp
-
name
-
value
Used to create Commands that set properties
_updateInstructions
()
protected
a
()
protected
arc
-
x
-
y
-
radius
-
startAngle
-
endAngle
-
anticlockwise
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:
The Graphics instance the method is called on (useful for chaining calls.)
arcTo
-
x1
-
y1
-
x2
-
y2
-
radius
Draws an arc with the specified control points and radius. For detailed information, read the whatwg spec. A tiny API method "at" also exists.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
at
()
protected
beginBitmapFill
-
image
-
repetition
-
matrix
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 | HTMLVideoElementThe Image, Canvas, or Video object to use as the pattern.
-
repetition
StringOptional. 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
Matrix2DOptional. Specifies a transformation matrix for the bitmap fill. This transformation will be applied relative to the parent transform.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
beginBitmapStroke
-
image
-
[repetition=repeat]
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 | HTMLVideoElementThe Image, Canvas, or Video object to use as the pattern.
-
[repetition=repeat]
String optionalOptional. Indicates whether to repeat the image in the fill area. One of "repeat", "repeat-x", "repeat-y", or "no-repeat". Defaults to "repeat".
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
beginFill
-
color
Begins a fill with the specified color. This ends the current sub-path. A tiny API method "f" also exists.
Parameters:
-
color
StringA CSS compatible color value (ex. "red", "#FF0000", or "rgba(255,0,0,0.5)"). Setting to null will result in no fill.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
beginLinearGradientFill
-
colors
-
ratios
-
x0
-
y0
-
x1
-
y1
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
ArrayAn array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
-
ratios
ArrayAn 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
NumberThe position of the first point defining the line that defines the gradient direction and size.
-
y0
NumberThe position of the first point defining the line that defines the gradient direction and size.
-
x1
NumberThe position of the second point defining the line that defines the gradient direction and size.
-
y1
NumberThe position of the second point defining the line that defines the gradient direction and size.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
beginLinearGradientStroke
-
colors
-
ratios
-
x0
-
y0
-
x1
-
y1
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
ArrayAn array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
-
ratios
ArrayAn 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
NumberThe position of the first point defining the line that defines the gradient direction and size.
-
y0
NumberThe position of the first point defining the line that defines the gradient direction and size.
-
x1
NumberThe position of the second point defining the line that defines the gradient direction and size.
-
y1
NumberThe position of the second point defining the line that defines the gradient direction and size.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
beginRadialGradientFill
-
colors
-
ratios
-
x0
-
y0
-
r0
-
x1
-
y1
-
r1
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
ArrayAn array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
-
ratios
ArrayAn 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
NumberCenter position of the inner circle that defines the gradient.
-
y0
NumberCenter position of the inner circle that defines the gradient.
-
r0
NumberRadius of the inner circle that defines the gradient.
-
x1
NumberCenter position of the outer circle that defines the gradient.
-
y1
NumberCenter position of the outer circle that defines the gradient.
-
r1
NumberRadius of the outer circle that defines the gradient.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
beginRadialGradientStroke
-
colors
-
ratios
-
x0
-
y0
-
r0
-
x1
-
y1
-
r1
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
ArrayAn array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
-
ratios
ArrayAn 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
NumberCenter position of the inner circle that defines the gradient.
-
y0
NumberCenter position of the inner circle that defines the gradient.
-
r0
NumberRadius of the inner circle that defines the gradient.
-
x1
NumberCenter position of the outer circle that defines the gradient.
-
y1
NumberCenter position of the outer circle that defines the gradient.
-
r1
NumberRadius of the outer circle that defines the gradient.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
beginStroke
-
color
Begins a stroke with the specified color. This ends the current sub-path. A tiny API method "s" also exists.
Parameters:
-
color
StringA CSS compatible color value (ex. "#FF0000", "red", or "rgba(255,0,0,0.5)"). Setting to null will result in no stroke.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
bezierCurveTo
-
cp1x
-
cp1y
-
cp2x
-
cp2y
-
x
-
y
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.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
bf
()
protected
bs
()
protected
bt
()
protected
c
()
protected
clear
()
Graphics
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:
The Graphics instance the method is called on (useful for chaining calls.)
clone
()
Graphics
Returns a clone of this Graphics instance.
Returns:
A clone of the current Graphics instance.
closePath
()
Graphics
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:
The Graphics instance the method is called on (useful for chaining calls.)
cp
()
protected
curveTo
()
Maps the familiar ActionScript curveTo()
method to the functionally similar quadraticCurveTo
method.
dc
()
protected
de
()
protected
decodePath
-
str
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
StringThe path string to decode.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
dp
()
protected
dr
()
protected
draw
-
ctx
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
CanvasRenderingContext2DThe canvas 2D context object to draw into.
drawAsPath
-
ctx
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
CanvasRenderingContext2DThe canvas 2D context object to draw into.
drawCircle
-
x
-
y
-
radius
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:
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
drawEllipse
-
x
-
y
-
w
-
h
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:
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
drawPolyStar
-
x
-
y
-
radius
-
sides
-
pointSize
-
angle
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
NumberPosition of the center of the shape.
-
y
NumberPosition of the center of the shape.
-
radius
NumberThe outer radius of the shape.
-
sides
NumberThe number of points on the star or sides on the polygon.
-
pointSize
NumberThe 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
NumberThe 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:
The Graphics instance the method is called on (useful for chaining calls.)
drawRect
()
Maps the familiar ActionScript drawRect()
method to the functionally similar rect
method.
drawRoundRect
-
x
-
y
-
w
-
h
-
radius
Draws a rounded rectangle with all corners with the specified radius.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
drawRoundRectComplex
-
x
-
y
-
w
-
h
-
radiusTL
-
radiusTR
-
radiusBR
-
radiusBL
Draws a rounded rectangle with different corner radii. Supports positive and negative corner radii. A tiny API method "rc" also exists.
Parameters:
-
x
NumberThe horizontal coordinate to draw the round rect.
-
y
NumberThe vertical coordinate to draw the round rect.
-
w
NumberThe width of the round rect.
-
h
NumberThe height of the round rect.
-
radiusTL
NumberTop left corner radius.
-
radiusTR
NumberTop right corner radius.
-
radiusBR
NumberBottom right corner radius.
-
radiusBL
NumberBottom left corner radius.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
ef
()
protected
endFill
()
Graphics
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:
The Graphics instance the method is called on (useful for chaining calls.)
endStroke
()
Graphics
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:
The Graphics instance the method is called on (useful for chaining calls.)
es
()
protected
f
()
protected
getHSL
-
hue
-
saturation
-
lightness
-
[alpha]
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
NumberThe hue component for the color, between 0 and 360.
-
saturation
NumberThe saturation component for the color, between 0 and 100.
-
lightness
NumberThe lightness component for the color, between 0 and 100.
-
[alpha]
Number optionalThe alpha component for the color where 0 is fully transparent and 1 is fully opaque.
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)".
getRGB
-
r
-
g
-
b
-
[alpha]
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
NumberThe red component for the color, between 0 and 0xFF (255).
-
g
NumberThe green component for the color, between 0 and 0xFF (255).
-
b
NumberThe blue component for the color, between 0 and 0xFF (255).
-
[alpha]
Number optionalThe alpha component for the color where 0 is fully transparent and 1 is fully opaque.
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)".
initialize
()
protected
Initialization method.
inject
-
callback
-
data
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:
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
isEmpty
()
Boolean
Returns true if this Graphics instance has no drawing commands.
Returns:
Returns true if this Graphics instance has no drawing commands.
lf
()
protected
lineTo
-
x
-
y
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:
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
ls
()
protected
lt
()
protected
moveTo
-
x
-
y
Moves the drawing point to the specified position. A tiny API method "mt" also exists.
Parameters:
Returns:
The Graphics instance the method is called on (useful for chaining calls).
mt
()
protected
p
()
protected
qt
()
protected
quadraticCurveTo
-
cpx
-
cpy
-
x
-
y
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.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
r
()
protected
rc
()
protected
rect
-
x
-
y
-
w
-
h
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.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
rf
()
protected
rr
()
protected
rs
()
protected
s
()
protected
setStrokeStyle
-
thickness
-
[caps=0]
-
[joints=0]
-
[miterLimit=10]
-
[ignoreScale=false]
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
NumberThe width of the stroke.
-
[caps=0]
String | Number optionalIndicates 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 optionalSpecifies 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 optionalIf 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 optionalIf true, the stroke will be drawn at the specified thickness regardless of active transformations.
Returns:
The Graphics instance the method is called on (useful for chaining calls.)
ss
()
protected
Properties
_ctx
CanvasRenderingContext2D
protected
static
Command
Function
static
Exposes the Command class used internally by Graphics. Useful for extending the Graphics class or injecting functionality.
STROKE_CAPS_MAP
Array
final
static
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);