Class createjs.Graphics

Extends .

Defined in: graphics.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	createjs.Graphics() A class that exposes an easy-to-use API for generating vector drawing commands.

Field Summary
Field Attributes	Field Name and Description
	box The bounding box of this graphics.
<static>	createjs.Graphics.MAX_HEIGHT The maximum height allowed for cache
<static>	createjs.Graphics.MAX_WIDTH The maximum width allowed for cache

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, opt_repetition, opt_matrix) Begins a pattern fill using the specified image.
	beginBitmapStroke(image, opt_repetition) Begins a pattern stroke using the specified image.
	beginFill(opt_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(opt_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).
	cache(flag) Draws queued graphics commands to the cache renderer of this object.
	clear() Clears all drawing instructions, effectively resetting this createjs.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.
<static>	createjs.Graphics.Command() An inner interface used by the createjs.Graphics class to execute a drawing command.
	decodePath(encoded) Decodes a compact-encoded-path string.
	draw(context) Draws the display object into the specified context.
	drawAsPath(context) Draws only the paths of this createjs.Graphics instance.
	drawCircle(x, y, radius) Draws a circle with the specified radius at (x, y).
	drawEllipse(x, y, width, height) Draws an ellipse (oval) with a specified width and height.
	drawPolyStar(x, y, radius, sides, opt_pointSize, opt_angle) Draws a star or a convex.
	drawRoundRect(x, y, width, height, radius) Draws a rounded rectangle with all corners with the specified radius.
	drawRoundRectComplex(x, y, width, height, radiusTL, radiusTR, radiusBR, radiusBL) Draws a rounded rectangle with different corner radii.
	endFill() Ends the current sub-path, and begins a new one with no fill.
	endStroke() Ends the current sub-path, and begins a new one with no stroke.
<static>	createjs.Graphics.getHSL(hue, saturation, lightness, opt_alpha) Returns a CSS-compatible color string from three HSL values or from four HSL values.
<static>	createjs.Graphics.getRGB(color, opt_arg0, opt_arg1, opt_arg2) Returns a CSS-compatible color string either from a packed RGBA value, from three RGB values, or from four RGBA values.
	hitTest(x, y) Returns whether the specified point is in this object.
	hitTestObject(point) Returns whether the specified point is in this createjs.Graphics instance.
	inject(callback, data) Injects a method of the Canvas 2D API.
	isDirty() Returns true if this createjs.Graphics instance needs a redraw.
	isEmpty() Returns whether this createjs.Graphics instance has drawing commands.
	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.
	paint(renderer) Paints this graphics with the given createjs.Renderer interface.
	quadraticCurveTo(cpx, cpy, x, y) Draws a quadratic bezier curve from the current drawing point to (x, y) using the control point (cpx, cpy).
	rect(x, y, width, height) Draws a rectangle at (x, y) with the specified width and height using the current fill and/or stroke.
<static>	createjs.Graphics.reset() Resets the global variables used by this class and the inner classes in this file.
	setStrokeStyle(opt_thickness, opt_caps, opt_joints, opt_miterLimit, opt_ignoreScale) Sets the stroke style for the current sub-path.
	uncache() Removes the cache renderer from this object.

Class Detail

createjs.Graphics()

A class that exposes an easy-to-use API for generating vector drawing commands. This class draws vector-drawing commands to a memory bitmap with the Canvas 2D API so createjs.Renderer objects can use it.

Field Detail

box

The bounding box of this graphics.

<static> createjs.Graphics.MAX_HEIGHT

The maximum height allowed for cache

<static> createjs.Graphics.MAX_WIDTH

The maximum width allowed for cache

Method Detail

{createjs.Graphics} 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); A tiny API method "a" also exists.

Parameters:
{number} x
{number} y
{number} radius
{number} startAngle
{number} endAngle
{boolean} anticlockwise

Returns:: {createjs.Graphics}

{createjs.Graphics} arcTo(x1, y1, x2, y2, radius)

Draws an arc with the specified control points and radius. A tiny API method "at" also exists.

Parameters:
{number} x1
{number} y1
{number} x2
{number} y2
{number} radius

Returns:: {createjs.Graphics}

{createjs.Graphics} beginBitmapFill(image, opt_repetition, opt_matrix)

Begins a pattern fill using the specified image. This ends the current sub-path. A tiny API method "bf" also exists.

Parameters:
{HTMLImageElement} image
{string=} opt_repetition
{Object.=} opt_matrix

Returns:: {createjs.Graphics}

{createjs.Graphics} beginBitmapStroke(image, opt_repetition)

Begins a pattern stroke 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:
{HTMLImageElement} image
{string=} opt_repetition

Returns:: {createjs.Graphics}

{createjs.Graphics} beginFill(opt_color)

Begins a fill with the specified color. This ends the current sub-path. A tiny API method "f" also exists.

Parameters:
{string=} opt_color

Returns:: {createjs.Graphics}

{createjs.Graphics} 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: createjs.Graphics. beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120). drawRect(20, 20, 120, 120); A tiny API method "lf" also exists.

Parameters:
{Array} colors
{Array} ratios
{number} x0
{number} y0
{number} x1
{number} y1

Returns:: {createjs.Graphics}

{createjs.Graphics} beginLinearGradientStroke(colors, ratios, x0, y0, x1, y1)

Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). A tiny API method "ls" also exists.

Parameters:
{Array} colors
{Array} ratios
{number} x0
{number} y0
{number} x1
{number} y1

Returns:: {createjs.Graphics}

{createjs.Graphics} 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: mycreatejs.Graphics. beginRadialGradientFill(["#F00", "#00F"], [0, 1], 100, 100, 0, 100, 100, 50). drawCircle(100, 100, 50); A tiny API method "rf" also exists.

Parameters:
{Array} colors
{Array} ratios
{number} x0
{number} y0
{number} r0
{number} x1
{number} y1
{number} r1

Returns:: {createjs.Graphics}

{createjs.Graphics} beginRadialGradientStroke(colors, ratios, x0, y0, r0, x1, y1, r1)

Begins a radial gradient stroke. A tiny API method "rs" also exists.

Parameters:
{Array} colors
{Array} ratios
{number} x0
{number} y0
{number} r0
{number} x1
{number} y1
{number} r1

Returns:: {createjs.Graphics}

{createjs.Graphics} beginStroke(opt_color)

Begins a stroke with the specified color. This ends the current sub-path. A tiny API method "s" also exists.

Parameters:
{string=} opt_color

Returns:: {createjs.Graphics}

{createjs.Graphics} 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). A tiny API method "bt" also exists.

Parameters:
{number} cp1x
{number} cp1y
{number} cp2x
{number} cp2y
{number} x
{number} y

Returns:: {createjs.Graphics}

cache(flag)

Draws queued graphics commands to the cache renderer of this object.

Parameters:
{number} flag

{createjs.Graphics} clear()

Clears all drawing instructions, effectively resetting this createjs.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:: {createjs.Graphics}

{createjs.Graphics} 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. A tiny API method "cp" also exists.

Returns:: {createjs.Graphics}

<static> createjs.Graphics.Command()

An inner interface used by the createjs.Graphics class to execute a drawing command.

{createjs.Graphics} decodePath(encoded)

Decodes a compact-encoded-path string. A tiny API method "p" also exists.

Parameters:
{string} encoded

Returns:: {createjs.Graphics}

draw(context)

Draws the display object into the specified context.

Parameters:
{CanvasRenderingContext2D} context

drawAsPath(context)

Draws only the paths of this createjs.Graphics instance.

Parameters:
{CanvasRenderingContext2D} context

{createjs.Graphics} drawCircle(x, y, radius)

Draws a circle with the specified radius at (x, y). A tiny API method "dc" also exists.

Parameters:
{number} x
{number} y
{number} radius

Returns:: {createjs.Graphics}

{createjs.Graphics} drawEllipse(x, y, width, height)

Draws an ellipse (oval) with a specified width and height. Similar to the Graphics.drawCircle() method except the width and height can be different. A tiny API method "de" also exists.

Parameters:
{number} x
{number} y
{number} width
{number} height

Returns:: {createjs.Graphics}

{createjs.Graphics} drawPolyStar(x, y, radius, sides, opt_pointSize, opt_angle)

Draws a star or a convex. This method draws a start if pointSize is greater than 0, or it draws a convex 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: mycreatejs.Graphics.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:
{number} x
{number} y
{number} radius
{number} sides
{number=} opt_pointSize
{number=} opt_angle: (in degrees)

Returns:: {createjs.Graphics}

{createjs.Graphics} drawRoundRect(x, y, width, height, radius)

Draws a rounded rectangle with all corners with the specified radius.

Parameters:
{number} x
{number} y
{number} width
{number} height
{number} radius

Returns:: {createjs.Graphics}

{createjs.Graphics} drawRoundRectComplex(x, y, width, height, 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:
{number} x
{number} y
{number} width
{number} height
{number} radiusTL
{number} radiusTR
{number} radiusBR
{number} radiusBL

Returns:: {createjs.Graphics}

{createjs.Graphics} endFill()

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:: {createjs.Graphics}

{createjs.Graphics} endStroke()

Ends the current sub-path, and begins a new one with no stroke. Functionally identical to the Graphics.beginStroke(null) call. A tiny API method "es" also exists.

Returns:: {createjs.Graphics}

<static> {string} createjs.Graphics.getHSL(hue, saturation, lightness, opt_alpha)

Returns a CSS-compatible color string from three HSL values or from four HSL values.

Parameters:
{number} hue
{number} saturation
{number} lightness
{number=} opt_alpha

Returns:: {string}

<static> {string} createjs.Graphics.getRGB(color, opt_arg0, opt_arg1, opt_arg2)

Returns a CSS-compatible color string either from a packed RGBA value, from three RGB values, or from four RGBA values.

Parameters:
{number} color
{number=} opt_arg0
{number=} opt_arg1
{number=} opt_arg2

Returns:: {string}

{boolean} hitTest(x, y)

Returns whether the specified point is in this object.

Parameters:
{number} x
{number} y

Returns:: {boolean}

{number} hitTestObject(point)

Returns whether the specified point is in this createjs.Graphics instance.

Parameters:
{createjs.Point} point

Returns:: {number}

{createjs.Graphics} inject(callback, data)

Injects a method of the Canvas 2D API.

Parameters:
{Function} callback
{Object} data

Returns:: {createjs.Graphics}

{boolean} isDirty()

Returns true if this createjs.Graphics instance needs a redraw.

Returns:: {boolean}

{boolean} isEmpty()

Returns whether this createjs.Graphics instance has drawing commands.

Returns:: {boolean}

{createjs.Graphics} 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.

Parameters:
{number} x
{number} y

Returns:: {createjs.Graphics}

{createjs.Graphics} moveTo(x, y)

Moves the drawing point to the specified position. A tiny API method "mt" also exists.

Parameters:
{number} x
{number} y

Returns:: {createjs.Graphics}

paint(renderer)

Paints this graphics with the given createjs.Renderer interface.

Parameters:
{createjs.Renderer} renderer

{createjs.Graphics} quadraticCurveTo(cpx, cpy, x, y)

Draws a quadratic bezier curve from the current drawing point to (x, y) using the control point (cpx, cpy). A tiny API method "qt" also exists.

Parameters:
{number} cpx
{number} cpy
{number} x
{number} y

Returns:: {createjs.Graphics}

{createjs.Graphics} rect(x, y, width, height)

Draws a rectangle at (x, y) with the specified width and height using the current fill and/or stroke. A tiny API method "r" also exists.

Parameters:
{number} x
{number} y
{number} width
{number} height

Returns:: {createjs.Graphics}

<static> createjs.Graphics.reset()

Resets the global variables used by this class and the inner classes in this file.

{createjs.Graphics} setStrokeStyle(opt_thickness, opt_caps, opt_joints, opt_miterLimit, opt_ignoreScale)

Sets the stroke style for the current sub-path. A tiny API method "ss" also exists.

Parameters:
{number=} opt_thickness
{(string|number)=} opt_caps
{(string|number)=} opt_joints
{number=} opt_miterLimit
{boolean=} opt_ignoreScale

Returns:: {createjs.Graphics}

uncache()

Removes the cache renderer from this object.

Classes

Class createjs.Graphics