function Graphics() {


	// public properties
		/**
		 * Holds a reference to the last command that was created or appended. For example, you could retain a reference
		 * to a Fill command in order to dynamically update the color later by using:
		 *
		 * 		var myFill = myGraphics.beginFill("red").command;
		 * 		// update color later:
		 * 		myFill.style = "yellow";
		 *
		 * @property command
		 * @type Object
		 **/
		this.command = null;


	// private properties
		/**
		 * @property _stroke
		 * @protected
		 * @type {Stroke}
		 **/
		this._stroke = null;

		/**
		 * @property _strokeStyle
		 * @protected
		 * @type {StrokeStyle}
		 **/
		this._strokeStyle = null;
		
		/**
		 * @property _oldStrokeStyle
		 * @protected
		 * @type {StrokeStyle}
		 **/
		this._oldStrokeStyle = null;
		
		/**
		 * @property _strokeDash
		 * @protected
		 * @type {StrokeDash}
		 **/
		this._strokeDash = null;
		
		/**
		 * @property _oldStrokeDash
		 * @protected
		 * @type {StrokeDash}
		 **/
		this._oldStrokeDash = null;

		/**
		 * @property _strokeIgnoreScale
		 * @protected
		 * @type Boolean
		 **/
		this._strokeIgnoreScale = false;

		/**
		 * @property _fill
		 * @protected
		 * @type {Fill}
		 **/
		this._fill = null;

		/**
		 * @property _instructions
		 * @protected
		 * @type {Array}
		 **/
		this._instructions = [];

		/**
		 * Indicates the last instruction index that was committed.
		 * @property _commitIndex
		 * @protected
		 * @type {Number}
		 **/
		this._commitIndex = 0;

		/**
		 * Uncommitted instructions.
		 * @property _activeInstructions
		 * @protected
		 * @type {Array}
		 **/
		this._activeInstructions = [];

		/**
		 * This indicates that there have been changes to the activeInstruction list since the last updateInstructions call.
		 * @property _dirty
		 * @protected
		 * @type {Boolean}
		 * @default false
		 **/
		this._dirty = false;

		/**
		 * Index to draw from if a store operation has happened.
		 * @property _storeIndex
		 * @protected
		 * @type {Number}
		 * @default 0
		 **/
		this._storeIndex = 0;

	// setup:
		this.clear();
	}
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 EaselJS framework by calling {{#crossLink "Graphics/draw"}}{{/crossLink}}
directly, or it can be used with the {{#crossLink "Shape"}}{{/crossLink}} object to draw vector graphics within the
context of an EaselJS display list.

There are two approaches to working with Graphics object: calling methods on a Graphics instance (the "Graphics API"), or
instantiating Graphics command objects and adding them to the graphics queue via {{#crossLink "Graphics/append"}}{{/crossLink}}.
The former abstracts the latter, simplifying beginning and ending paths, fills, and strokes.

     var g = new createjs.Graphics();
     g.setStrokeStyle(1);
     g.beginStroke("#000000");
     g.beginFill("red");
     g.drawCircle(0,0,30);

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:

     myGraphics.beginStroke("red").beginFill("blue").drawRect(20, 20, 100, 50);

Each graphics API call generates a command object (see below). The last command to be created can be accessed via
{{#crossLink "Graphics/command:property"}}{{/crossLink}}:

     var fillCommand = myGraphics.beginFill("red").command;
     // ... later, update the fill style/color:
     fillCommand.style = "blue";
     // or change it to a bitmap fill:
     fillCommand.bitmap(myImage);

For more direct control of rendering, you can instantiate and append command objects to the graphics queue directly. In this case, you
need to manage path creation manually, and ensure that fill/stroke is applied to a defined path:

     // start a new path. Graphics.beginCmd is a reusable BeginPath instance:
     myGraphics.append(createjs.Graphics.beginCmd);
     // we need to define the path before applying the fill:
     var circle = new createjs.Graphics.Circle(0,0,30);
     myGraphics.append(circle);
     // fill the path we just defined:
     var fill = new createjs.Graphics.Fill("red");
     myGraphics.append(fill);

These approaches can be used together, for example to insert a custom command:

     myGraphics.beginFill("red");
     var customCommand = new CustomSpiralCommand(etc);
     myGraphics.append(customCommand);
     myGraphics.beginFill("blue");
     myGraphics.drawCircle(0, 0, 30);

See {{#crossLink "Graphics/append"}}{{/crossLink}} for more info on creating custom commands.

<h4>Tiny API</h4>
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.

<table>
    <tr><td><b>Tiny</b></td><td><b>Method</b></td><td><b>Tiny</b></td><td><b>Method</b></td></tr>
    <tr><td>mt</td><td>{{#crossLink "Graphics/moveTo"}}{{/crossLink}} </td>
    <td>lt</td> <td>{{#crossLink "Graphics/lineTo"}}{{/crossLink}}</td></tr>
    <tr><td>a/at</td><td>{{#crossLink "Graphics/arc"}}{{/crossLink}} / {{#crossLink "Graphics/arcTo"}}{{/crossLink}} </td>
    <td>bt</td><td>{{#crossLink "Graphics/bezierCurveTo"}}{{/crossLink}} </td></tr>
    <tr><td>qt</td><td>{{#crossLink "Graphics/quadraticCurveTo"}}{{/crossLink}} (also curveTo)</td>
    <td>r</td><td>{{#crossLink "Graphics/rect"}}{{/crossLink}} </td></tr>
    <tr><td>cp</td><td>{{#crossLink "Graphics/closePath"}}{{/crossLink}} </td>
    <td>c</td><td>{{#crossLink "Graphics/clear"}}{{/crossLink}} </td></tr>
    <tr><td>f</td><td>{{#crossLink "Graphics/beginFill"}}{{/crossLink}} </td>
    <td>lf</td><td>{{#crossLink "Graphics/beginLinearGradientFill"}}{{/crossLink}} </td></tr>
    <tr><td>rf</td><td>{{#crossLink "Graphics/beginRadialGradientFill"}}{{/crossLink}} </td>
    <td>bf</td><td>{{#crossLink "Graphics/beginBitmapFill"}}{{/crossLink}} </td></tr>
    <tr><td>ef</td><td>{{#crossLink "Graphics/endFill"}}{{/crossLink}} </td>
    <td>ss / sd</td><td>{{#crossLink "Graphics/setStrokeStyle"}}{{/crossLink}} / {{#crossLink "Graphics/setStrokeDash"}}{{/crossLink}} </td></tr>
    <tr><td>s</td><td>{{#crossLink "Graphics/beginStroke"}}{{/crossLink}} </td>
    <td>ls</td><td>{{#crossLink "Graphics/beginLinearGradientStroke"}}{{/crossLink}} </td></tr>
    <tr><td>rs</td><td>{{#crossLink "Graphics/beginRadialGradientStroke"}}{{/crossLink}} </td>
    <td>bs</td><td>{{#crossLink "Graphics/beginBitmapStroke"}}{{/crossLink}} </td></tr>
    <tr><td>es</td><td>{{#crossLink "Graphics/endStroke"}}{{/crossLink}} </td>
    <td>dr</td><td>{{#crossLink "Graphics/drawRect"}}{{/crossLink}} </td></tr>
    <tr><td>rr</td><td>{{#crossLink "Graphics/drawRoundRect"}}{{/crossLink}} </td>
    <td>rc</td><td>{{#crossLink "Graphics/drawRoundRectComplex"}}{{/crossLink}} </td></tr>
    <tr><td>dc</td><td>{{#crossLink "Graphics/drawCircle"}}{{/crossLink}} </td>
    <td>de</td><td>{{#crossLink "Graphics/drawEllipse"}}{{/crossLink}} </td></tr>
    <tr><td>dp</td><td>{{#crossLink "Graphics/drawPolyStar"}}{{/crossLink}} </td>
    <td>p</td><td>{{#crossLink "Graphics/decodePath"}}{{/crossLink}} </td></tr>
</table>

Here is the above example, using the tiny API instead.

     myGraphics.s("red").f("blue").r(20, 20, 100, 50);

@class Graphics
@constructor