Global

Members

randomStroke

Sets a random stroke style
Source:

randomStroke

Sets a random stroke style
Source:

Methods

<private> _boundingBox()

Source:

arc(x, y, radius, start, end, counter)

Adds an arc with the given control points and radius to the current subpath, connected to the previous point by a straight line.
Parameters:
Name Type Argument Description
x number the x coordinate
y number the y coordinate
radius number the radius of the arc
start number the starting angle
end number the ending angle
counter Boolean <optional>
 Omitted or set to false this argument will arc counter/anti clockwise
Source:

arcTo(x1, y1, x2, y2, radius)

Adds points to the subpath such that the arc described by the circumference of the circle described by the arguments, starting at the given start angle and ending at the given end angle, going in the given direction ( defaulting to clockwise ), is added to the path, connected to the previous point by a straight line.
Parameters:
Name Type Description
x1 number the starting x coordinate
y1 number the starting y coordinate
x2 number the ending x coordinate
y2 number the ending y coordinate
radius number the radius of the arc
Source:

beginPath()

Resets the current path.
Source:

bezierCurveTo(cp1x, cp1y, cp2y, cp2y, x, y)

Adds the given point to the current subpath, connected to the previous one by a cubic Bezier curve with the given control points.
Parameters:
Name Type Description
cp1x number the starting control point x coordinate
cp1y number the starting control point x coordinate
cp2y number the ending control point x coordinate
cp2y number the ending control point x coordinate
x number the ending x coordinate
y number the ending y coordinate
Source:

boundingBox()

Returns the current bounding box of the last drawn shape- specifically an object containing the top left, top, top right, right, bottom right, bottom, bottom left and left coordinates.
Source:

circle(params)

Draws a circle with the supplied starting x,y, radius, fillStyle, and strokeStyle
Parameters:
Name Type Description
params object a parameter object
Properties
Name Type Description
x number the starting x coordinate
y number the starting y coordinate
radius radius the radius of the circle
fillStyle Any the fill style for the circle or false to suppress the fill
strokeStyle Any the stroke style for the circle or false to suppress the stroke
Source:

clearRect(params)

Clears a rectangular area, making it fully transparent
Parameters:
Name Type Description
params object a parameter object
Properties
Name Type Description
x number Starting x coordinate. Defaults to the current position.
y number Starting y coordinate. Defaults to the current position.
width number Rectangle width. Defaults to 0.
height number Rectangle height. Defaults to 0.
Source:

clip()

Further constrains the clipping region to the current default path.
Source:

closePath()

Marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.
Source:

createImageData(height, width, imageData)

Passed a height and width, returns an ImageData object with the given dimensions in CSS pixels ( which might map to a different number of actual device pixels exposed by the object itself ). All the pixels in the returned object are transparent black. passed an imageData object, returns an ImageData object with the same dimensions as the argument. All the pixels in the returned object are transparent black.
Parameters:
Name Type Description
height number the height of the image data object
width number the width of the image data object
imageData object an imageData object
Source:

createLinearGradient(x0, y0, x1, y1)

Creates a linear gradient. Takes four arguments that represent the start point ( x0, y0) and end point ( x1, y1) of the gradient. The method must return a linear CanvasGradient initialized with the specified line.
Parameters:
Name Type Description
x0 number the starting x coordinate
y0 number the starting y coordinate
x1 number the ending x coordinate
y1 number the ending y coordinate
Source:

createPattern(img, repetition)

Returns a CanvasPattern object that repeats the specified img in the specified repetition direction.
Parameters:
Name Type Description
img HTMLElement the image to repeate
repetition string the direction to repeat. One of four values repeat, repeat-x, repeat-y, no-repeat
Source:

createRadialGradient(x0, y0, r0, x1, y1, r1)

Returns an object that represents a radial or circular gradient to use in a canvas context.
Parameters:
Name Type Description
x0 number The x-coordinate of the starting circle of the gradient.
y0 number The y-coordinate of the starting circle of the gradient.
r0 number The radius of the starting circle.
x1 number The x-coordinate of the ending circle of the gradient.
y1 number The y-coordinate of the ending circle of the gradient.
r1 number The radius of the ending circle.
Source:

currentPos(x, y)

Get or set the current x and y coordinates of the 'cursor'
Parameters:
Name Type Description
x number the x coordinate
y number the new y coordinate
Source:

drawImage(x, y, img)

Draws a specified image onto a canvas
Parameters:
Name Type Description
x number Starting x coordinate.
y number Starting y coordinate.
img HTMLElement the image to draw onto the Canvas
Source:

fill()

Fills subpaths by using the current fill style.
Source:

fillCircle(params)

Draws a circle with the supplied starting x,y, radius and fillStyle and no stroke
Parameters:
Name Type Description
params object a parameters object
Properties
Name Type Description
x number the starting x coordinate
y number the starting y coordinate
radius radius the radius of the circle
fillStyle Any the fill style for the circle. a falsey value will use the current context fillStyle
Source:

fillRect(x, y, width, height)

Paints a rectangle onto the canvas using the current fill style.
Parameters:
Name Type Description
x number Starting x coordinate
y number Starting y coordinate
width number Rectangle width
height number Rectangle height
Source:

fillStyle(color)

Called with a color argument, sets the fillStyle. Called without, returns the current fillStyle.
Parameters:
Name Type Description
color Any the fill style
Source:

fillText(text, x, y, maxWidth)

Writes text onto the canvas using the current text style.
Parameters:
Name Type Description
text string the text to write into the canvas
x number Starting x coordinate
y number Starting y coordinate
maxWidth number the maximum width of the text box
Source:

font(declaration)

Called with a declaration argument, sets the context font. Called without, returns the current context font.
Parameters:
Name Type Description
declaration string the font style
Source:

getImageData(x, y, width, height)

Returns an ImageData object representing the pixel data for the area of the canvas defined by the height and width provided starting at the provided x, y coordinates
Parameters:
Name Type Description
x number Starting x coordinate
y number Starting y coordinate
width number imageData width
height number imageData height
Source:

getPixelColor(x, y)

Returns an object with the rgba value of a given pixel
Parameters:
Name Type Description
x number The x coordinate of the pixel to test
y number The y coordinate of the pixel to test
Source:

getPixelsByColor(r, g, b)

Returns the RGB color of a specific pixel
Parameters:
Name Type Description
r number The red value
g number The green value
b number The blue value
Source:

globalAlpha(num)

Called with a num argument, sets the context alpha/transparency. Called without, returns the current context globalAlpha.
Parameters:
Name Type Description
num Floating-point the new globalAlpha value in a range between 0 and 1.
Source:

globalCompositeOperation(op)

Gets or sets a value that indicates how source images are drawn onto a destination image.
Parameters:
Name Type Description
op string one of the following options (from http://www.w3.org/TR/2dcontext/#compositing)
source-atop
A atop B. Display the source image wherever both images are opaque. Display the destination image wherever the destination image is opaque but the source image is transparent. Display transparency elsewhere.
source-in
A in B. Display the source image wherever both the source image and destination image are opaque. Display transparency elsewhere.
source-out
A out B. Display the source image wherever the source image is opaque and the destination image is transparent. Display transparency elsewhere.
source-over (default)
A over B. Display the source image wherever the source image is opaque. Display the destination image elsewhere.
destination-atop
B atop A. Same as source-atop but using the destination image instead of the source image and vice versa.
destination-in
B in A. Same as source-in but using the destination image instead of the source image and vice versa.
destination-out
B out A. Same as source-out but using the destination image instead of the source image and vice versa.
destination-over
B over A. Same as source-over but using the destination image instead of the source image and vice versa.
lighter
A plus B. Display the sum of the source image and destination image, with color values approaching 255 (100%) as a limit.
copy
A (B is ignored). Display the source image instead of the destination image.
xor
A xor B. Exclusive OR of the source image and destination image.
vendorName-operationName
Vendor-specific extensions to the list of composition operators should use this syntax.
Source:

isPointInPath(x, y)

Determines if the specified point is in the current path.
Parameters:
Name Type Description
x number The x coordinate to test
y number The y coordinate to test
Source:

line(params)

Draws a line from a point (x,y) at a pixel distance at a provided angle
Parameters:
Name Type Description
params object a parameter object
Properties
Name Type Description
x number the starting x coordinate
y number the starting y coordinate
distance number the length of the line
angle number The angle of the line
Source:

lineCap(cap)

Gets or sets the lineCap style for lines
Parameters:
Name Type Description
cap string defines the line cap. One of the following three options:
butt
Default. A flat edge is put perpendicular to each end of the line with no cap added.
round
A semicircle or rounded end cap is added to each end of the line.
square
A square end cap is added to each end of the line.
Source:

lineJoin(join)

Gets or sets the type of connection created when two lines meet
Parameters:
Name Type Description
join string defines the style of line join. One of the following three options:
bevel
A filled triangle connects the two lines that are joined, creating a beveled corner.
round
A filled arc connects the two lines, creating a rounded corner.
miter
Default. The outside edges of the lines are continued until they intersect and the resulting triangle is filled, creating a sharp or pointed corner.
Source:

lineTo(x, y)

Draws a line from the current point in the canvas to a new x/y pair provided as an argument
Parameters:
Name Type Description
x number the ending x coordinate
y number the ending y coordinate
Source:

lineWidth(width)

Gets or sets the width of lines in the context
Parameters:
Name Type Description
width number the width of the line.
Source:

measureText(string)

The width of the text, in CSS pixels.
Parameters:
Name Type Description
string string the string to measure
Source:
Returns:
the width of the text in pixels

miterLimit(limit)

Gets or sets the miterLimit of the context
Parameters:
Name Type Description
limit number a number between 0 and 10 indicating the miter limit for the context
Source:

moveTo(x, y)

Moves the context to the supplied x and y coordinates
Parameters:
Name Type Description
x number the ending x coordinate
y number the ending y coordinate
Source:

putImageData(imageData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

Puts the data from an imageData object onto a canvas.
Parameters:
Name Type Description
imageData imageData the image to paint onto the canvas
x number The x-coordinate, in pixels, of the upper-left corner of the rectangle on the canvas
y number The y-coordinate, in pixels, of the upper-left corner of the rectangle on the canvas
dirtyX number The x value, relative to image where to place the image on the canvas.
dirtyY number The y value, relative to image where to place the image on the canvas.
dirtyWidth number the width of the image
dirtyHeight number the height of the image
Source:

quadraticCurveTo(cpx, cpy, x, y)

Adds a point to the current subpath by using the specified control points that represent a quadratic Bézier curve.
Parameters:
Name Type Description
cpx number The x of the Bézier control point.
cpy number The y of the Bézier control point.
x number The x coorindate of the new point
y number The y coorindate of the new point
Source:

quadraticCurveToFixed(cpx, cpy, x, y)

Adds a point to the current subpath by using the specified control points that represent a quadratic Bézier curve.
Parameters:
Name Type Description
cpx number The x of the Bézier control point.
cpy number The y of the Bézier control point.
x number The x coorindate of the new point
y number The y coorindate of the new point
Source:

randomHex()

returns a random hex value
Source:

rect(x, y, width, height)

Draws a rectangle on the current path
Parameters:
Name Type Description
x number Starting x coordinate.
y number Starting y coordinate.
width number Rectangle width.
height number Rectangle height.
Source:

rectangle(params)

Draws a rectangle in the canvas container
Parameters:
Name Type Description
params an object containing parameters for the rectangle
Properties
Name Type Description
x number Starting x coordinate. Defaults to the current position.
y number Starting y coordinate. Defaults to the current position.
width number Rectangle width. Defaults to 0.
height number Rectangle height. Defaults to 0.
fillStyle String The valid fillStyle.
Source:

reset()

Resets the canvas container, erasing the currently displayed drawings.
Source:

restore()

Returns previously saved CanvasRenderingContext2D path state and attributes.
Source:

rotate(angle)

rotates the canvas context based on a supploed angle argument
Parameters:
Name Type Description
angle in radians to rotate the
Source:

roundedRectangle(params)

Draws a rounded rectlangle to the canvas.
Parameters:
Name Type Description
params an object containing parameters for the rectangle
Properties
Name Type Description
x number Starting x coordinate. Defaults to the current position.
y number Starting y coordinate. Defaults to the current position.
width number Rectangle width. Defaults to 0.
height number Rectangle height. Defaults to 0.
fillStyle String The valid fillStyle.
radius String the radius of the rounded corners
Source:

roundedRectangle(params)

Draws a rounded rectlangle to the canvas.
Parameters:
Name Type Description
params an object containing parameters for the rectangle
Properties
Name Type Description
x number Starting x coordinate. Defaults to the current position.
y number Starting y coordinate. Defaults to the current position.
width number Rectangle width. Defaults to 0.
height number Rectangle height. Defaults to 0.
fillStyle String The valid fillStyle. false to suppress the fill
strokeStyle String The valid strokeStyle. false to suppress the stroke
radius String the radius of the rounded corners
Source:

save()

saves the current state of the canvas
Source:

scale(x, y)

Scales the current context by the specified horizontal and vertical factors
Parameters:
Name Type Description
x number The x scaling factor
y number The y scaling factor
Source:

setTransform(m11, m12, m21, m22, dx, dy)

Changes the transformation matrix to the matrix given by the arguments
Parameters:
Name Type Description
m11 number the m1,1 value in the matrix.
m12 number The m1,2 value in the matrix.
m21 number The m2,1 value in the matrix.
m22 number The m2,2 value in the matrix.
dx number The delta x (dx) value in the matrix.
dy number The delta y (dy) value in the matrix.
Source:

shadowBlur(num)

gets or sets the amount of blur on shadows
Parameters:
Name Type Description
num number the amount of blur
Source:

shadowColor(color)

gets or sets the shadowColor
Parameters:
Name Type Description
color color the valid CSS color value of the shadow
Source:

shadowOffset(x, y)

Gets/Sets shadowOffsetX and shadowOffsetY in one call. Passing one parameter sets both shadowOffsetX and shadowOffsetY to the same value Passing no parameters returns an object containing the x and y offsets shadowOffset().x === shadowOffsetX() && shadowOffset().y === shadowOffsetY()
Parameters:
Name Type Description
x number shadowOffsetX
y number shadowOffsetY
Source:

shadowOffsetX(num)

gets/sets the shadow shadowOffsetX of the context
Parameters:
Name Type Description
num number the amount of offset
Source:

shadowOffsetY(num)

gets/sets the shadow shadowOffsetY of the context
Parameters:
Name Type Description
num number the amount of offset
Source:

star(params)

Draws a star with the supplied number of points, total diameter, and inner-diameter
Parameters:
Name Type Description
params object the parameter object
Properties
Name Type Description
x number the staring x coordinate
y number the staring y coordinate
points
innerRadius
outerRadius
angle number Defaults to 0
Source:

stroke()

Stokes the current path.
Source:

strokeCircle(params)

Draws a circle with the supplied starting x,y, radius and strokeStyle and no fill
Parameters:
Name Type Description
params object an object containing options for the circle.
Properties
Name Type Description
x number the starting x coordinate
y number the starting y coordinate
radius radius the radius of the circle
strokeStyle Any the stroke style for the circle. a falsey value will use the current context strokeStyle
Source:

strokeRect(x, y, width, height)

Draws a stroked rectangle to the canvas.
Parameters:
Name Type Description
x number Starting x coordinate.
y number Starting y coordinate.
width number Rectangle width.
height number Rectangle height.
Source:

strokeRoundedRectangle(params)

Draws a rounded rectlangle to the canvas.
Parameters:
Name Type Description
params an object containing parameters for the rectangle
Properties
Name Type Description
x number Starting x coordinate. Defaults to the current position.
y number Starting y coordinate. Defaults to the current position.
width number Rectangle width. Defaults to 0.
height number Rectangle height. Defaults to 0.
strokeStyle String The valid fillStyle.
radius String the radius of the rounded corners
Source:

strokeStyle(color)

gets/sets the strokeStyle for the context
Parameters:
Name Type Description
color string the valid color
Source:

strokeText(text, x, y, maxWidth)

Draws stroked text to the canvas
Parameters:
Name Type Description
text string the text to write to the canvas
x number Starting x coordinate.
y number Starting y coordinate.
maxWidth number the maximum width of the text
Source:

textAlign(align)

gets/sets the textAlign for the context
Parameters:
Name Type Description
align string one of the following values
start
Default. If the canvas is left-to-right, the anchor point is the left edge of the text. If the canvas is right-to-left, the anchor point is the right edge of the text.
end
If the canvas is left-to-right, the anchor point is the right edge of the text. If the canvas is right-to-left, the anchor point is the left edge of the text.
left
The anchor point is the left edge of the text.
right
The anchor point is the right edge of the text.
center
The anchor point is centered in the text.
source : http://msdn.microsoft.com/en-us/library/windows/apps/hh465914.aspx
Source:

textBaseline(baseline)

gets/sets the textBaseline for the context
Parameters:
Name Type Description
baseline string one of the following values
top
The top of the em square.
hanging
The hanging baseline
middle
The middle of the em square.
alphabetic
Default. The alphabetic baseline.
ideographic
The ideographic baseline.
bottom
The bottom of the em square.
source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465918.aspx
Source:

transform(m11, m12, m21, m22, dx, dy)

transforms the current context
Parameters:
Name Type Description
m11 number the m1,1 value in the matrix.
m12 number The m1,2 value in the matrix.
m21 number The m2,1 value in the matrix.
m22 number The m2,2 value in the matrix.
dx number The delta x (dx) value in the matrix.
dy number The delta y (dy) value in the matrix.
Source:

translate(x, y)

Translates the current context
Parameters:
Name Type Description
x number the x transformation
y number the y transformation
Source: