Class Index | File Index

Classes


Class Graphics

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.

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);
Defined in: Graphics.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
Graphics(instructions)
Constructs a new Graphics instance.
Field Summary
Field Attributes Field Name and Description
 
a
Shortcut to arc.
 
at
Shortcut to arcTo.
 
bf
Shortcut to beginBitmapFill.
 
bs
Shortcut to beginBitmapStroke.
 
bt
Shortcut to bezierCurveTo.
 
c
Shortcut to clear.
 
cp
Shortcut to closePath.
 
Maps the familiar ActionScript curveTo() method to the functionally similar quatraticCurveTo() method.
 
dc
Shortcut to drawCircle.
 
de
Shortcut to drawEllipse.
 
dp
Shortcut to drawPolyStar.
 
dr
Shortcut to drawRect.
 
Maps the familiar ActionScript drawRect() method to the functionally similar rect() method.
 
ef
Shortcut to endFill.
 
es
Shortcut to endStroke.
 
f
Shortcut to beginFill.
 
lf
Shortcut to beginLinearGradientFill.
 
ls
Shortcut to beginLinearGradientStroke.
 
lt
Shortcut to lineTo.
 
mt
Shortcut to moveTo.
 
qt
Shortcut to quadraticCurveTo / curveTo.
 
r
Shortcut to rect.
 
rc
Shortcut to drawRoundRectComplex.
 
rf
Shortcut to beginRadialGradientFill.
 
rr
Shortcut to drawRoundRect.
 
rs
Shortcut to beginRadialGradientStroke.
 
s
Shortcut to beginStroke.
 
ss
Shortcut to setStrokeStyle.
<static>  
Graphics.STROKE_CAPS_MAP
Maps numeric values for the caps parameter of setStrokeStyle to corresponding string values.
<static>  
Maps numeric values for the joints parameter of setStrokeStyle to corresponding string values.
Method Summary
Method Attributes Method Name and Description
 
arc(x, y, radius, startAngle, endAngle, anticlockwise)
Draws an arc defined by the radius, startAngle and endAngle arguments, centered at the position (x, y).
 
arcTo(x1, y1, x2, y2, radius)
Draws an arc with the specified control points and radius.
 
beginBitmapFill(image, repetition)
Begins a pattern fill using the specified image.
 
beginBitmapStroke(image, repetition)
Begins a pattern fill using the specified image.
 
beginFill(color)
Begins a fill with the specified color.
 
beginLinearGradientFill(colors, ratios, x0, y0, x1, y1)
Begins a linear gradient fill defined by the line (x0, y0) to (x1, y1).
 
beginLinearGradientStroke(colors, ratios, x0, y0, x1, y1)
Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1).
 
beginRadialGradientFill(colors, ratios, x0, y0, r0, x1, y1, r1)
Begins a radial gradient fill.
 
beginRadialGradientStroke(colors, ratios, x0, y0, r0, x1, y1, r1)
Begins a radial gradient stroke.
 
beginStroke(color)
Begins a stroke with the specified color.
 
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).
 
Clears all drawing instructions, effectively reseting this Graphics instance.
 
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.
 
drawCircle(x, y, radius)
Draws a circle with the specified radius at (x, y).
 
drawEllipse(x, y, w, h)
Draws an ellipse (oval).
 
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.
 
drawRoundRect(x, y, w, h, radius)
Draws a rounded rectangle with all corners with the specified radius.
 
drawRoundRectComplex(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL)
Draws a rounded rectangle with different corner radiuses.
 
Ends the current subpath, and begins a new one with no fill.
 
Ends the current subpath, and begins a new one with no stroke.
<static>  
Graphics.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)".
<static>  
Graphics.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)".
 
lineTo(x, y)
Draws a line from the current drawing point to the specified position, which become the new current drawing point.
 
moveTo(x, y)
Moves the drawing point to the specified position.
 
quadraticCurveTo(cpx, cpy, x, y)
Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy).
 
rect(x, y, w, h)
Draws a rectangle at (x, y) with the specified width and height using the current fill and/or stroke.
 
setStrokeStyle(thickness, caps, joints, miter)
Sets the stroke style for the current subpath.
Class Detail
Graphics(instructions)
Constructs a new Graphics instance.
Parameters:
instructions
Optional. This is a string that will be eval'ed in the scope of this Graphics object. This provides a mechanism for generating a vector shape from a serialized string. Ex. "beginFill('#F00');drawRect(0, 0, 10, 10);"
Field Detail
a
Shortcut to arc.

at
Shortcut to arcTo.

bf
Shortcut to beginBitmapFill.

bs
Shortcut to beginBitmapStroke.

bt
Shortcut to bezierCurveTo.

c
Shortcut to clear.

cp
Shortcut to closePath.

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

dc
Shortcut to drawCircle.

de
Shortcut to drawEllipse.

dp
Shortcut to drawPolyStar.

dr
Shortcut to drawRect.

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

ef
Shortcut to endFill.

es
Shortcut to endStroke.

f
Shortcut to beginFill.

lf
Shortcut to beginLinearGradientFill.

ls
Shortcut to beginLinearGradientStroke.

lt
Shortcut to lineTo.

mt
Shortcut to moveTo.

qt
Shortcut to quadraticCurveTo / curveTo.

r
Shortcut to rect.

rc
Shortcut to drawRoundRectComplex.

rf
Shortcut to beginRadialGradientFill.

rr
Shortcut to drawRoundRect.

rs
Shortcut to beginRadialGradientStroke.

s
Shortcut to beginStroke.

ss
Shortcut to setStrokeStyle.

<static> Graphics.STROKE_CAPS_MAP
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, myGraphics.ss(16, 2) would set the line caps to "square".

<static> Graphics.STROKE_JOINTS_MAP
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, myGraphics.ss(16, 0, 2) would set the line joints to "bevel".
Method Detail
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 arc(100, 100, 20, 0, Math.PI*2) would draw a full circle with a radius of 20 centered at (100, 100). For detailed information, read the whatwg spec.
Parameters:
x
y
radius
startAngle
endAngle
anticlockwise

arcTo(x1, y1, x2, y2, radius)
Draws an arc with the specified control points and radius. For detailed information, read the whatwg spec.
Parameters:
x1
y1
x2
y2
radius

beginBitmapFill(image, repetition)
Begins a pattern fill using the specified image. This ends the current subpath.
Parameters:
image
The Image, Canvas, or Video object to use as the pattern.
repetition
Optional. Indicates whether to repeat the image in the fill area. One of repeat, repeat-x, repeat-y, or no-repeat. Defaults to "repeat".

beginBitmapStroke(image, repetition)
Begins a pattern fill using the specified image. This ends the current subpath.
Parameters:
image
The Image, Canvas, or Video object to use as the pattern.
repetition
Optional. Indicates whether to repeat the image in the fill area. One of repeat, repeat-x, repeat-y, or no-repeat. Defaults to "repeat".

beginFill(color)
Begins a fill with the specified color. This ends the current subpath.
Parameters:
color
A CSS compatible color value (ex. "#FF0000" or "rgba(255,0,0,0.5)"). Setting to null will result in no fill.

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 subpath. 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);
Parameters:
colors
An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
ratios
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
The position of the first point defining the line that defines the gradient direction and size.
y0
The position of the first point defining the line that defines the gradient direction and size.
x1
The position of the second point defining the line that defines the gradient direction and size.
y1
The position of the second point defining the line that defines the gradient direction and size.

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 subpath. 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);
Parameters:
colors
An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
ratios
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
The position of the first point defining the line that defines the gradient direction and size.
y0
The position of the first point defining the line that defines the gradient direction and size.
x1
The position of the second point defining the line that defines the gradient direction and size.
y1
The position of the second point defining the line that defines the gradient direction and size.

beginRadialGradientFill(colors, ratios, x0, y0, r0, x1, y1, r1)
Begins a radial gradient fill. This ends the current subpath. 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);
Parameters:
colors
An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
ratios
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
Center position of the inner circle that defines the gradient.
y0
Center position of the inner circle that defines the gradient.
r0
Radius of the inner circle that defines the gradient.
x1
Center position of the outer circle that defines the gradient.
y1
Center position of the outer circle that defines the gradient.
r1
Radius of the outer circle that defines the gradient.

beginRadialGradientStroke(colors, ratios, x0, y0, r0, x1, y1, r1)
Begins a radial gradient stroke. This ends the current subpath. 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);
Parameters:
colors
An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
ratios
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
Center position of the inner circle that defines the gradient.
y0
Center position of the inner circle that defines the gradient.
r0
Radius of the inner circle that defines the gradient.
x1
Center position of the outer circle that defines the gradient.
y1
Center position of the outer circle that defines the gradient.
r1
Radius of the outer circle that defines the gradient.

beginStroke(color)
Begins a stroke with the specified color. This ends the current subpath.
Parameters:
color
A CSS compatible color value (ex. "#FF0000" or "rgba(255,0,0,0.5)"). Setting to null will result in no stroke.

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.
Parameters:
cp1x
cp1y
cp2x
cp2y
x
y

clear()
Clears all drawing instructions, effectively reseting this Graphics instance.

closePath()
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.

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

drawEllipse(x, y, w, h)
Draws an ellipse (oval).
Parameters:
x
y
w
h

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); // -90 makes the first point vertical
Parameters:
x
Position of the center of the shape.
y
Position of the center of the shape.
radius
The outer radius of the shape.
sides
The number of points on the star or sides on the polygon.
pointSize
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
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.

drawRoundRect(x, y, w, h, radius)
Draws a rounded rectangle with all corners with the specified radius.
Parameters:
x
y
w
h
radius
Corner radius.

drawRoundRectComplex(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL)
Draws a rounded rectangle with different corner radiuses.
Parameters:
x
y
w
h
radiusTL
Top left corner radius.
radiusTR
Top right corner radius.
radiusBR
Bottom right corner radius.
radiusBL
Bottom left corner radius.

endFill()
Ends the current subpath, and begins a new one with no fill. Functionally identical to beginFill(null).

endStroke()
Ends the current subpath, and begins a new one with no stroke. Functionally identical to beginStroke(null).

<static> Graphics.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)". For example, Graphics.getHSL(150, 100, 70) will return "hsl(150,100,70)".
Parameters:
hue
The hue component for the color, between 0 and 360.
saturation
The saturation component for the color, between 0 and 100.
lightness
The lightness component for the color, between 0 and 100.
alpha
Optional. The alpha component for the color where 0 is fully transparent and 1 is fully opaque.

<static> Graphics.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, Graphics.getRGB(50, 100, 150, 0.5) will return "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) will return "rgba(255,0,255,0.2)".
Parameters:
r
The red component for the color, between 0 and 0xFF (255).
g
The green component for the color, between 0 and 0xFF (255).
b
The blue component for the color, between 0 and 0xFF (255).
alpha
Optional. The alpha component for the color where 0 is fully transparent and 1 is fully opaque.

lineTo(x, y)
Draws a line from the current drawing point to the specified position, which become the new current drawing point. For detailed information, read the whatwg spec.
Parameters:
x
y

moveTo(x, y)
Moves the drawing point to the specified position.
Parameters:
x
y

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.
Parameters:
cpx
cpy
x
y

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.
Parameters:
x
y
w
Width of the rectangle
h
Height of the rectangle

setStrokeStyle(thickness, caps, joints, miter)
Sets the stroke style for the current subpath. 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");
Parameters:
thickness
The width of the stroke.
caps
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
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.
miter
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.

Documentation generated by JsDoc Toolkit 2.3.2 on Sun Feb 13 2011 22:46:01 GMT-0700 (MST)