1 /**
  2  * The MIT License (MIT)
  3  *
  4  * Copyright (c) 2016 DeNA Co., Ltd.
  5  *
  6  * Permission is hereby granted, free of charge, to any person obtaining a copy
  7  * of this software and associated documentation files (the "Software"), to deal
  8  * in the Software without restriction, including without limitation the rights
  9  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 10  * copies of the Software, and to permit persons to whom the Software is
 11  * furnished to do so, subject to the following conditions:
 12  *
 13  * The above copyright notice and this permission notice shall be included in
 14  * all copies or substantial portions of the Software.
 15  *
 16  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 17  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 18  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 19  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 20  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 21  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 22  * SOFTWARE.
 23  */
 24 
 25 /// <reference path="base.js"/>
 26 /// <reference path="object.js"/>
 27 /// <reference path="bounding_box.js"/>
 28 /// <reference path="counter.js"/>
 29 /// <reference path="base64.js"/>
 30 /// <reference path="config.js"/>
 31 
 32 /**
 33  * A class that exposes an easy-to-use API for generating vector drawing
 34  * commands. This class draws vector-drawing commands to a memory bitmap with
 35  * the Canvas 2D API so createjs.Renderer objects can use it.
 36  * @extends {createjs.Object}
 37  * @constructor
 38  */
 39 createjs.Graphics = function() {
 40   createjs.Object.call(this);
 41 
 42   /**
 43    * The bounding box of this graphics.
 44    * @type {createjs.BoundingBox}
 45    */
 46   this.box = new createjs.BoundingBox();
 47 
 48   /**
 49    * A list of all paths.
 50    * @type {Array.<createjs.Graphics.Command>}
 51    * @private
 52    */
 53   this.path_ = [];
 54 
 55   /**
 56    * The current path.
 57    * @type {Array.<createjs.Graphics.Command>}
 58    * @private
 59    */
 60   this.active_ = [];
 61 };
 62 createjs.inherits('Graphics', createjs.Graphics, createjs.Object);
 63 
 64 /**
 65  * The maximum width allowed for cache <canvas> elements.
 66  * @define {number}
 67  */
 68 createjs.Graphics.MAX_WIDTH = 128;
 69 
 70 /**
 71  * The maximum height allowed for cache <canvas> elements.
 72  * @define {number}
 73  */
 74 createjs.Graphics.MAX_HEIGHT = 128;
 75 
 76 /**
 77  * The renderer that renders its paths to a cache.
 78  * @type {createjs.Graphics.CanvasRenderer}
 79  * @private
 80  */
 81 createjs.Graphics.prototype.renderer_ = null;
 82 
 83 /**
 84  * An ID associated with the renderer object.
 85  * @type {string}
 86  * @private
 87  */
 88 createjs.Graphics.prototype.key_ = '';
 89 
 90 /**
 91  * Whether this graphics needs to update its cache.
 92  * @type {boolean}
 93  * @private
 94  */
 95 createjs.Graphics.prototype.redraw_ = false;
 96 
 97 /**
 98  * Whether this object needs to update its paths.
 99  * @type {boolean}
100  * @private
101  */
102 createjs.Graphics.prototype.dirty_ = false;
103 
104 /**
105  * A command that starts a stroke path.
106  * @type {createjs.Graphics.Command}
107  * @private
108  */
109 createjs.Graphics.prototype.stroke_ = null;
110 
111 /**
112  * A style of a stroke path.
113  * @type {createjs.Graphics.LineStyle}
114  * @private
115  */
116 createjs.Graphics.prototype.style_ = null;
117 
118 /**
119  * A command that starts a fill path.
120  * @type {createjs.Graphics.Command}
121  * @private
122  */
123 createjs.Graphics.prototype.fill_ = null;
124 
125 /**
126  * A margin size added around this graphics to prevent it from being clipped.
127  * @type {number}
128  * @private
129  */
130 createjs.Graphics.prototype.margin_ = 0;
131 
132 /**
133 /**
134  * An inner class that renders graphic commands with the Canvas 2D API.
135  * @param {number} flag
136  * @constructor
137  */
138 createjs.Graphics.CanvasRenderer = function(flag) {
139   /// <param type="number" name="flag"/>
140   /**
141    * The output <canvas> element.
142    * @type {HTMLCanvasElement}
143    * @private
144    */
145   this.canvas_ = createjs.createCanvas();
146 
147   /**
148    * The 2D rendering context attached to the output <canvas> element.
149    * @type {CanvasRenderingContext2D}
150    * @private
151    */
152   this.context_ = createjs.getRenderingContext2D(this.canvas_);
153 
154   // Set the id property of this HTMLCanvasElement object on debug builds to
155   // identify leaked objects.
156   if (createjs.DEBUG) {
157     this.canvas_.id = 'graphics' + createjs.Graphics.CanvasRenderer.id_++;
158   }
159 
160   if (flag & 2) {
161     // Use a low-color texture for masks to save memory.
162     this.canvas_.format_ = createjs.Renderer.Format.RGBA4444;
163   }
164 };
165 
166 if (createjs.DEBUG) {
167   /**
168    * An ID assigned to CanvasRenderer objects on debug builds.
169    * @type {number}
170    * @private
171    */
172   createjs.Graphics.CanvasRenderer.id_ = 0;
173 }
174 
175 /**
176  * The current width of the output <canvas> element.
177  * @type {number}
178  * @private
179  */
180 createjs.Graphics.CanvasRenderer.prototype.width_ = 0;
181 
182 /**
183  * The current height of the output <canvas> element.
184  * @type {number}
185  * @private
186  */
187 createjs.Graphics.CanvasRenderer.prototype.height_ = 0;
188 
189 /**
190  * The current horizontal scale.
191  * @type {number}
192  * @private
193  */
194 createjs.Graphics.CanvasRenderer.prototype.scaleX_ = 1;
195 
196 /**
197  * The current vertical scale.
198  * @type {number}
199  * @private
200  */
201 createjs.Graphics.CanvasRenderer.prototype.scaleY_ = 1;
202 
203 /**
204  * The reference count to this renderer.
205  * @type {number}
206  * @private
207  */
208 createjs.Graphics.CanvasRenderer.prototype.references_ = 1;
209 
210 /**
211  * The current line width of the output <canvas> element.
212  * @type {number}
213  * @private
214  */
215 createjs.Graphics.CanvasRenderer.prototype.lineWidth_ = 1;
216 
217 /**
218  * The current line cap of the output <canvas> element.
219  * @type {number}
220  * @private
221  */
222 createjs.Graphics.CanvasRenderer.prototype.lineCap_ = 0;
223 
224 /**
225  * The current corner type of the output <canvas> element.
226  * @type {number}
227  * @private
228  */
229 createjs.Graphics.CanvasRenderer.prototype.lineJoin_ = 0;
230 
231 /**
232  * The current miter width of the output <canvas> element.
233  * @type {number}
234  * @private
235  */
236 createjs.Graphics.CanvasRenderer.prototype.miterLimit_ = 10;
237 
238 /**
239  * The current color to fill the inside of a path.
240  * @type {string}
241  * @private
242  */
243 createjs.Graphics.CanvasRenderer.prototype.fillColor_ = '';
244 
245 /**
246  * The current color to stroke a path.
247  * @type {string}
248  * @private
249  */
250 createjs.Graphics.CanvasRenderer.prototype.strokeColor_ = '';
251 
252 /**
253  * The renderer that draws this object.
254  * @type {createjs.Renderer}
255  * @private
256  */
257 createjs.Graphics.CanvasRenderer.prototype.output_ = null;
258 
259 /**
260  * Deletes cached resources created by the output renderer.
261  * @private
262  */
263 createjs.Graphics.CanvasRenderer.prototype.uncache_ = function() {
264   if (this.canvas_) {
265     if (this.output_) {
266       this.output_.uncache(this.canvas_);
267       this.output_ = null;
268     }
269     this.canvas_.width = 0;
270   }
271   this.context_ = null;
272   this.canvas_ = null;
273 };
274 
275 /**
276  * Increases the reference count to this renderer.
277  * @return {number}
278  * @private
279  */
280 createjs.Graphics.CanvasRenderer.prototype.addRef_ = function() {
281   /// <returns type="number"/>
282   return ++this.references_;
283 };
284 
285 /**
286  * Decreases the reference count to an object.
287  * @return {number}
288  * @private
289  */
290 createjs.Graphics.CanvasRenderer.prototype.release_ = function() {
291   /// <returns type="number"/>
292   var references = --this.references_;
293   if (references <= 0) {
294     this.uncache_();
295   }
296   return references;
297 };
298 
299 /**
300  * Attaches a createjs.Renderer object that draws this object.
301  * @param {createjs.Renderer} renderer
302  * @private
303  */
304 createjs.Graphics.CanvasRenderer.prototype.setOutput_ = function(renderer) {
305   /// <param type="createjs.Renderer" name="renderer"/>
306   this.output_ = renderer;
307 };
308 
309 /**
310  * Returns the HTMLCanvasElement object attached to this renderer.
311  * @return {HTMLCanvasElement}
312  * @private
313  */
314 createjs.Graphics.CanvasRenderer.prototype.getCanvas_ = function() {
315   /// <returns type="HTMLCanvasElement"/>
316   return this.canvas_;
317 };
318 
319 /**
320  * Sets the fill color.
321  * @param {string} color
322  * @private
323  */
324 createjs.Graphics.CanvasRenderer.prototype.setFillColor_ = function(color) {
325   /// <param type="string" name="color"/>
326   if (this.fillColor_ != color) {
327     this.fillColor_ = color;
328     this.context_.fillStyle = color;
329   }
330 };
331 
332 /**
333  * Creates a linear gradient.
334  * @param {Array.<string>} colors
335  * @param {Array.<number>} stops
336  * @param {number} x0
337  * @param {number} y0
338  * @param {number} x1
339  * @param {number} y1
340  * @return {CanvasGradient}
341  * @private
342  */
343 createjs.Graphics.CanvasRenderer.prototype.createLinearGradient_ =
344     function(colors, stops, x0, y0, x1, y1) {
345   /// <param type="Array" elementType="string" name="colors"/>
346   /// <param type="Array" elementType="number" name="stops"/>
347   /// <param type="number" name="x0"/>
348   /// <param type="number" name="y0"/>
349   /// <param type="number" name="x1"/>
350   /// <param type="number" name="y1"/>
351   /// <returns type="number"/>
352   var gradient = this.context_.createLinearGradient(x0, y0, x1, y1);
353   for (var i = 0; i < colors.length; ++i) {
354     gradient.addColorStop(stops[i], colors[i]);
355   }
356   return gradient;
357 };
358 
359 /**
360  * Creates a radial gradient.
361  * @param {Array.<string>} colors
362  * @param {Array.<number>} stops
363  * @param {number} x0
364  * @param {number} y0
365  * @param {number} r0
366  * @param {number} x1
367  * @param {number} y1
368  * @param {number} r1
369  * @return {CanvasGradient}
370  * @private
371  */
372 createjs.Graphics.CanvasRenderer.prototype.createRadialGradient_ =
373     function(colors, stops, x0, y0, r0, x1, y1, r1) {
374   /// <param type="Array" elementType="string" name="colors"/>
375   /// <param type="Array" elementType="number" name="stops"/>
376   /// <param type="number" name="x0"/>
377   /// <param type="number" name="y0"/>
378   /// <param type="number" name="r0"/>
379   /// <param type="number" name="x1"/>
380   /// <param type="number" name="y1"/>
381   /// <param type="number" name="r1"/>
382   /// <returns type="number"/>
383   var gradient = this.context_.createRadialGradient(x0, y0, r0, x1, y1, r1);
384   for (var i = 0; i < colors.length; ++i) {
385     gradient.addColorStop(stops[i], colors[i]);
386   }
387   return gradient;
388 };
389 
390 /**
391  * Sets the fill gradient.
392  * @param {CanvasGradient} gradient
393  * @private
394  */
395 createjs.Graphics.CanvasRenderer.prototype.setFillGradient_ =
396     function(gradient) {
397   /// <param type="CanvasGradient" name="gradient"/>
398   this.context_.fillStyle = gradient;
399   this.fillColor_ = '';
400 };
401 
402 /**
403  * Sets the fill pattern.
404  * @param {HTMLImageElement} image
405  * @param {string} repeat
406  * @private
407  */
408 createjs.Graphics.CanvasRenderer.prototype.setFillPattern_ =
409     function(image, repeat) {
410   /// <param type="HTMLImageElement" name="image"/>
411   /// <param type="string" name="repeat"/>
412   var pattern = this.context_.createPattern(image, repeat);
413   this.context_.fillStyle = pattern;
414   this.fillColor_ = '';
415 };
416 
417 /**
418  * Sets the all stroke styles.
419  * @param {number} lineWidth
420  * @param {number} lineCap
421  * @param {number} lineJoin
422  * @param {number} miterLimit
423  * @private
424  */
425 createjs.Graphics.CanvasRenderer.prototype.setStrokeStyles_ =
426     function(lineWidth, lineCap, lineJoin, miterLimit) {
427   /// <param type="number" name="lineWidth"/>
428   /// <param type="number" name="lineCap"/>
429   /// <param type="number" name="lineJoin"/>
430   /// <param type="number" name="miterLimit"/>
431   if (this.lineWidth_ != lineWidth) {
432     this.lineWidth_ = lineWidth;
433     this.context_.lineWidth = lineWidth;
434   }
435   if (this.lineCap_ != lineCap) {
436     this.lineCap_ = lineCap;
437     var LINE_CAPS = ['butt', 'round', 'square'];
438     this.context_.lineCap = LINE_CAPS[lineCap];
439   }
440   if (this.lineJoin_ != lineJoin) {
441     this.lineJoin_ = lineJoin;
442     var LINE_JOINS = ['miter', 'round', 'bevel'];
443     this.context_.lineJoin = LINE_JOINS[lineJoin];
444   }
445   if (this.miterLimit_ != miterLimit) {
446     this.miterLimit_ = miterLimit;
447     this.context_.miterLimit = miterLimit;
448   }
449 };
450 
451 /**
452  * Sets the stroke color.
453  * @param {string} color
454  * @private
455  */
456 createjs.Graphics.CanvasRenderer.prototype.setStrokeColor_ =
457     function(color) {
458   /// <param type="string" name="color"/>
459   if (this.strokeColor_ != color) {
460     this.strokeColor_ = color;
461     this.context_.strokeStyle = color;
462   }
463 };
464 
465 /**
466  * Sets the stroke gradient.
467  * @param {CanvasGradient} gradient
468  * @private
469  */
470 createjs.Graphics.CanvasRenderer.prototype.setStrokeGradient_ =
471     function(gradient) {
472   /// <param type="CanvasGradient" name="gradient"/>
473   this.context_.strokeStyle = gradient;
474   this.strokeColor_ = '';
475 };
476 
477 /**
478  * Sets the stroke pattern.
479  * @param {HTMLImageElement} image
480  * @param {string} repeat
481  * @private
482  */
483 createjs.Graphics.CanvasRenderer.prototype.setStrokePattern_ =
484     function(image, repeat) {
485   /// <param type="HTMLImageElement" name="image"/>
486   /// <param type="string" name="repeat"/>
487   var pattern = this.context_.createPattern(image, repeat);
488   this.context_.strokeStyle = pattern;
489   this.strokeColor_ = '';
490 };
491 
492 /**
493  * Sets the bounding box of drawing paths.
494  * @param {number} x
495  * @param {number} y
496  * @param {number} width
497  * @param {number} height
498  * @private
499  */
500 createjs.Graphics.CanvasRenderer.prototype.setBox_ =
501     function(x, y, width, height) {
502   /// <param type="number" name="x"/>
503   /// <param type="number" name="y"/>
504   /// <param type="number" name="width"/>
505   /// <param type="number" name="height"/>
506   // To prevent creating huge <canvas> elements, limit the width of the cache
507   // and its height to 128 so the size of a cache <canvas> element is less than
508   // 128 * 128 * 4 = 64 KB.
509   this.scaleX_ = 1;
510   if (width > createjs.Graphics.MAX_WIDTH) {
511     this.scaleX_ = createjs.Graphics.MAX_WIDTH / width;
512     x *= this.scaleX_;
513     width = createjs.Graphics.MAX_WIDTH;
514   }
515   this.scaleY_ = 1;
516   if (height > createjs.Graphics.MAX_HEIGHT) {
517     this.scaleY_ = createjs.Graphics.MAX_HEIGHT / height;
518     y *= this.scaleY_;
519     height = createjs.Graphics.MAX_HEIGHT;
520   }
521   if (this.width_ != width) {
522     this.width_ = width;
523     this.canvas_.width = width;
524   }
525   if (this.height_ != height) {
526     this.height_ = height;
527     this.canvas_.height = height;
528   }
529   this.context_.setTransform(this.scaleX_, 0, 0, this.scaleY_, -x, -y);
530   this.context_.clearRect(0, 0, width, height);
531 };
532 
533 /**
534  * Returns whether the specified point is opaque. This method currently
535  * returns the alpha value at the specified point.
536  * @param {number} x
537  * @param {number} y
538  * @return {number}
539  * @private
540  */
541 createjs.Graphics.CanvasRenderer.prototype.hitTestObject_ = function(x, y) {
542   /// <param type="number" name="x"/>
543   /// <param type="number" name="y"/>
544   /// <returns type="number"/>
545   var context = this.context_;
546   if (context) {
547     x *= this.scaleX_;
548     y *= this.scaleY_;
549     var pixels = context.getImageData(
550         createjs.truncate(x), createjs.truncate(y), 1, 1);
551     return pixels.data[3];
552   }
553   return 0;
554 };
555 
556 /**
557  * Creates a new drawing path.
558  * @private
559  */
560 createjs.Graphics.CanvasRenderer.prototype.pathBegin_ = function() {
561   this.context_.beginPath();
562 };
563 
564 /**
565  * Moves the drawing point.
566  * @param {number} x
567  * @param {number} y
568  * @private
569  */
570 createjs.Graphics.CanvasRenderer.prototype.pathMoveTo_ = function(x, y) {
571   /// <param type="number" name="x"/>
572   /// <param type="number" name="y"/>
573   this.context_.moveTo(x, y);
574 };
575 
576 /**
577  * Draws a line.
578  * @param {number} x
579  * @param {number} y
580  * @private
581  */
582 createjs.Graphics.CanvasRenderer.prototype.pathLineTo_ = function(x, y) {
583   /// <param type="number" name="x"/>
584   /// <param type="number" name="y"/>
585   this.context_.lineTo(x, y);
586 };
587 
588 /**
589  * Draws an arc with the specified control points and radius.
590  * @param {number} x1
591  * @param {number} y1
592  * @param {number} x2
593  * @param {number} y2
594  * @param {number} radius
595  * @private
596  */
597 createjs.Graphics.CanvasRenderer.prototype.pathArcTo_ =
598     function(x1, y1, x2, y2, radius) {
599   /// <param type="number" name="x1"/>
600   /// <param type="number" name="y1"/>
601   /// <param type="number" name="x2"/>
602   /// <param type="number" name="y2"/>
603   /// <param type="number" name="radius"/>
604   this.context_.arcTo(x1, y1, x2, y2, radius);
605 };
606 
607 /**
608  * Draws an arc.
609  * @param {number} x
610  * @param {number} y
611  * @param {number} radius
612  * @param {number} startAngle
613  * @param {number} endAngle
614  * @param {boolean} counterClockwise
615  * @private
616  */
617 createjs.Graphics.CanvasRenderer.prototype.pathArc_ =
618     function(x, y, radius, startAngle, endAngle, counterClockwise) {
619   /// <param type="number" name="x"/>
620   /// <param type="number" name="y"/>
621   /// <param type="number" name="radius"/>
622   /// <param type="number" name="startAngle"/>
623   /// <param type="number" name="endAngle"/>
624   /// <param type="boolean" name="counterClockwise"/>
625   this.context_.arc(x, y, radius, startAngle, endAngle, counterClockwise);
626 };
627 
628 /**
629  * Draws a quadratic bezier curve.
630  * @param {number} cpx
631  * @param {number} cpy
632  * @param {number} x
633  * @param {number} y
634  * @private
635  */
636 createjs.Graphics.CanvasRenderer.prototype.pathQuadraticCurveTo_ =
637     function(cpx, cpy, x, y) {
638   /// <param type="number" name="cpx"/>
639   /// <param type="number" name="cpy"/>
640   /// <param type="number" name="x"/>
641   /// <param type="number" name="y"/>
642   this.context_.quadraticCurveTo(cpx, cpy, x, y);
643 };
644 
645 /**
646  * Draws a cubic bezier curve.
647  * @param {number} cp1x
648  * @param {number} cp1y
649  * @param {number} cp2x
650  * @param {number} cp2y
651  * @param {number} x
652  * @param {number} y
653  * @private
654  */
655 createjs.Graphics.CanvasRenderer.prototype.pathCubicCurveTo_ =
656     function(cp1x, cp1y, cp2x, cp2y, x, y) {
657   /// <param type="number" name="cp1x"/>
658   /// <param type="number" name="cp1y"/>
659   /// <param type="number" name="cp2x"/>
660   /// <param type="number" name="cp2y"/>
661   /// <param type="number" name="x"/>
662   /// <param type="number" name="y"/>
663   this.context_.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
664 };
665 
666 /**
667  * Draws a rectangle.
668  * @param {number} x
669  * @param {number} y
670  * @param {number} width
671  * @param {number} height
672  * @private
673  */
674 createjs.Graphics.CanvasRenderer.prototype.pathRect_ =
675     function(x, y, width, height) {
676   /// <param type="number" name="x"/>
677   /// <param type="number" name="y"/>
678   /// <param type="number" name="width"/>
679   /// <param type="number" name="height"/>
680   this.context_.rect(x, y, width, height);
681 };
682 
683 /**
684  * Closes the current path.
685  * @private
686  */
687 createjs.Graphics.CanvasRenderer.prototype.pathClose_ = function() {
688   this.context_.closePath();
689 };
690 
691 /**
692  * Draws the current path.
693  * @param {boolean} fill
694  * @param {boolean} stroke
695  * @private
696  */
697 createjs.Graphics.CanvasRenderer.prototype.drawPath_ = function(fill, stroke) {
698   /// <param type="boolean" name="fill"/>
699   /// <param type="boolean" name="stroke"/>
700   if (fill) {
701     this.context_.fill();
702   }
703   if (stroke) {
704     this.context_.stroke();
705   }
706 };
707 
708 /**
709  * Finishes drawing all paths.
710  * @private
711  */
712 createjs.Graphics.CanvasRenderer.prototype.endPath_ = function() {
713 };
714 
715 /**
716  * An inner class that represents a linear gradient used by the
717  * createjs.Graphics.FillLinear class and the createjs.Graphics.StrokeLinear
718  * class.
719  * @param {Array.<string>} colors
720  * @param {Array.<number>} stops
721  * @param {number} x0
722  * @param {number} y0
723  * @param {number} x1
724  * @param {number} y1
725  * @constructor
726  */
727 createjs.Graphics.LinearGradient = function(colors, stops, x0, y0, x1, y1) {
728   /**
729    * @const {Array.<string>}
730    * @private
731    */
732   this.colors_ = colors;
733 
734   /**
735    * @const {Array.<number>}
736    * @private
737    */
738   this.stops_ = stops;
739 
740   /**
741    * @const {number}
742    * @private
743    */
744   this.x0_ = x0;
745 
746   /**
747    * @const {number}
748    * @private
749    */
750   this.y0_ = y0;
751 
752   /**
753    * @const {number}
754    * @private
755    */
756   this.x1_ = x1;
757 
758   /**
759    * @const {number}
760    * @private
761    */
762   this.y1_ = y1;
763 };
764 
765 /**
766  * Creates a createjs.Graphics.LinaerGradient object.
767  * @param {Array.<string>} colors
768  * @param {Array.<number>} stops
769  * @param {number} x0
770  * @param {number} y0
771  * @param {number} x1
772  * @param {number} y1
773  * @return {createjs.Graphics.LinearGradient}
774  */
775 createjs.Graphics.LinearGradient.get = function(colors, stops, x0, y0, x1, y1) {
776   /// <param type="Array" elementType="string" name="colors"/>
777   /// <param type="Array" elementType="number" name="stops"/>
778   /// <param type="number" name="x0"/>
779   /// <param type="number" name="y0"/>
780   /// <param type="number" name="x1"/>
781   /// <param type="number" name="y1"/>
782   /// <returns type="createjs.Graphics.LinearGradient"/>
783   return new createjs.Graphics.LinearGradient(colors, stops, x0, y0, x1, y1);
784 };
785 
786 /**
787  * Returns the CanvasGradient object attached to this object.
788  * @param {createjs.Graphics.CanvasRenderer} renderer
789  * @return {CanvasGradient}
790  */
791 createjs.Graphics.LinearGradient.prototype.getGradient = function(renderer) {
792   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
793   /// <returns type="CanvasGradient"/>
794   return renderer.createLinearGradient_(
795       this.colors_, this.stops_, this.x0_, this.y0_, this.x1_, this.y1_);
796 };
797 
798 /**
799  * Returns the string representation of this object.
800  * @return {string}
801  */
802 createjs.Graphics.LinearGradient.prototype.getText = function() {
803   /// <returns type="string"/>
804   return this.colors_.join() + ',' + this.stops_.join() + ',' +
805       this.x0_ + ',' + this.y0_ + ',' + this.x1_ + ',' + this.y1_;
806 };
807 
808 /**
809  * An inner class that represents a radial gradient used by the
810  * createjs.Graphics.FillRadial class and the createjs.Graphics.StrokeRadial
811  * class.
812  * @param {Array.<string>} colors
813  * @param {Array.<number>} stops
814  * @param {number} x0
815  * @param {number} y0
816  * @param {number} r0
817  * @param {number} x1
818  * @param {number} y1
819  * @param {number} r1
820  * @constructor
821  */
822 createjs.Graphics.RadialGradient =
823     function(colors, stops, x0, y0, r0, x1, y1, r1) {
824   /**
825    * @const {Array.<string>}
826    * @private
827    */
828   this.colors_ = colors;
829 
830   /**
831    * @const {Array.<number>}
832    * @private
833    */
834   this.stops_ = stops;
835 
836   /**
837    * @const {number}
838    * @private
839    */
840   this.x0_ = x0;
841 
842   /**
843    * @const {number}
844    * @private
845    */
846   this.y0_ = y0;
847 
848   /**
849    * @const {number}
850    * @private
851    */
852   this.r0_ = r0;
853 
854   /**
855    * @const {number}
856    * @private
857    */
858   this.x1_ = x1;
859 
860   /**
861    * @const {number}
862    * @private
863    */
864   this.y1_ = y1;
865 
866   /**
867    * @const {number}
868    * @private
869    */
870   this.r1_ = r1;
871 };
872 
873 /**
874  * Creates a createjs.Graphics.RadialGradient object.
875  * @param {Array.<string>} colors
876  * @param {Array.<number>} stops
877  * @param {number} x0
878  * @param {number} y0
879  * @param {number} r0
880  * @param {number} x1
881  * @param {number} y1
882  * @param {number} r1
883  * @return {createjs.Graphics.RadialGradient}
884  */
885 createjs.Graphics.RadialGradient.get =
886     function(colors, stops, x0, y0, r0, x1, y1, r1) {
887   /// <param type="Array" elementType="string" name="colors"/>
888   /// <param type="Array" elementType="number" name="stops"/>
889   /// <param type="number" name="x0"/>
890   /// <param type="number" name="y0"/>
891   /// <param type="number" name="x1"/>
892   /// <param type="number" name="y1"/>
893   /// <returns type="createjs.Graphics.RadialGradient"/>
894   return new createjs.Graphics.RadialGradient(
895       colors, stops, x0, y0, r0, x1, y1, r1);
896 };
897 
898 /**
899  * Returns the CanvasGradient object attached to this object.
900  * @param {createjs.Graphics.CanvasRenderer} renderer
901  * @return {CanvasGradient}
902  */
903 createjs.Graphics.RadialGradient.prototype.getGradient = function(renderer) {
904   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
905   /// <returns type="CanvasGradient"/>
906   return renderer.createRadialGradient_(
907       this.colors_, this.stops_,
908       this.x0_, this.y0_, this.r0_, this.x1_, this.y1_, this.r1_);
909 };
910 
911 /**
912  * Returns the string representation of this object.
913  * @return {string}
914  */
915 createjs.Graphics.RadialGradient.prototype.getText = function() {
916   /// <returns type="string"/>
917   return this.colors_.join() + ',' + this.stops_.join() + ',' +
918       this.x0_ + ',' + this.y0_ + ',' + this.r0_ + ',' +
919       this.x1_ + ',' + this.y1_ + ',' + this.r1_;
920 };
921 
922 /**
923  * An inner interface used by the createjs.Graphics class to execute a drawing
924  * command.
925  * @interface
926  */
927 createjs.Graphics.Command = function() {};
928 
929 /**
930  * Executes this drawing command, i.e. draws a shape to a cache <canvas>
931  * element.
932  * @param {createjs.Graphics.CanvasRenderer} renderer
933  */
934 createjs.Graphics.Command.prototype.paint = function(renderer) {};
935 
936 /**
937  * Returns the string representation of this command. When this string is not
938  * empty, the createjs.Graphics object adds its cache <canvas> element to a hash
939  * table so createjs.Shape objects can share it. (A createjs.Shape object
940  * generated by Flash creates a createjs.Graphics object in its constructor,
941  * e.g. 100 createjs.Shape instances create 100 createjs.Graphics instances of
942  * one shape. The createjs.Graphics object uses a hash table to shares such
943  * createjs.Graphics instances.)
944  * sharing Graphics objects generated by Flash.)
945  * @return {string}
946  */
947 createjs.Graphics.Command.prototype.getText = function() {};
948 
949 /**
950  * Returns this command does not have its string representation.
951  * @return {string}
952  */
953 createjs.Graphics.Command.getEmpty = function() {
954   /// <returns type="string"/>
955   return '';
956 };
957 
958 /**
959  * The known drawing-command names. (This object assigns non-empty strings only
960  * for the drawing commands used by Flash.)
961  * @enum {string}
962  * @private
963  */
964 createjs.Graphics.CommandName = {
965   MOVE_TO: 'M',
966   LINE_TO: '',
967   ARC_TO: '',
968   ARC: '',
969   QUADRATIC_CURVE_TO: 'Q',
970   CURVE_TO: '',
971   RECT: '',
972   BEGIN_PATH: '',
973   CLOSE_PATH: 'C',
974   FILL_COLOR: 'F',
975   FILL_LINEAR: 'LF',
976   FILL_RADIAL: 'RF',
977   FILL_PATTERN: '',
978   LINE_STYLE: 'L',
979   STROKE_COLOR: 'S',
980   STROKE_LINEAR: 'LS',
981   STROKE_RADIAL: 'RS',
982   STROKE_PATTERN: '',
983   DRAW_PATH: 'P',
984   DECODE_PATH: 'D'
985 };
986 
987 /**
988  * An inner class used by the createjs.Graphics class to move the current point.
989  * @param {number} x
990  * @param {number} y
991  * @implements {createjs.Graphics.Command}
992  * @constructor
993  */
994 createjs.Graphics.MoveTo = function(x, y) {
995   /**
996    * The x coordinate of the move point.
997    * @const {number}
998    * @private
999    */
1000   this.x_ = x;
1001 
1002   /**
1003    * The y coordinate of the move point.
1004    * @const {number}
1005    * @private
1006    */
1007   this.y_ = y;
1008 };
1009 
1010 /**
1011  * Creates a createjs.Graphics.MoveTo object.
1012  * @param {number} x
1013  * @param {number} y
1014  * @return {createjs.Graphics.MoveTo}
1015  */
1016 createjs.Graphics.MoveTo.get = function(x, y) {
1017   /// <param type="number" name="x"/>
1018   /// <param type="number" name="y"/>
1019   /// <returns type="createjs.Graphics.MoveTo"/>
1020   return new createjs.Graphics.MoveTo(x, y);
1021 };
1022 
1023 /** @override */
1024 createjs.Graphics.MoveTo.prototype.paint = function(renderer) {
1025   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1026   renderer.pathMoveTo_(this.x_, this.y_);
1027 };
1028 
1029 /** @override */
1030 createjs.Graphics.MoveTo.prototype.getText = function() {
1031   /// <returns type="string"/>
1032   return createjs.Graphics.CommandName.MOVE_TO + ',' + this.x_ + ',' + this.y_;
1033 };
1034 
1035 /**
1036  * An inner class used by the createjs.Graphics class to draw a line.
1037  * @param {number} x
1038  * @param {number} y
1039  * @implements {createjs.Graphics.Command}
1040  * @constructor
1041  */
1042 createjs.Graphics.LineTo = function(x, y) {
1043   /**
1044    * The x coordinate of the end of this line.
1045    * @const {number}
1046    * @private
1047    */
1048   this.x_ = x;
1049 
1050   /**
1051    * The y coordinate of the end of this line.
1052    * @const {number}
1053    * @private
1054    */
1055   this.y_ = y;
1056 };
1057 
1058 /**
1059  * Creates a createjs.Graphics.LineTo object.
1060  * @param {number} x
1061  * @param {number} y
1062  * @return {createjs.Graphics.LineTo}
1063  */
1064 createjs.Graphics.LineTo.get = function(x, y) {
1065   /// <param type="number" name="x"/>
1066   /// <param type="number" name="y"/>
1067   /// <returns type="createjs.Graphics.LineTo"/>
1068   return new createjs.Graphics.LineTo(x, y);
1069 };
1070 
1071 /** @override */
1072 createjs.Graphics.LineTo.prototype.paint = function(renderer) {
1073   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1074   renderer.pathLineTo_(this.x_, this.y_);
1075 };
1076 
1077 /** @override */
1078 createjs.Graphics.LineTo.prototype.getText = createjs.Graphics.Command.getEmpty;
1079 
1080 /**
1081  * An inner class used by the createjs.Graphics class to draw an arc between two
1082  * tangents.
1083  * @param {number} x1
1084  * @param {number} y1
1085  * @param {number} x2
1086  * @param {number} y2
1087  * @param {number} radius
1088  * @implements {createjs.Graphics.Command}
1089  * @constructor
1090  */
1091 createjs.Graphics.ArcTo = function(x1, y1, x2, y2, radius) {
1092   /**
1093    * The x coordinate of the corner of this arc.
1094    * @const {number}
1095    * @private
1096    */
1097   this.x1_ = x1;
1098 
1099   /**
1100    * The x coordinate of the corner of this arc.
1101    * @const {number}
1102    * @private
1103    */
1104   this.y1_ = y1;
1105 
1106   /**
1107    * The x coordinate of the end of this arc.
1108    * @const {number}
1109    * @private
1110    */
1111   this.x2_ = x2;
1112 
1113   /**
1114    * The y coordinate of the end of this arc.
1115    * @const {number}
1116    * @private
1117    */
1118   this.y2_ = y2;
1119 
1120   /**
1121    * The radius of this arc.
1122    * @const {number}
1123    * @private
1124    */
1125   this.radius_ = radius;
1126 };
1127 
1128 /**
1129  * Creates a createjs.Graphics.ArcTo object.
1130  * @param {number} x1
1131  * @param {number} y1
1132  * @param {number} x2
1133  * @param {number} y2
1134  * @param {number} radius
1135  * @return {createjs.Graphics.ArcTo}
1136  */
1137 createjs.Graphics.ArcTo.get = function(x1, y1, x2, y2, radius) {
1138   /// <param type="number" name="x1"/>
1139   /// <param type="number" name="y1"/>
1140   /// <param type="number" name="x2"/>
1141   /// <param type="number" name="y2"/>
1142   /// <param type="number" name="radius"/>
1143   /// <returns type="createjs.Graphics.ArcTo"/>
1144   return new createjs.Graphics.ArcTo(x1, y1, x2, y2, radius);;
1145 };
1146 
1147 /** @override */
1148 createjs.Graphics.ArcTo.prototype.paint = function(renderer) {
1149   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1150   renderer.pathArcTo_(this.x1_, this.y1_, this.x2_, this.y2_, this.radius_);
1151 };
1152 
1153 /** @override */
1154 createjs.Graphics.ArcTo.prototype.getText = createjs.Graphics.Command.getEmpty;
1155 
1156 /**
1157  * An inner class used by the createjs.Graphics class that draws an arc.
1158  * @param {number} x
1159  * @param {number} y
1160  * @param {number} radius
1161  * @param {number} startAngle
1162  * @param {number} endAngle
1163  * @param {boolean} anticlockwise
1164  * @implements {createjs.Graphics.Command}
1165  * @constructor
1166  */
1167 createjs.Graphics.Arc =
1168     function(x, y, radius, startAngle, endAngle, anticlockwise) {
1169   /**
1170    * The x coordinate of the center of this arc.
1171    * @const {number}
1172    * @private
1173    */
1174   this.x_ = x;
1175 
1176   /**
1177    * The y coordinate of the center of this arc.
1178    * @const {number}
1179    * @private
1180    */
1181   this.y_ = y;
1182 
1183   /**
1184    * The radius of this arc.
1185    * @const {number}
1186    * @private
1187    */
1188   this.radius_ = radius;
1189 
1190   /**
1191    * The start angle of this arc in radians.
1192    * @const {number}
1193    * @private
1194    */
1195   this.startAngle_ = startAngle;
1196 
1197   /**
1198    * The end angle of this arc in radians.
1199    * @const {number}
1200    * @private
1201    */
1202   this.endAngle_ = endAngle;
1203 
1204   /**
1205    * Whether the above angles represent counter-clockwise angles.
1206    * @const {boolean}
1207    * @private
1208    */
1209   this.anticlockwise_ = anticlockwise;
1210 };
1211 
1212 /**
1213  * Creates a createjs.Graphics.Arc object.
1214  * @param {number} x
1215  * @param {number} y
1216  * @param {number} radius
1217  * @param {number} startAngle
1218  * @param {number} endAngle
1219  * @param {boolean} anticlockwise
1220  * @return {createjs.Graphics.Arc}
1221  */
1222 createjs.Graphics.Arc.get =
1223     function(x, y, radius, startAngle, endAngle, anticlockwise) {
1224   /// <param type="number" name="x"/>
1225   /// <param type="number" name="y"/>
1226   /// <param type="number" name="radius"/>
1227   /// <param type="number" name="startAngle"/>
1228   /// <param type="number" name="endAngle"/>
1229   /// <param type="boolean" name="anticlockwise"/>
1230   /// <returns type="createjs.Graphics.Arc"/>
1231   return new createjs.Graphics.Arc(
1232       x, y, radius, startAngle, endAngle, anticlockwise);
1233 };
1234 
1235 /** @override */
1236 createjs.Graphics.Arc.prototype.paint = function(renderer) {
1237   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1238   renderer.pathArc_(this.x_, this.y_, this.radius_,
1239                     this.startAngle_, this.endAngle_, this.anticlockwise_);
1240 };
1241 
1242 /** @override */
1243 createjs.Graphics.Arc.prototype.getText = createjs.Graphics.Command.getEmpty;
1244 
1245 /**
1246  * An inner class used by the createjs.Graphics class to draw a quadratic bezier
1247  * curve.
1248  * @param {number} cpx
1249  * @param {number} cpy
1250  * @param {number} x
1251  * @param {number} y
1252  * @implements {createjs.Graphics.Command}
1253  * @constructor
1254  */
1255 createjs.Graphics.QuadraticCurveTo = function(cpx, cpy, x, y) {
1256   /**
1257    * The x coordinate of the control point of this curve.
1258    * @const {number}
1259    * @private
1260    */
1261   this.cpx_ = cpx;
1262 
1263   /**
1264    * The y coordinate of the control point of this curve.
1265    * @const {number}
1266    * @private
1267    */
1268   this.cpy_ = cpy;
1269 
1270   /**
1271    * The x coordinate of the end point of this curve.
1272    * @const {number}
1273    * @private
1274    */
1275   this.x_ = x;
1276 
1277   /**
1278    * The y coordinate of the end point of this curve.
1279    * @const {number}
1280    * @private
1281    */
1282   this.y_ = y;
1283 };
1284 
1285 /**
1286  * Creates a createjs.Graphics.QuadraticCurveTo object.
1287  * @param {number} cpx
1288  * @param {number} cpy
1289  * @param {number} x
1290  * @param {number} y
1291  * @return {createjs.Graphics.QuadraticCurveTo}
1292  */
1293 createjs.Graphics.QuadraticCurveTo.get = function(cpx, cpy, x, y) {
1294   /// <param type="number" name="cpx"/>
1295   /// <param type="number" name="cpy"/>
1296   /// <param type="number" name="x"/>
1297   /// <param type="number" name="y"/>
1298   /// <returns type="createjs.Graphics.QuadraticCurveTo"/>
1299   return new createjs.Graphics.QuadraticCurveTo(cpx, cpy, x, y);
1300 };
1301 
1302 /** @override */
1303 createjs.Graphics.QuadraticCurveTo.prototype.paint = function(renderer) {
1304   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1305   renderer.pathQuadraticCurveTo_(this.cpx_, this.cpy_, this.x_, this.y_);
1306 };
1307 
1308 /** @override */
1309 createjs.Graphics.QuadraticCurveTo.prototype.getText = function() {
1310   /// <returns type="string"/>
1311   return createjs.Graphics.CommandName.QUADRATIC_CURVE_TO + ',' +
1312       this.cpx_ + ',' + this.cpy_ + ',' + this.x_ + ',' + this.y_;
1313 };
1314 
1315 /**
1316  * An inner class used by the createjs.Graphics class to draw a cubic bezier
1317  * curve.
1318  * @param {number} cp1x
1319  * @param {number} cp1y
1320  * @param {number} cp2x
1321  * @param {number} cp2y
1322  * @param {number} x
1323  * @param {number} y
1324  * @implements {createjs.Graphics.Command}
1325  * @constructor
1326  */
1327 createjs.Graphics.CurveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {
1328   /**
1329    * The x coordinate of the first control point of this curve.
1330    * @const {number}
1331    * @private
1332    */
1333   this.cp1x_ = cp1x;
1334 
1335   /**
1336    * The y coordinate of the first control point of this curve.
1337    * @const {number}
1338    * @private
1339    */
1340   this.cp1y_ = cp1y;
1341 
1342   /**
1343    * The x coordinate of the second control point of this curve.
1344    * @const {number}
1345    * @private
1346    */
1347   this.cp2x_ = cp2x;
1348 
1349   /**
1350    * The y coordinate of the second control point of this curve.
1351    * @const {number}
1352    * @private
1353    */
1354   this.cp2y_ = cp2y;
1355 
1356   /**
1357    * The x coordinate of the end point of this curve.
1358    * @const {number}
1359    * @private
1360    */
1361   this.x_ = x;
1362 
1363   /**
1364    * The y coordinate of the end point of this curve.
1365    * @const {number}
1366    * @private
1367    */
1368   this.y_ = y;
1369 };
1370 
1371 /**
1372  * Creates a createjs.Graphics.CurveTo object.
1373  * @param {number} cp1x
1374  * @param {number} cp1y
1375  * @param {number} cp2x
1376  * @param {number} cp2y
1377  * @param {number} x
1378  * @param {number} y
1379  * @return {createjs.Graphics.CurveTo}
1380  */
1381 createjs.Graphics.CurveTo.get = function(cp1x, cp1y, cp2x, cp2y, x, y) {
1382   /// <param type="number" name="cp1x"/>
1383   /// <param type="number" name="cp1y"/>
1384   /// <param type="number" name="cp2x"/>
1385   /// <param type="number" name="cp2y"/>
1386   /// <param type="number" name="x"/>
1387   /// <param type="number" name="y"/>
1388   /// <returns type="createjs.Graphics.CurveTo"/>
1389   return new createjs.Graphics.CurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
1390 };
1391 
1392 /** @override */
1393 createjs.Graphics.CurveTo.prototype.paint = function(renderer) {
1394   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1395   renderer.pathCubicCurveTo_(
1396       this.cp1x_, this.cp1y_, this.cp2x_, this.cp2y_, this.x_, this.y_);
1397 };
1398 
1399 /** @override */
1400 createjs.Graphics.CurveTo.prototype.getText =
1401     createjs.Graphics.Command.getEmpty;
1402 
1403 /**
1404  * An inner class used by the createjs.Graphics class to draw a rectangle.
1405  * @param {number} x
1406  * @param {number} y
1407  * @param {number} width
1408  * @param {number} height
1409  * @implements {createjs.Graphics.Command}
1410  * @constructor
1411  */
1412 createjs.Graphics.Rect = function(x, y, width, height) {
1413   /**
1414    * The x coordinate of the top-left corner of this rectangle.
1415    * @const {number}
1416    * @private
1417    */
1418   this.x_ = x;
1419 
1420   /**
1421    * The y coordinate of the top-left corner of this rectangle.
1422    * @const {number}
1423    * @private
1424    */
1425   this.y_ = y;
1426 
1427   /**
1428    * The width of this rectangle.
1429    * @const {number}
1430    * @private
1431    */
1432   this.width_ = width;
1433 
1434   /**
1435    * The height of this rectangle.
1436    * @const {number}
1437    * @private
1438    */
1439   this.height_ = height;
1440 };
1441 
1442 /**
1443  * Creates a createjs.Graphics.Rect object.
1444  * @param {number} x
1445  * @param {number} y
1446  * @param {number} width
1447  * @param {number} height
1448  * @return {createjs.Graphics.Rect}
1449  */
1450 createjs.Graphics.Rect.get = function(x, y, width, height) {
1451   /// <param type="number" name="x"/>
1452   /// <param type="number" name="y"/>
1453   /// <param type="number" name="width"/>
1454   /// <param type="number" name="height"/>
1455   /// <returns type="createjs.Graphics.Rect"/>
1456   return new createjs.Graphics.Rect(x, y, width, height);
1457 };
1458 
1459 /** @override */
1460 createjs.Graphics.Rect.prototype.paint = function(renderer) {
1461   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1462   renderer.pathRect_(this.x_, this.y_, this.width_, this.height_);
1463 };
1464 
1465 /** @override */
1466 createjs.Graphics.Rect.prototype.getText =
1467     createjs.Graphics.Command.getEmpty;
1468 
1469 /**
1470  * An inner class used by the createjs.Graphics class to start a drawing path.
1471  * @implements {createjs.Graphics.Command}
1472  * @constructor
1473  */
1474 createjs.Graphics.BeginPath = function() {
1475 };
1476 
1477 /**
1478  * The lazy instance of the createjs.Graphics.BeginPath object. (The
1479  * createjs.Graphics.BeginPath object does not have parameters, i.e. the
1480  * createjs.Graphics object can re-use one createjs.Graphics.BeginPath object.)
1481  * @type {createjs.Graphics.BeginPath}
1482  * @private
1483  */
1484 createjs.Graphics.BeginPath.instance_ = null;
1485 
1486 /**
1487  * Creates a createjs.Graphics.BeginPath object. This method actually returns
1488  * the lazy instance of the createjs.Graphics.BeginPath object.
1489  * @return {createjs.Graphics.BeginPath}
1490  */
1491 createjs.Graphics.BeginPath.get = function() {
1492   if (!createjs.Graphics.BeginPath.instance_) {
1493     createjs.Graphics.BeginPath.instance_ = new createjs.Graphics.BeginPath();
1494   }
1495   return createjs.Graphics.BeginPath.instance_;
1496 };
1497 
1498 /** @override */
1499 createjs.Graphics.BeginPath.prototype.paint = function(renderer) {
1500   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1501   renderer.pathBegin_();
1502 };
1503 
1504 /** @override */
1505 createjs.Graphics.BeginPath.prototype.getText =
1506     createjs.Graphics.Command.getEmpty;
1507 
1508 /**
1509  * An inner class used by the createjs.Graphics class to finish a drawing path.
1510  * @implements {createjs.Graphics.Command}
1511  * @constructor
1512  */
1513 createjs.Graphics.ClosePath = function() {
1514 };
1515 
1516 /**
1517  * The lazy instance of the createjs.Graphics.ClosePath object.
1518  * @type {createjs.Graphics.ClosePath}
1519  * @private
1520  */
1521 createjs.Graphics.ClosePath.instance_ = null;
1522 
1523 /**
1524  * Creates a createjs.Graphics.ClosePath object. This method actually returns
1525  * the lazy instance of the createjs.Graphics.ClosePath object.
1526  * @return {createjs.Graphics.ClosePath}
1527  */
1528 createjs.Graphics.ClosePath.get = function() {
1529   if (!createjs.Graphics.ClosePath.instance_) {
1530     createjs.Graphics.ClosePath.instance_ = new createjs.Graphics.ClosePath();
1531   }
1532   return createjs.Graphics.ClosePath.instance_;
1533 };
1534 
1535 /** @override */
1536 createjs.Graphics.ClosePath.prototype.paint = function(renderer) {
1537   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1538   renderer.pathClose_();
1539 };
1540 
1541 /** @override */
1542 createjs.Graphics.ClosePath.prototype.getText = function() {
1543   /// <returns type="string"/>
1544   return createjs.Graphics.CommandName.CLOSE_PATH;
1545 };
1546 
1547 /**
1548  * An inner class used by the createjs.Graphics class to set a fill color.
1549  * @param {string} color
1550  * @implements {createjs.Graphics.Command}
1551  * @constructor
1552  */
1553 createjs.Graphics.FillColor = function(color) {
1554   /**
1555    * The fill color.
1556    * @const {string}
1557    * @private
1558    */
1559   this.color_ = color;
1560 };
1561 
1562 /**
1563  * Creates a createjs.Graphics.FillColor object.
1564  * @param {string} color
1565  * @return {createjs.Graphics.FillColor}
1566  */
1567 createjs.Graphics.FillColor.get = function(color) {
1568   /// <param type="string" name="color"/>
1569   /// <returns type="createjs.Graphics.FillColor"/>
1570   return new createjs.Graphics.FillColor(color);
1571 };
1572 
1573 /** @override */
1574 createjs.Graphics.FillColor.prototype.paint = function(renderer) {
1575   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1576   renderer.setFillColor_(this.color_);
1577 };
1578 
1579 /** @override */
1580 createjs.Graphics.FillColor.prototype.getText = function() {
1581   /// <returns type="string"/>
1582   return createjs.Graphics.CommandName.FILL_COLOR + this.color_;
1583 };
1584 
1585 /**
1586  * An inner class used by the createjs.Graphics class to create a linear
1587  * gradient.
1588  * @param {Array.<string>} colors
1589  * @param {Array.<number>} stops
1590  * @param {number} x0
1591  * @param {number} y0
1592  * @param {number} x1
1593  * @param {number} y1
1594  * @implements {createjs.Graphics.Command}
1595  * @constructor
1596  */
1597 createjs.Graphics.FillLinear = function(colors, stops, x0, y0, x1, y1) {
1598   /**
1599    * The spooled linear-gradient object.
1600    * @const {createjs.Graphics.LinearGradient}
1601    * @private
1602    */
1603   this.gradient_ =
1604       createjs.Graphics.LinearGradient.get(colors, stops, x0, y0, x1, y1);
1605 };
1606 
1607 /**
1608  * Creates a createjs.Graphics.FillLinaer object.
1609  * @param {Array.<string>} colors
1610  * @param {Array.<number>} stops
1611  * @param {number} x0
1612  * @param {number} y0
1613  * @param {number} x1
1614  * @param {number} y1
1615  * @return {createjs.Graphics.FillLinear}
1616  */
1617 createjs.Graphics.FillLinear.get = function(colors, stops, x0, y0, x1, y1) {
1618   /// <param type="Array" elementType="string" name="colors"/>
1619   /// <param type="Array" elementType="number" name="stops"/>
1620   /// <param type="number" name="x0"/>
1621   /// <param type="number" name="y0"/>
1622   /// <param type="number" name="x1"/>
1623   /// <param type="number" name="y1"/>
1624   /// <returns type="createjs.Graphics.FillLinear"/>
1625   return new createjs.Graphics.FillLinear(colors, stops, x0, y0, x1, y1);
1626 };
1627 
1628 /** @override */
1629 createjs.Graphics.FillLinear.prototype.paint = function(renderer) {
1630   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1631   renderer.setFillGradient_(this.gradient_.getGradient(renderer));
1632 };
1633 
1634 /** @override */
1635 createjs.Graphics.FillLinear.prototype.getText = function() {
1636   /// <returns type="string"/>
1637   return createjs.Graphics.CommandName.FILL_LINEAR + this.gradient_.getText();
1638 };
1639 
1640 /**
1641  * An inner class used by the createjs.Graphics class to create a radial
1642  * gradient.
1643  * @param {Array.<string>} colors
1644  * @param {Array.<number>} stops
1645  * @param {number} x0
1646  * @param {number} y0
1647  * @param {number} r0
1648  * @param {number} x1
1649  * @param {number} y1
1650  * @param {number} r1
1651  * @implements {createjs.Graphics.Command}
1652  * @constructor
1653  */
1654 createjs.Graphics.FillRadial = function(colors, stops, x0, y0, r0, x1, y1, r1) {
1655   /**
1656    * The spooled radial-gradient object.
1657    * @type {createjs.Graphics.RadialGradient}
1658    * @private
1659    */
1660   this.gradient_ = createjs.Graphics.RadialGradient.get(
1661       colors, stops, x0, y0, r0, x1, y1, r1);
1662 };
1663 
1664 /**
1665  * Creates a createjs.Graphics.FillRadial object.
1666  * @param {Array.<string>} colors
1667  * @param {Array.<number>} stops
1668  * @param {number} x0
1669  * @param {number} y0
1670  * @param {number} r0
1671  * @param {number} x1
1672  * @param {number} y1
1673  * @param {number} r1
1674  * @return {createjs.Graphics.FillRadial}
1675  */
1676 createjs.Graphics.FillRadial.get =
1677     function(colors, stops, x0, y0, r0, x1, y1, r1) {
1678   /// <param type="Array" elementType="string" name="colors"/>
1679   /// <param type="Array" elementType="number" name="stops"/>
1680   /// <param type="number" name="x0"/>
1681   /// <param type="number" name="y0"/>
1682   /// <param type="number" name="r0"/>
1683   /// <param type="number" name="x1"/>
1684   /// <param type="number" name="y1"/>
1685   /// <param type="number" name="r1"/>
1686   /// <returns type="createjs.Graphics.FillRadial"/>
1687   return new createjs.Graphics.FillRadial(
1688       colors, stops, x0, y0, r0, x1, y1, r1);
1689 };
1690 
1691 /** @override */
1692 createjs.Graphics.FillRadial.prototype.paint = function(renderer) {
1693   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1694   renderer.setFillGradient_(this.gradient_.getGradient(renderer));
1695 };
1696 
1697 /** @override */
1698 createjs.Graphics.FillRadial.prototype.getText = function() {
1699   /// <returns type="string"/>
1700   return createjs.Graphics.CommandName.FILL_RADIAL + this.gradient_.getText();
1701 };
1702 
1703 /**
1704  * An inner class used by the createjs.Graphics class to create a pattern fill.
1705  * @param {HTMLImageElement} image
1706  * @param {string} repetition
1707  * @implements {createjs.Graphics.Command}
1708  * @constructor
1709  */
1710 createjs.Graphics.FillPattern = function(image, repetition) {
1711   /**
1712    * The HTMLImageElement object to be filled.
1713    * @const {HTMLImageElement}
1714    * @private
1715    */
1716   this.image_ = image;
1717 
1718   /**
1719    * The image-repetition option. This value is one of "repeat", "repeat-x",
1720    * "repeat-y", or "no-repeat".
1721    * @const {string}
1722    * @private
1723    */
1724   this.repetition_ = repetition;
1725 };
1726 
1727 /**
1728  * Creates a createjs.Graphics.FillPattern object.
1729  * @param {HTMLImageElement} image
1730  * @param {string} repetition
1731  * @return {createjs.Graphics.FillPattern}
1732  */
1733 createjs.Graphics.FillPattern.get = function(image, repetition) {
1734   /// <param type="HTMLImageElement" name="image"/>
1735   /// <param type="string" name="repetition"/>
1736   /// <returns type="createjs.Graphics.FillPattern"/>
1737   return new createjs.Graphics.FillPattern(image, repetition);
1738 };
1739 
1740 /** @override */
1741 createjs.Graphics.FillPattern.prototype.paint = function(renderer) {
1742   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1743   renderer.setFillPattern_(this.image_, this.repetition_);
1744 };
1745 
1746 /** @override */
1747 createjs.Graphics.FillPattern.prototype.getText =
1748     createjs.Graphics.Command.getEmpty;
1749 
1750 /**
1751  * An inner class used by the createjs.Graphics class to set line styles.
1752  * @param {number} thickness
1753  * @param {number} caps
1754  * @param {number} joints
1755  * @param {number} limit
1756  * @implements {createjs.Graphics.Command}
1757  * @constructor
1758  */
1759 createjs.Graphics.LineStyle = function(thickness, caps, joints, limit) {
1760   /**
1761    * The thickness of a line.
1762    * @const {number}
1763    * @private
1764    */
1765   this.thickness_ = thickness;
1766 
1767   /**
1768    * The end-cap ID of a line.
1769    *   +---------+-----------+
1770    *   | end-cap | lineCap   |
1771    *   +---------+-----------+
1772    *   | 0       | "butt"    |
1773    *   | 1       | "round"   |
1774    *   | 2       | "square"  |
1775    *   +---------+-----------+
1776    * @const {number}
1777    * @private
1778    */
1779   this.caps_ = caps;
1780 
1781   /**
1782    * The corner-type ID of a line.
1783    *   +-------------+----------+
1784    *   | corner-type | lineJoin |
1785    *   +-------------+----------+
1786    *   | 0           | "bevel"  |
1787    *   | 1           | "round"  |
1788    *   | 2           | "miter"  |
1789    *   +-------------+----------+
1790    * @const {number}
1791    * @private
1792    */
1793   this.joints_ = joints;
1794 
1795   /**
1796    * The maximum miter length of a line.
1797    * @const {number}
1798    * @private
1799    */
1800   this.limit_ = limit;
1801 };
1802 
1803 /**
1804  * Creates a createjs.Graphics.LineStyle object.
1805  * @param {number} thickness
1806  * @param {number} caps
1807  * @param {number} joints
1808  * @param {number} limit
1809  * @return {createjs.Graphics.LineStyle}
1810  */
1811 createjs.Graphics.LineStyle.get = function(thickness, caps, joints, limit) {
1812   /// <param type="number" name="thickness"/>
1813   /// <param type="number" name="caps"/>
1814   /// <param type="number" name="joints"/>
1815   /// <param type="number" name="limit"/>
1816   /// <returns type="createjs.Graphics.LineStyle"/>
1817   return new createjs.Graphics.LineStyle(thickness, caps, joints, limit);
1818 };
1819 
1820 /** @override */
1821 createjs.Graphics.LineStyle.prototype.paint = function(renderer) {
1822   /// <param type="createjs.Renderer" name="renderer"/>
1823   renderer.setStrokeStyles_(
1824       this.thickness_, this.caps_, this.joints_, this.limit_);
1825 };
1826 
1827 /** @override */
1828 createjs.Graphics.LineStyle.prototype.getText = function() {
1829   /// <returns type="string"/>
1830   return createjs.Graphics.CommandName.LINE_STYLE + ',' + this.thickness_ +
1831       ',' + this.caps_ + ',' + this.joints_ + ',' + this.limit_;
1832 };
1833 
1834 /**
1835  * An inner class used by the createjs.Graphics class to set a stroke color.
1836  * @param {string} color
1837  * @implements {createjs.Graphics.Command}
1838  * @constructor
1839  */
1840 createjs.Graphics.StrokeColor = function(color) {
1841   /**
1842    * The stroke color.
1843    * @const {string}
1844    * @private
1845    */
1846   this.color_ = color;
1847 };
1848 
1849 /**
1850  * Creates a createjs.Graphics.StrokeColor object.
1851  * @param {string} color
1852  * @return {createjs.Graphics.StrokeColor}
1853  */
1854 createjs.Graphics.StrokeColor.get = function(color) {
1855   /// <param type="string" name="color"/>
1856   /// <returns type="createjs.Graphics.StrokeColor"/>
1857   return new createjs.Graphics.StrokeColor(color);
1858 };
1859 
1860 /** @override */
1861 createjs.Graphics.StrokeColor.prototype.paint = function(renderer) {
1862   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1863   renderer.setStrokeColor_(this.color_);
1864 };
1865 
1866 /** @override */
1867 createjs.Graphics.StrokeColor.prototype.getText = function() {
1868   /// <returns type="string"/>
1869   return createjs.Graphics.CommandName.STROKE_COLOR + this.color_;
1870 };
1871 
1872 /**
1873  * An inner class used by the createjs.Graphics class to create a linear
1874  * gradient.
1875  * @param {Array.<string>} colors
1876  * @param {Array.<number>} stops
1877  * @param {number} x0
1878  * @param {number} y0
1879  * @param {number} x1
1880  * @param {number} y1
1881  * @implements {createjs.Graphics.Command}
1882  * @constructor
1883  */
1884 createjs.Graphics.StrokeLinear = function(colors, stops, x0, y0, x1, y1) {
1885   /**
1886    * The spooled linear-gradient object.
1887    * @const {createjs.Graphics.LinearGradient}
1888    * @private
1889    */
1890   this.gradient_ =
1891       createjs.Graphics.LinearGradient.get(colors, stops, x0, y0, x1, y1);
1892 };
1893 
1894 /**
1895  * Creates a createjs.Graphics.StrokeLinaer object.
1896  * @param {Array.<string>} colors
1897  * @param {Array.<number>} stops
1898  * @param {number} x0
1899  * @param {number} y0
1900  * @param {number} x1
1901  * @param {number} y1
1902  * @return {createjs.Graphics.StrokeLinear}
1903  */
1904 createjs.Graphics.StrokeLinear.get = function(colors, stops, x0, y0, x1, y1) {
1905   /// <param type="Array" elementType="string" name="colors"/>
1906   /// <param type="Array" elementType="number" name="stops"/>
1907   /// <param type="number" name="x0"/>
1908   /// <param type="number" name="y0"/>
1909   /// <param type="number" name="x1"/>
1910   /// <param type="number" name="y1"/>
1911   /// <returns type="createjs.Graphics.StrokeLinear"/>
1912   return new createjs.Graphics.StrokeLinear(colors, stops, x0, y0, x1, y1);
1913 };
1914 
1915 /** @override */
1916 createjs.Graphics.StrokeLinear.prototype.paint = function(renderer) {
1917   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1918   renderer.setStrokeGradient_(this.gradient_.getGradient(renderer));
1919 };
1920 
1921 /** @override */
1922 createjs.Graphics.StrokeLinear.prototype.getText = function() {
1923   /// <returns type="string"/>
1924   return createjs.Graphics.CommandName.STROKE_LINEAR + this.gradient_.getText();
1925 };
1926 
1927 /**
1928  * An inner class used by the createjs.Graphics class to create a radial
1929  * gradient.
1930  * @param {Array.<string>} colors
1931  * @param {Array.<number>} stops
1932  * @param {number} x0
1933  * @param {number} y0
1934  * @param {number} r0
1935  * @param {number} x1
1936  * @param {number} y1
1937  * @param {number} r1
1938  * @implements {createjs.Graphics.Command}
1939  * @constructor
1940  */
1941 createjs.Graphics.StrokeRadial = 
1942     function(colors, stops, x0, y0, r0, x1, y1, r1) {
1943   /**
1944    * The spooled radial-gradient object.
1945    * @type {createjs.Graphics.RadialGradient}
1946    * @private
1947    */
1948   this.gradient_ = createjs.Graphics.RadialGradient.get(
1949       colors, stops, x0, y0, r0, x1, y1, r1);
1950 };
1951 
1952 /**
1953  * Creates a createjs.Graphics.StrokeRadial object.
1954  * @param {Array.<string>} colors
1955  * @param {Array.<number>} stops
1956  * @param {number} x0
1957  * @param {number} y0
1958  * @param {number} r0
1959  * @param {number} x1
1960  * @param {number} y1
1961  * @param {number} r1
1962  * @return {createjs.Graphics.StrokeRadial}
1963  */
1964 createjs.Graphics.StrokeRadial.get =
1965     function(colors, stops, x0, y0, r0, x1, y1, r1) {
1966   /// <param type="Array" elementType="string" name="colors"/>
1967   /// <param type="Array" elementType="number" name="stops"/>
1968   /// <param type="number" name="x0"/>
1969   /// <param type="number" name="y0"/>
1970   /// <param type="number" name="r0"/>
1971   /// <param type="number" name="x1"/>
1972   /// <param type="number" name="y1"/>
1973   /// <param type="number" name="r1"/>
1974   /// <returns type="createjs.Graphics.StrokeRadial"/>
1975   return new createjs.Graphics.StrokeRadial(
1976       colors, stops, x0, y0, r0, x1, y1, r1);
1977 };
1978 
1979 /** @override */
1980 createjs.Graphics.StrokeRadial.prototype.paint = function(renderer) {
1981   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
1982   renderer.setStrokeGradient_(this.gradient_.getGradient(renderer));
1983 };
1984 
1985 /** @override */
1986 createjs.Graphics.StrokeRadial.prototype.getText = function() {
1987   /// <returns type="string"/>
1988   return createjs.Graphics.CommandName.STROKE_RADIAL + this.gradient_.getText();
1989 };
1990 
1991 /**
1992  * An inner class used by the createjs.Graphics class to create a bitmap
1993  * pattern used as a stroke style.
1994  * @param {HTMLImageElement} image
1995  * @param {string} repetition
1996  * @implements {createjs.Graphics.Command}
1997  * @constructor
1998  */
1999 createjs.Graphics.StrokePattern = function(image, repetition) {
2000   /**
2001    * The HTMLImageElement object to be filled.
2002    * @const {HTMLImageElement}
2003    * @private
2004    */
2005   this.image_ = image;
2006 
2007   /**
2008    * The image-repetition option. This value is one of "repeat", "repeat-x",
2009    * "repeat-y", or "no-repeat".
2010    * @const {string}
2011    * @private
2012    */
2013   this.repetition_ = repetition;
2014 };
2015 
2016 /**
2017  * Creates a createjs.Graphics.StrokePattern object.
2018  * @param {HTMLImageElement} image
2019  * @param {string} repetition
2020  * @return {createjs.Graphics.StrokePattern}
2021  */
2022 createjs.Graphics.StrokePattern.get = function(image, repetition) {
2023   /// <param type="HTMLImageElement" name="image"/>
2024   /// <param type="string" name="repetition"/>
2025   /// <returns type="createjs.Graphics.FillPattern"/>
2026   return new createjs.Graphics.StrokePattern(image, repetition);
2027 };
2028 
2029 /** @override */
2030 createjs.Graphics.StrokePattern.prototype.paint = function(renderer) {
2031   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
2032   renderer.setStrokePattern_(this.image_, this.repetition_);
2033 };
2034 
2035 /** @override */
2036 createjs.Graphics.StrokePattern.prototype.getText =
2037     createjs.Graphics.Command.getEmpty;
2038 
2039 /**
2040  * An inner class used by the createjs.Graphics class to fill a drawing path
2041  * with the currently-selected color (or gradient) and to stroke a drawing path
2042  * with the currently-selected color (or gradient). This command assumes the
2043  * path has pushed a fill command when the fill property is true, and the path
2044  * has pushed a stroke command when the stroke property is true, respectively.
2045  * @param {boolean} fill
2046  * @param {boolean} stroke
2047  * @implements {createjs.Graphics.Command}
2048  * @constructor
2049  */
2050 createjs.Graphics.DrawPath = function(fill, stroke) {
2051   /**
2052    * Whether a path needs to be filled.
2053    * @const {boolean}
2054    * @private
2055    */
2056   this.fill_ = fill;
2057 
2058   /**
2059    * Whether a path needs to have an outline.
2060    * @const {boolean}
2061    * @private
2062    */
2063   this.stroke_ = stroke;
2064 };
2065 
2066 /**
2067  * The lazy instances of createjs.Graphics.DrawPath objects.
2068  * @type {Array.<createjs.Graphics.DrawPath>}
2069  * @private
2070  */
2071 createjs.Graphics.DrawPath.instances_ = [null, null, null, null];
2072 
2073 /**
2074  * Creates a createjs.Graphics.DrawPath object.
2075  * @param {boolean} fill
2076  * @param {boolean} stroke
2077  * @return {createjs.Graphics.DrawPath}
2078  */
2079 createjs.Graphics.DrawPath.get = function(fill, stroke) {
2080   /// <param type="boolean" name="fill"/>
2081   /// <param type="boolean" name="stroke"/>
2082   var id = (fill ? 2 : 0) | (stroke ? 1 : 0);
2083   if (!createjs.Graphics.DrawPath.instances_[id]) {
2084     createjs.Graphics.DrawPath.instances_[id] =
2085         new createjs.Graphics.DrawPath(fill, stroke);
2086   }
2087   return createjs.Graphics.DrawPath.instances_[id];
2088 };
2089 
2090 /** @override */
2091 createjs.Graphics.DrawPath.prototype.paint = function(renderer) {
2092   /// <param type="createjs.Graphics.CanvasRenderer" name="renderer"/>
2093   renderer.drawPath_(this.fill_, this.stroke_);
2094 };
2095 
2096 /** @override */
2097 createjs.Graphics.DrawPath.prototype.getText = function() {
2098   /// <returns type="string"/>
2099   var id = (this.fill_ ? 2 : 0) | (this.stroke_ ? 1 : 0);
2100   return createjs.Graphics.CommandName.DRAW_PATH + id;
2101 };
2102 
2103 /**
2104  * An inner class used by the createjs.Graphics class to draw a compact-encoded
2105  * path. This object uses an object spool to decode one compact-encoded path
2106  * only once. (A createjs.Shape object generated by Flash calls the drawPath()
2107  * method in its constructor, i.e. it decodes one compact-encoded path every
2108  * time when a game creates the instance of the createjs.Shape object. This
2109  * object uses an object spool to avoid it.)
2110  * @param {string} encoded
2111  * @implements {createjs.Graphics.Command}
2112  * @constructor
2113  */
2114 createjs.Graphics.DecodePath = function(encoded) {
2115   /**
2116    * An ID assigned to this object.
2117    * @const {number}
2118    * @private
2119    */
2120   this.id_ = ++createjs.Graphics.DecodePath.id_;
2121 
2122   /**
2123    * The bounding box of this path.
2124    * @type {createjs.BoundingBox}
2125    * @private
2126    */
2127   this.box_ = new createjs.BoundingBox();
2128 
2129   /**
2130    * The drawing commands decoded from a compact-encoded path.
2131    * @type {Array.<createjs.Graphics.Command>}
2132    * @private
2133    */
2134   this.paths_ = createjs.Graphics.DecodePath.getPath_(encoded, this.box_);
2135 };
2136 
2137 /**
2138  * The path ID to be assigned to createjs.Graphics.DecodePath objects.
2139  * @type {number}
2140  * @private
2141  */
2142 createjs.Graphics.DecodePath.id_ = 0;
2143 
2144 /**
2145  * The spool of createjs.Graphics.DecodePath objects.
2146  * @type {Object.<string,createjs.Graphics.DecodePath>}
2147  * @private
2148  */
2149 createjs.Graphics.DecodePath.instances_ = {};
2150 
2151 /**
2152  * Creates a createjs.Graphics.DrawPath object. This method decodes a
2153  * compact-encoded path only when its object spool have not decoded it.
2154  * @param {string} encoded
2155  * @param {createjs.BoundingBox} box
2156  * @return {createjs.Graphics.DecodePath}
2157  */
2158 createjs.Graphics.DecodePath.get = function(encoded, box) {
2159   /// <param type="string" name="fill"/>
2160   /// <returns type="createjs.Graphics.DecodePath"/>
2161   var instance = createjs.Graphics.DecodePath.instances_[encoded];
2162   if (!instance) {
2163     instance = new createjs.Graphics.DecodePath(encoded);
2164     createjs.Graphics.DecodePath.instances_[encoded] = instance;
2165   }
2166   box.update(instance.box_.minX, instance.box_.minY);
2167   box.update(instance.box_.maxX, instance.box_.maxY);
2168   return instance;
2169 };
2170 
2171 /**
2172  * Decodes a number in a compact-encoded path.
2173  * @param {string} path
2174  * @param {number} i
2175  * @param {number} count
2176  * @return {number}
2177  * @private
2178  */
2179 createjs.Graphics.DecodePath.getValue_ = function(path, i, count) {
2180   /// <param type="string" name="path"/>
2181   /// <param type="number" name="i"/>
2182   /// <param type="number" name="count"/>
2183   /// <returns type="number"/>
2184   var BASE64 = createjs.Base64.DECODE_TABLE;
2185   var num = BASE64[path.charCodeAt(i)];
2186   var sign = (num >> 5) ? -0.1 : 0.1;
2187   num = ((num & 31) << 6) | BASE64[path.charCodeAt(i + 1)];
2188   if (count == 3) {
2189     num = (num << 6) | BASE64[path.charCodeAt(i + 2)];
2190   }
2191   return num * sign;
2192 };
2193 
2194 /**
2195  * Decodes a compact-encoded path generated by Flash CC. This method decodes a
2196  * compact-encoded path and generates a list of drawing commands used by the
2197  * createjs.Graphics object.
2198  *
2199  * A compact-encoded path is a base64-encoded text of compact-encoded commands.
2200  * Each compact-encoded command consists of a 1-character header and a
2201  * 2-character (or 3-character) positions. The following table describes the
2202  * header format.
2203  *  
2204  *   +-----+------+---------------------------------------+
2205  *   | Bit | Size | Description                           |
2206  *   +-----+------+---------------------------------------+
2207  *   | 1   | 3    | Command ID (see below)                |
2208  *   |     |      |   +-------+------------------+        |
2209  *   |     |      |   | value | command          |        |
2210  *   |     |      |   +-------+------------------+        |
2211  *   |     |      |   |   0   | moveTo           |        |
2212  *   |     |      |   |   1   | lineTo           |        |
2213  *   |     |      |   |   2   | quadraticCurveTo |        |
2214  *   |     |      |   |   3   | bezierCurveTo    |        |
2215  *   |     |      |   |   4   | closePath        |        |
2216  *   |     |      |   +-------+------------------+        |
2217  *   +-----+------+---------------------------------------+
2218  *   | 4   | 1    | The length of position values         |
2219  *   |     |      |   +-------+-------------------------+ |
2220  *   |     |      |   | value | length                  | |
2221  *   |     |      |   +-------+-------------------------+ |
2222  *   |     |      |   |   0   | 12 bits (2 characters)  | |
2223  *   |     |      |   |   1   | 18 bits (3 characters)  | |
2224  *   |     |      |   +-------+-------------------------+ |
2225  *   +-----+------+---------------------------------------+
2226  *   | 5   | 2    | Unused                                |
2227  *   +-----+------+---------------------------------------+
2228  *
2229  * See the createjs.Graphics.decodePath() method for more details:
2230  * <https://github.com/CreateJS/EaselJS/master/src/easeljs/display/Graphics.js>.
2231  *
2232  * @param {string} encoded
2233  * @param {createjs.BoundingBox} box
2234  * @return {Array.<createjs.Graphics.Command>}
2235  * @private
2236  */
2237 createjs.Graphics.DecodePath.getPath_ = function(encoded, box) {
2238   var COMMAND = {
2239     MOVETO: 0,
2240     LINETO: 1,
2241     QUADRATICCURVETO: 2,
2242     BEZIERCURVETO: 3,
2243     CLOSEPATH: 4
2244   };
2245   /// <var type="Array" elementType="createjs.Graphics.Command" name="paths"/>
2246   var paths = [];
2247   var x = 0;
2248   var y = 0;
2249   var i = 0;
2250   var length = encoded.length;
2251   while (i < length) {
2252     var n = createjs.Base64.DECODE_TABLE[encoded.charCodeAt(i++)];
2253     var command = n >> 3;
2254     var charCount = ((n >> 2) & 1) + 2;
2255     if (command == COMMAND.CLOSEPATH) {
2256       paths.push(createjs.Graphics.ClosePath.get());
2257       continue;
2258     }
2259     if (command == COMMAND.MOVETO) {
2260       x = 0;
2261       y = 0;
2262     }
2263     x += createjs.Graphics.DecodePath.getValue_(encoded, i, charCount);
2264     i += charCount;
2265     y += createjs.Graphics.DecodePath.getValue_(encoded, i, charCount);
2266     i += charCount;
2267     box.update(x, y);
2268     if (command == COMMAND.MOVETO) {
2269       paths.push(createjs.Graphics.MoveTo.get(x, y));
2270       continue;
2271     }
2272     if (command == COMMAND.LINETO) {
2273       paths.push(createjs.Graphics.LineTo.get(x, y));
2274       continue;
2275     }
2276     var cp1x = x;
2277     var cp1y = y;
2278     x += createjs.Graphics.DecodePath.getValue_(encoded, i, charCount);
2279     i += charCount;
2280     y += createjs.Graphics.DecodePath.getValue_(encoded, i, charCount);
2281     i += charCount;
2282     box.update(x, y);
2283     if (command == COMMAND.QUADRATICCURVETO) {
2284       paths.push(createjs.Graphics.QuadraticCurveTo.get(cp1x, cp1y, x, y));
2285       continue;
2286     }
2287     var cp2x = x;
2288     var cp2y = y;
2289     x += createjs.Graphics.DecodePath.getValue_(encoded, i, charCount);
2290     i += charCount;
2291     y += createjs.Graphics.DecodePath.getValue_(encoded, i, charCount);
2292     i += charCount;
2293     box.update(x, y);
2294     paths.push(createjs.Graphics.CurveTo.get(cp1x, cp1y, cp2x, cp2y, x, y));
2295   }
2296   return paths;
2297 };
2298 
2299 /** @override */
2300 createjs.Graphics.DecodePath.prototype.paint = function(renderer) {
2301   /// <param type="createjs.Renderer" name="renderer"/>
2302   var paths = this.paths_;
2303   var length = paths.length;
2304   for (var i = 0; i < length; ++i) {
2305     paths[i].paint(renderer);
2306   }
2307 };
2308 
2309 /** @override */
2310 createjs.Graphics.DecodePath.prototype.getText = function() {
2311   /// <returns type="string"/>
2312   return createjs.Graphics.CommandName.DECODE_PATH + this.id_;
2313 };
2314 
2315 /**
2316  * The global cache for renderer objects.
2317  * @type {Object.<string,createjs.Graphics.CanvasRenderer>}
2318  * @private
2319  */
2320 createjs.Graphics.renderers_ = {};
2321 
2322 /**
2323  * Returns a property number from a string.
2324  * @param {Array.<string>} map
2325  * @param {string|number|undefined} value
2326  * @return {number}
2327  * @private
2328  */
2329 createjs.Graphics.getProperty_ = function(map, value) {
2330   /// <param type="Array" elementType="string" name="map"/>
2331   /// <param type="string|number|undefined" name="value"/>
2332   /// <returns type="string"/>
2333   if (!value) {
2334     return 0;
2335   }
2336   if (createjs.isNumber(value)) {
2337     return createjs.getNumber(value);
2338   }
2339   var length = map.length;
2340   for (var i = 0; i < length; ++i) {
2341     if (map[i] == value) {
2342       return i;
2343     }
2344   }
2345   return 0;
2346 };
2347 
2348 /**
2349  * Returns a CSS-compatible color string either from a packed RGBA value,
2350  * from three RGB values, or from four RGBA values.
2351  * @param {number} color
2352  * @param {number=} opt_arg0
2353  * @param {number=} opt_arg1
2354  * @param {number=} opt_arg2
2355  * @return {string}
2356  * @const
2357  */
2358 createjs.Graphics.getRGB = function(color, opt_arg0, opt_arg1, opt_arg2) {
2359   /// <param type="number" name="color"/>
2360   /// <param type="number" optional="true" name="opt_arg0"/>
2361   /// <param type="number" optional="true" name="opt_arg1"/>
2362   /// <param type="number" optional="true" name="opt_arg2"/>
2363   /// <returns type="string"/>
2364   var length = arguments.length;
2365   if (length <= 2) {
2366     var red = (color >> 16) & 0xff;
2367     var green = (color >> 8) & 0xff;
2368     var blue = color & 0xff;
2369     if (length == 1) {
2370       return 'rgb(' + red + ',' + green + ',' + blue + ')';
2371     }
2372     var alpha = createjs.getNumber(opt_arg0);
2373     return 'rgba(' + red + ',' + green + ',' + blue + ',' + alpha + ')';
2374   } else {
2375     var red = color;
2376     var green = createjs.getNumber(opt_arg0);
2377     var blue = createjs.getNumber(opt_arg1);
2378     if (length == 3) {
2379       return 'rgb(' + red + ',' + green + ',' + blue + ')';
2380     }
2381     var alpha = createjs.castNumber(opt_arg2);
2382     return 'rgba(' + red + ',' + green + ',' + blue + ',' + alpha + ')';
2383   }
2384 };
2385 
2386 /**
2387  * Returns a CSS-compatible color string from three HSL values or from four HSL
2388  * values.
2389  * @param {number} hue
2390  * @param {number} saturation
2391  * @param {number} lightness
2392  * @param {number=} opt_alpha
2393  * @return {string}
2394  * @const
2395  */
2396 createjs.Graphics.getHSL = function(hue, saturation, lightness, opt_alpha) {
2397   /// <param type="number" name="hue"/>
2398   /// <param type="number" name="saturation"/>
2399   /// <param type="number" name="lightness"/>
2400   /// <param type="number" optional="true" name="opt_alpha"/>
2401   /// <returns type="string"/>
2402   hue %= 360;
2403   if (opt_alpha == null) {
2404     return 'hsl(' + hue + ',' + saturation + '%,' + lightness + '%)';
2405   } else {
2406     var alpha = createjs.getNumber(opt_alpha);
2407     return 'hsla(' + hue + ',' + saturation + '%,' + lightness + '%,' +
2408         alpha + ')';
2409   }
2410 };
2411 
2412 /**
2413  * Resets the global variables used by this class and the inner classes in this
2414  * file.
2415  * @const
2416  */
2417 createjs.Graphics.reset = function() {
2418   createjs.Graphics.DrawPath.instances_ = [null, null, null, null];
2419   createjs.Graphics.DecodePath.id_ = 0;
2420   createjs.Graphics.DecodePath.instances_ = {};
2421   var renderers = createjs.Graphics.renderers_;
2422   for (var key in renderers) {
2423     var renderer = renderers[key];
2424     if (renderer) {
2425       renderer.uncache_();
2426     }
2427   }
2428   createjs.Graphics.renderers_ = {};
2429   if (createjs.DEBUG) {
2430     createjs.Counter.cachedRenderers = 0;
2431     createjs.Counter.totalRenderers = 0;
2432   }
2433 };
2434 
2435 /**
2436  * Returns the renderer used for drawing paths.
2437  * @param {string} key
2438  * @param {number} flag
2439  * @return {createjs.Graphics.CanvasRenderer}
2440  * @private
2441  */
2442 createjs.Graphics.prototype.getRenderer_ = function(key, flag) {
2443   /// <param type="string" name="text"/>
2444   /// <returns type="createjs.Graphics.CanvasRenderer"/>
2445   this.deleteCache_();
2446   this.renderer_ =
2447       new createjs.Graphics.CanvasRenderer(flag);
2448   this.key_ = key;
2449   return this.renderer_;
2450 };
2451 
2452 /**
2453  * Updates the cache. This method creates a HTMLCanvasElement object whose size
2454  * is equal to the one of the bounding box of this object and draws paths to the
2455  * HTMLCanvasElement object.
2456  * @param {number} flag
2457  * @private
2458  */
2459 createjs.Graphics.prototype.updateCache_ = function(flag) {
2460   if (createjs.DEBUG) {
2461     ++createjs.Counter.totalRenderers;
2462   }
2463   this.redraw_ = false;
2464   // Calculate the size of an output HTMLCanvasElement object and execute the
2465   // path commands if the object is not an empty one. The HTML5 specification
2466   // prohibits calling the 'drawImage()' method with an empty HTMLCanvasElement
2467   // object. (In fact, Safari throws an exception.)
2468   this.box.addMargin(this.margin_);
2469   var width = this.box.getWidth();
2470   var height = this.box.getHeight();
2471   if (width < 1 || height < 1) {
2472     return;
2473   }
2474   var path = this.path_;
2475   var length = path.length;
2476   var key = '';
2477   // Concatenate the rendering commands in the path list and use it as a key
2478   // for the table of cached renderer objects. (The first command in a path
2479   // list is always a BeginPath command and this code skips it.)
2480   for (var i = 1; i < length; ++i) {
2481     var text = path[i].getText();
2482     if (!text) {
2483       key = '';
2484       break;
2485     }
2486     key += text;
2487   }
2488   // When there is a renderer object that has already rendered the same paths,
2489   // add its reference count and return it.
2490   if (key) {
2491     var renderer = createjs.Graphics.renderers_[key];
2492     if (renderer) {
2493       renderer.addRef_();
2494       this.renderer_ = renderer;
2495       this.key_ = key;
2496       return;
2497     }
2498   }
2499   var renderer = this.getRenderer_(key, flag);
2500   renderer.setBox_(this.box.minX, this.box.minY, width, height);
2501   for (var i = 0; i < length; ++i) {
2502     path[i].paint(renderer);
2503   }
2504   renderer.endPath_();
2505   if (key) {
2506     if (createjs.DEBUG) {
2507       ++createjs.Counter.cachedRenderers;
2508     }
2509     createjs.Graphics.renderers_[key] = renderer;
2510   }
2511 };
2512 
2513 /**
2514  * Adds the active paths to the path list.
2515  * @private
2516  */
2517 createjs.Graphics.prototype.updatePath_ = function() {
2518   this.path_.push(createjs.Graphics.BeginPath.get());
2519   if (this.fill_) {
2520     this.path_.push(this.fill_);
2521   }
2522   if (this.stroke_) {
2523     this.path_.push(this.stroke_);
2524     if (this.style_) {
2525       this.path_.push(this.style_);
2526     }
2527   }
2528   if (this.active_.length != 0) {
2529     this.path_.push.apply(this.path_, this.active_);
2530   }
2531   this.path_.push(createjs.Graphics.DrawPath.get(!!this.fill_, !!this.stroke_));
2532   // Update the cache <canvas> element next time when this object is rendered.
2533   // (A game may add more paths to this object and it is not good to update its
2534   // cache now.)
2535   this.redraw_ = true;
2536 };
2537 
2538 /**
2539  * Starts a new path. This method closes the current path and creates a new one.
2540  * @param {boolean} fill
2541  * @private
2542  */
2543 createjs.Graphics.prototype.newPath_ = function(fill) {
2544   /// <param type="boolean" name="fill"/>
2545   // This method should update paths only when there are drawable paths in the
2546   // active paths.
2547   if (this.active_.length) {
2548     if (this.dirty_) {
2549       this.updatePath_();
2550       this.dirty_ = false;
2551     }
2552     this.active_ = [];
2553   }
2554 };
2555 
2556 /**
2557  * Paints the paths of this graphics to its cache in the background.
2558  * @param {number} flag
2559  * @private
2560  */
2561 createjs.Graphics.prototype.createCache_ = function(flag) {
2562   /// <param type="number" name="flag"/>
2563   // Update the path list of this object if an application draws this object
2564   // without closing a path.
2565   if (this.dirty_) {
2566     // Fill a mask path in solid black to prevent its cache from becoming an
2567     // empty bitmap. (A mask path generated by Flash does not have either a fill
2568     // command or a stroke command, i.e. a mask path needs a fill command.)
2569     if (flag & 2) {
2570       if (!this.fill_) {
2571         this.fill_ = createjs.Graphics.FillColor.get('#000');
2572       }
2573     }
2574     this.updatePath_();
2575     this.dirty_ = false;
2576     this.active_ = [];
2577   }
2578   if (this.redraw_) {
2579     this.updateCache_(flag);
2580   }
2581 };
2582 
2583 /**
2584  * Deletes the rendering cache attached to this object.
2585  * @private
2586  */
2587 createjs.Graphics.prototype.deleteCache_ = function() {
2588   if (this.renderer_) {
2589     if (this.renderer_.release_() <= 0) {
2590       var key = this.key_;
2591       if (key) {
2592         if (createjs.DEBUG) {
2593           --createjs.Counter.cachedRenderers;
2594         }
2595         createjs.Graphics.renderers_[key] = null;
2596       }
2597     }
2598     if (createjs.DEBUG) {
2599       --createjs.Counter.totalRenderers;
2600     }
2601     this.renderer_ = null;
2602     this.redraw_ = true;
2603   }
2604 };
2605 
2606 /**
2607  * Returns whether this createjs.Graphics instance has drawing commands.
2608  * @return {boolean}
2609  * @const
2610  */
2611 createjs.Graphics.prototype.isEmpty = function() {
2612   /// <returns type="boolean"/>
2613   return !this.path_.length && !this.active_.length;
2614 };
2615 
2616 /**
2617  * Returns true if this createjs.Graphics instance needs a redraw.
2618  * @return {boolean}
2619  * @const
2620  */
2621 createjs.Graphics.prototype.isDirty = function() {
2622   /// <returns type="boolean"/>
2623   return this.dirty_ || this.redraw_;
2624 };
2625 
2626 /**
2627  * Returns whether the specified point is in this createjs.Graphics instance.
2628  * @param {createjs.Point} point
2629  * @return {number}
2630  * @const
2631  */
2632 createjs.Graphics.prototype.hitTestObject = function(point) {
2633   /// <param type="createjs.Point" name="point"/>
2634   /// <returns type="number"/>
2635   if (this.renderer_) {
2636     return this.renderer_.hitTestObject_(point.x - this.box.minX,
2637                                          point.y - this.box.minY);
2638   }
2639   return 0;
2640 };
2641 
2642 /**
2643  * Paints this graphics with the given createjs.Renderer interface.
2644  * @param {createjs.Renderer} renderer
2645  * @const
2646  */
2647 createjs.Graphics.prototype.paint = function(renderer) {
2648   /// <param type="createjs.Renderer" name="renderer"/>
2649   // Update the cache image and copy it only if this object is not updating it
2650   // in the background.
2651   this.createCache_(0);
2652   if (this.renderer_) {
2653     this.renderer_.setOutput_(renderer);
2654     var box = this.box;
2655     renderer.drawCanvas(
2656         this.renderer_.getCanvas_(),
2657         box.getLeft(), box.getTop(), box.getWidth(), box.getHeight());
2658   }
2659 };
2660 
2661 /**
2662  * Draws the display object into the specified context.
2663  * @param {CanvasRenderingContext2D} context
2664  * @const
2665  */
2666 createjs.Graphics.prototype.draw = function(context) {
2667   /// <param type="CanvasRenderingContext2D" name="context"/>
2668   createjs.notReached();
2669 };
2670 
2671 /**
2672  * Draws only the paths of this createjs.Graphics instance.
2673  * @param {CanvasRenderingContext2D} context
2674  * @const
2675  */
2676 createjs.Graphics.prototype.drawAsPath = function(context) {
2677   /// <param type="CanvasRenderingContext2D" name="context"/>
2678   createjs.notReached();
2679 };
2680 
2681 /**
2682  * Draws queued graphics commands to the cache renderer of this object.
2683  * @param {number} flag
2684  * @const
2685  */
2686 createjs.Graphics.prototype.cache = function(flag) {
2687   /// <param type="number" name="flag"/>
2688   this.createCache_(flag);
2689 };
2690 
2691 /**
2692  * Removes the cache renderer from this object.
2693  * @const
2694  */
2695 createjs.Graphics.prototype.uncache = function() {
2696   this.deleteCache_();
2697 };
2698 
2699 /**
2700  * Moves the drawing point to the specified position. A tiny API method "mt"
2701  * also exists.
2702  * @param {number} x
2703  * @param {number} y
2704  * @return {createjs.Graphics}
2705  * @const
2706  */
2707 createjs.Graphics.prototype.moveTo = function(x, y) {
2708   /// <param type="number" name="x"/>
2709   /// <param type="number" name="y"/>
2710   /// <returns type="createjs.Graphics"/>
2711   this.box.update(x, y);
2712   this.active_.push(createjs.Graphics.MoveTo.get(x, y));
2713   return this;
2714 };
2715 
2716 /**
2717  * Draws a line from the current drawing point to the specified position, which
2718  * become the new current drawing point. A tiny API method "lt" also exists.
2719  * @param {number} x
2720  * @param {number} y
2721  * @return {createjs.Graphics}
2722  * @const
2723  */
2724 createjs.Graphics.prototype.lineTo = function(x, y) {
2725   /// <param type="number" name="x"/>
2726   /// <param type="number" name="y"/>
2727   /// <returns type="createjs.Graphics"/>
2728   this.dirty_ = true;
2729   this.box.update(x, y);
2730   this.active_.push(createjs.Graphics.LineTo.get(x, y));
2731   return this;
2732 };
2733 
2734 /**
2735  * Draws an arc with the specified control points and radius. A tiny API method
2736  * "at" also exists.
2737  * @method arcTo
2738  * @param {number} x1
2739  * @param {number} y1
2740  * @param {number} x2
2741  * @param {number} y2
2742  * @param {number} radius
2743  * @return {createjs.Graphics}
2744  * @const
2745  */
2746 createjs.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) {
2747   /// <param type="number" name="x1"/>
2748   /// <param type="number" name="y1"/>
2749   /// <param type="number" name="x2"/>
2750   /// <param type="number" name="y2"/>
2751   /// <returns type="createjs.Graphics"/>
2752   this.dirty_ = true;
2753   this.box.update(x1, y1);
2754   this.box.update(x2, y2);
2755   this.active_.push(createjs.Graphics.ArcTo.get(x1, y1, x2, y2, radius));
2756   return this;
2757 };
2758 
2759 /**
2760  * Draws an arc defined by the radius, startAngle and endAngle arguments,
2761  * centered at the position (x, y). For example, to draw a full circle with a
2762  * radius of 20 centered at (100, 100):
2763  *
2764  *      arc(100, 100, 20, 0, Math.PI * 2);
2765  *
2766  * A tiny API method "a" also exists.
2767  * @param {number} x
2768  * @param {number} y
2769  * @param {number} radius
2770  * @param {number} startAngle
2771  * @param {number} endAngle
2772  * @param {boolean} anticlockwise
2773  * @return {createjs.Graphics}
2774  * @const
2775  */
2776 createjs.Graphics.prototype.arc =
2777     function(x, y, radius, startAngle, endAngle, anticlockwise) {
2778   /// <param type="number" name="x"/>
2779   /// <param type="number" name="y"/>
2780   /// <param type="number" name="radius"/>
2781   /// <param type="number" name="startAngle"/>
2782   /// <param type="number" name="endAngle"/>
2783   /// <param type="number" name="anticlockwise"/>
2784   /// <returns type="createjs.Graphics"/>
2785   this.dirty_ = true;
2786   this.box.update(x - radius, y - radius);
2787   this.box.update(x + radius, y + radius);
2788   this.active_.push(createjs.Graphics.Arc.get(
2789       x, y, radius, startAngle, endAngle, anticlockwise));
2790   return this;
2791 };
2792 
2793 /**
2794  * Draws a quadratic bezier curve from the current drawing point to (x, y)
2795  * using the control point (cpx, cpy). A tiny API method "qt" also exists.
2796  * @param {number} cpx
2797  * @param {number} cpy
2798  * @param {number} x
2799  * @param {number} y
2800  * @return {createjs.Graphics}
2801  * @const
2802  */
2803 createjs.Graphics.prototype.quadraticCurveTo = function(cpx, cpy, x, y) {
2804   /// <param type="number" name="cpx"/>
2805   /// <param type="number" name="cpy"/>
2806   /// <param type="number" name="x"/>
2807   /// <param type="number" name="y"/>
2808   /// <returns type="createjs.Graphics"/>
2809   this.dirty_ = true;
2810   this.box.update(cpx, cpy);
2811   this.box.update(x, y);
2812   this.active_.push(createjs.Graphics.QuadraticCurveTo.get(cpx, cpy, x, y));
2813   return this;
2814 };
2815 
2816 /**
2817  * Draws a bezier curve from the current drawing point to (x, y) using the
2818  * control points (cp1x, cp1y) and (cp2x, cp2y). A tiny API method "bt" also
2819  * exists.
2820  * @param {number} cp1x
2821  * @param {number} cp1y
2822  * @param {number} cp2x
2823  * @param {number} cp2y
2824  * @param {number} x
2825  * @param {number} y
2826  * @return {createjs.Graphics}
2827  * @const
2828  */
2829 createjs.Graphics.prototype.bezierCurveTo =
2830     function(cp1x, cp1y, cp2x, cp2y, x, y) {
2831   /// <param type="number" name="cp1x"/>
2832   /// <param type="number" name="cp1y"/>
2833   /// <param type="number" name="cp2x"/>
2834   /// <param type="number" name="cp2y"/>
2835   /// <param type="number" name="x"/>
2836   /// <param type="number" name="y"/>
2837   /// <returns type="createjs.Graphics"/>
2838   this.dirty_ = true;
2839   this.box.update(cp1x, cp1y);
2840   this.box.update(cp2x, cp2y);
2841   this.box.update(x, y);
2842   this.active_.push(
2843       createjs.Graphics.CurveTo.get(cp1x, cp1y, cp2x, cp2y, x, y));
2844   return this;
2845 };
2846 
2847 /**
2848  * Draws a rectangle at (x, y) with the specified width and height using the
2849  * current fill and/or stroke. A tiny API method "r" also exists.
2850  * @param {number} x
2851  * @param {number} y
2852  * @param {number} width
2853  * @param {number} height
2854  * @return {createjs.Graphics}
2855  * @const
2856  */
2857 createjs.Graphics.prototype.rect = function(x, y, width, height) {
2858   /// <param type="number" name="x"/>
2859   /// <param type="number" name="y"/>
2860   /// <param type="number" name="width"/>
2861   /// <param type="number" name="height"/>
2862   /// <returns type="createjs.Graphics"/>
2863   this.dirty_ = true;
2864   this.box.update(x, y);
2865   this.box.update(x + width, y + height);
2866   this.active_.push(
2867       createjs.Graphics.Rect.get(x, y, width, height));
2868   return this;
2869 };
2870 
2871 /**
2872  * Closes the current path, effectively drawing a line from the current drawing
2873  * point to the first drawing point specified since the fill or stroke was last
2874  * set. A tiny API method "cp" also exists.
2875  * @return {createjs.Graphics}
2876  * @const
2877  */
2878 createjs.Graphics.prototype.closePath = function() {
2879   /// <returns type="createjs.Graphics"/>
2880   if (this.active_.length > 0) {
2881     this.dirty_ = true;
2882     this.active_.push(createjs.Graphics.ClosePath.get());
2883   }
2884   return this;
2885 };
2886 
2887 /**
2888  * Clears all drawing instructions, effectively resetting this createjs.Graphics
2889  * instance. Any line and fill styles will need to be redefined to draw shapes
2890  * following a clear call. A tiny API method "c" also exists.
2891  * @return {createjs.Graphics}
2892  * @const
2893  */
2894 createjs.Graphics.prototype.clear = function() {
2895   /// <returns type="createjs.Graphics"/>
2896   this.deleteCache_();
2897   this.box.reset();
2898   this.dirty_ = false;
2899   this.path_ = [];
2900   this.fill_ = null;
2901   this.stroke_ = null;
2902   this.active_ = [];
2903   return this;
2904 };
2905 
2906 /**
2907  * Begins a fill with the specified color. This ends the current sub-path. A
2908  * tiny API method "f" also exists.
2909  * @param {string=} opt_color
2910  * @return {createjs.Graphics}
2911  * @const
2912  */
2913 createjs.Graphics.prototype.beginFill = function(opt_color) {
2914   /// <param type="string" optional="true" name="opt_color"/>
2915   /// <returns type="createjs.Graphics"/>
2916   this.newPath_(true);
2917   if (opt_color) {
2918     var color = createjs.castString(opt_color);
2919     this.fill_ = createjs.Graphics.FillColor.get(color);
2920   }
2921   return this;
2922 };
2923 
2924 /**
2925  * Begins a linear gradient fill defined by the line (x0, y0) to (x1, y1). This
2926  * ends the current sub-path. For example, the following code defines a black to
2927  * white vertical gradient ranging from 20px to 120px, and draws a square to
2928  * display it:
2929  *
2930  *   createjs.Graphics.
2931  *       beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).
2932  *       drawRect(20, 20, 120, 120);
2933  *
2934  * A tiny API method "lf" also exists.
2935  * @param {Array} colors
2936  * @param {Array} ratios
2937  * @param {number} x0
2938  * @param {number} y0
2939  * @param {number} x1
2940  * @param {number} y1
2941  * @return {createjs.Graphics}
2942  * @const
2943  */
2944 createjs.Graphics.prototype.beginLinearGradientFill =
2945     function(colors, ratios, x0, y0, x1, y1) {
2946   /// <param type="Array" elementType="string" name="colors"/>
2947   /// <param type="Array" elementType="string" name="ratios"/>
2948   /// <param type="number" name="x0"/>
2949   /// <param type="number" name="y0"/>
2950   /// <param type="number" name="x1"/>
2951   /// <param type="number" name="y1"/>
2952   /// <returns type="createjs.Graphics"/>
2953   this.newPath_(true);
2954   this.fill_ =
2955       createjs.Graphics.FillLinear.get(colors, ratios, x0, y0, x1, y1);
2956   return this;
2957 };
2958 
2959 /**
2960  * Begins a radial gradient fill. This ends the current sub-path. For example,
2961  * the following code defines a red to blue radial gradient centered at
2962  * (100, 100), with a radius of 50, and draws a circle to display it:
2963  *
2964  *   mycreatejs.Graphics.
2965  *       beginRadialGradientFill(["#F00", "#00F"],
2966  *                               [0, 1],
2967  *                               100, 100, 0, 100, 100, 50).
2968  *       drawCircle(100, 100, 50);
2969  *
2970  * A tiny API method "rf" also exists.
2971  * @param {Array} colors
2972  * @param {Array} ratios
2973  * @param {number} x0
2974  * @param {number} y0
2975  * @param {number} r0
2976  * @param {number} x1
2977  * @param {number} y1
2978  * @param {number} r1
2979  * @return {createjs.Graphics}
2980  * @const
2981  */
2982 createjs.Graphics.prototype.beginRadialGradientFill =
2983     function(colors, ratios, x0, y0, r0, x1, y1, r1) {
2984   /// <param type="Array" elementType="string" name="colors"/>
2985   /// <param type="Array" elementType="string" name="ratios"/>
2986   /// <param type="number" name="x0"/>
2987   /// <param type="number" name="y0"/>
2988   /// <param type="number" name="r0"/>
2989   /// <param type="number" name="x1"/>
2990   /// <param type="number" name="y1"/>
2991   /// <param type="number" name="r1"/>
2992   /// <returns type="createjs.Graphics"/>
2993   this.newPath_(true);
2994   this.fill_ =
2995       createjs.Graphics.FillRadial.get(colors, ratios, x0, y0, r0, x1, y1, r1);
2996   return this;
2997 };
2998 
2999 /**
3000  * Begins a pattern fill using the specified image. This ends the current
3001  * sub-path. A tiny API method "bf" also exists.
3002  * @param {HTMLImageElement} image
3003  * @param {string=} opt_repetition
3004  * @param {Object.<string,number>=} opt_matrix
3005  * @return {createjs.Graphics}
3006  * @const
3007  */
3008 createjs.Graphics.prototype.beginBitmapFill =
3009     function(image, opt_repetition, opt_matrix) {
3010   /// <param type="HTMLImageElement" name="image"/>
3011   /// <param type="string" optional="true" name="opt_repetition"/>
3012   /// <param type="Object" optional="true" name="opt_matrix"/>
3013   /// <returns type="createjs.Graphics"/>
3014   // Disabled a pattern fill due to a crash on Chrome in rendering a texture
3015   // with its wrap mode REPEAT.
3016   createjs.notReached();
3017   return this;
3018 };
3019 
3020 /**
3021  * Ends the current sub-path, and begins a new one with no fill. Functionally
3022  * identical to <code>beginFill(null)</code>. A tiny API method "ef" also
3023  * exists.
3024  * @return {createjs.Graphics}
3025  * @const
3026  */
3027 createjs.Graphics.prototype.endFill = function() {
3028   /// <returns type="createjs.Graphics"/>
3029   this.newPath_(true);
3030   return this;
3031 };
3032 
3033 /**
3034  * Sets the stroke style for the current sub-path. A tiny API method "ss" also
3035  * exists.
3036  * @param {number=} opt_thickness
3037  * @param {(string|number)=} opt_caps
3038  * @param {(string|number)=} opt_joints
3039  * @param {number=} opt_miterLimit
3040  * @param {boolean=} opt_ignoreScale
3041  * @return {createjs.Graphics}
3042  * @const
3043  */
3044 createjs.Graphics.prototype.setStrokeStyle = function(opt_thickness,
3045                                                       opt_caps,
3046                                                       opt_joints,
3047                                                       opt_miterLimit,
3048                                                       opt_ignoreScale) {
3049   /// <param type="number" optional="true" name="opt_thickness"/>
3050   /// <param type="number" optional="true" name="opt_caps"/>
3051   /// <param type="number" optional="true" name="opt_joints"/>
3052   /// <param type="number" optional="true" name="opt_miterLimit"/>
3053   /// <param type="boolean" optional="true" name="opt_ignoreScale"/>
3054   /// <returns type="createjs.Graphics"/>
3055   this.newPath_(false);
3056   var thickness = (opt_thickness == null) ? 1 : opt_thickness;
3057   var caps = createjs.Graphics.getProperty_(['butt', 'round', 'square'],
3058                                             opt_caps);
3059   var joints = createjs.Graphics.getProperty_(['miter', 'round', 'bevel'],
3060                                               opt_joints);
3061   var miterLimit = (opt_miterLimit == null) ? 10 : opt_miterLimit;
3062   this.style_ =
3063       createjs.Graphics.LineStyle.get(thickness, caps, joints, miterLimit);
3064   this.margin_ = createjs.max(thickness, this.margin_);
3065   return this;
3066 };
3067 
3068 /**
3069  * Begins a stroke with the specified color. This ends the current sub-path. A
3070  * tiny API method "s" also exists.
3071  * @param {string=} opt_color
3072  * @return {createjs.Graphics}
3073  * @const
3074  */
3075 createjs.Graphics.prototype.beginStroke = function(opt_color) {
3076   /// <param type="string" optional="true" name="opt_color"/>
3077   /// <returns type="createjs.Graphics"/>
3078   this.newPath_(false);
3079   if (opt_color) {
3080     var color = createjs.getString(opt_color);
3081     this.stroke_ = createjs.Graphics.StrokeColor.get(color);
3082   }
3083   return this;
3084 };
3085 
3086 /**
3087  * Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). A
3088  * tiny API method "ls" also exists.
3089  * @param {Array} colors
3090  * @param {Array} ratios
3091  * @param {number} x0
3092  * @param {number} y0
3093  * @param {number} x1
3094  * @param {number} y1
3095  * @return {createjs.Graphics}
3096  * @const
3097  */
3098 createjs.Graphics.prototype.beginLinearGradientStroke =
3099     function(colors, ratios, x0, y0, x1, y1) {
3100   /// <param type="Array" elementType="string" name="colors"/>
3101   /// <param type="Array" elementType="string" name="ratios"/>
3102   /// <param type="number" name="x0"/>
3103   /// <param type="number" name="y0"/>
3104   /// <param type="number" name="x1"/>
3105   /// <param type="number" name="y1"/>
3106   /// <returns type="createjs.Graphics"/>
3107   this.newPath_(false);
3108   this.stroke_ =
3109       createjs.Graphics.StrokeLinear.get(colors, ratios, x0, y0, x1, y1);
3110   return this;
3111 };
3112 
3113 /**
3114  * Begins a radial gradient stroke. A tiny API method "rs" also exists.
3115  * @param {Array} colors
3116  * @param {Array} ratios
3117  * @param {number} x0
3118  * @param {number} y0
3119  * @param {number} r0
3120  * @param {number} x1
3121  * @param {number} y1
3122  * @param {number} r1
3123  * @return {createjs.Graphics}
3124  * @const
3125  */
3126 createjs.Graphics.prototype.beginRadialGradientStroke =
3127     function(colors, ratios, x0, y0, r0, x1, y1, r1) {
3128   /// <param type="Array" elementType="string" name="colors"/>
3129   /// <param type="Array" elementType="string" name="ratios"/>
3130   /// <param type="number" name="x0"/>
3131   /// <param type="number" name="y0"/>
3132   /// <param type="number" name="r0"/>
3133   /// <param type="number" name="x1"/>
3134   /// <param type="number" name="y1"/>
3135   /// <param type="number" name="r1"/>
3136   /// <returns type="createjs.Graphics"/>
3137   this.newPath_(false);
3138   this.stroke_ = createjs.Graphics.StrokeRadial.get(
3139       colors, ratios, x0, y0, r0, x1, y1, r1);
3140   return this;
3141 };
3142 
3143 /**
3144  * Begins a pattern stroke using the specified image. This ends the current
3145  * sub-path. Note that unlike bitmap fills, strokes do not currently support a
3146  * matrix parameter due to limitations in the canvas API. A tiny API method "bs"
3147  * also exists.
3148  * @param {HTMLImageElement} image
3149  * @param {string=} opt_repetition
3150  * @return {createjs.Graphics}
3151  * @const
3152  */
3153 createjs.Graphics.prototype.beginBitmapStroke =
3154     function(image, opt_repetition) {
3155   /// <param type="HTMLImageElement" name="image"/>
3156   /// <param type="string" optional="true" name="opt_repetition"/>
3157   /// <returns type="createjs.Graphics"/>
3158   // Disabled a pattern stroke due to a crash on Chrome in rendering a texture
3159   // with its wrap mode REPEAT.
3160   createjs.notReached();
3161   return this;
3162 };
3163 
3164 /**
3165  * Ends the current sub-path, and begins a new one with no stroke. Functionally
3166  * identical to the Graphics.beginStroke(null) call. A tiny API method "es" also
3167  * exists.
3168  * @return {createjs.Graphics}
3169  * @const
3170  */
3171 createjs.Graphics.prototype.endStroke = function() {
3172   /// <returns type="createjs.Graphics"/>
3173   this.newPath_(false);
3174   return this;
3175 };
3176 
3177 /**
3178  * Draws a rounded rectangle with all corners with the specified radius.
3179  * @param {number} x
3180  * @param {number} y
3181  * @param {number} width
3182  * @param {number} height
3183  * @param {number} radius
3184  * @return {createjs.Graphics}
3185  * @const
3186  */
3187 createjs.Graphics.prototype.drawRoundRect =
3188     function(x, y, width, height, radius) {
3189   /// <param type="number" name="x"/>
3190   /// <param type="number" name="y"/>
3191   /// <param type="number" name="width"/>
3192   /// <param type="number" name="height"/>
3193   /// <returns type="createjs.Graphics"/>
3194   createjs.notReached();
3195   return this;
3196 };
3197 
3198 /**
3199  * Draws a rounded rectangle with different corner radii. Supports positive and
3200  * negative corner radii. A tiny API method "rc" also exists.
3201  * @param {number} x
3202  * @param {number} y
3203  * @param {number} width
3204  * @param {number} height
3205  * @param {number} radiusTL
3206  * @param {number} radiusTR
3207  * @param {number} radiusBR
3208  * @param {number} radiusBL
3209  * @return {createjs.Graphics}
3210  * @const
3211  */
3212 createjs.Graphics.prototype.drawRoundRectComplex =
3213     function(x, y, width, height, radiusTL, radiusTR, radiusBR, radiusBL) {
3214   /// <param type="number" name="x"/>
3215   /// <param type="number" name="y"/>
3216   /// <param type="number" name="width"/>
3217   /// <param type="number" name="height"/>
3218   /// <param type="number" name="radiusTL"/>
3219   /// <param type="number" name="radiusTR"/>
3220   /// <param type="number" name="radiusBR"/>
3221   /// <param type="number" name="radiusBL"/>
3222   /// <returns type="createjs.Graphics"/>
3223   createjs.notReached();
3224   return this;
3225 };
3226 
3227 /**
3228  * Draws a circle with the specified radius at (x, y).  A tiny API method "dc"
3229  * also exists.
3230  * @param {number} x
3231  * @param {number} y
3232  * @param {number} radius
3233  * @return {createjs.Graphics}
3234  * @const
3235  */
3236 createjs.Graphics.prototype.drawCircle = function(x, y, radius) {
3237   /// <param type="number" name="x"/>
3238   /// <param type="number" name="y"/>
3239   /// <param type="number" name="radius"/>
3240   /// <returns type="createjs.Graphics"/>
3241   // Draw an arc from 0 rad to 7 rad (= Math.ceil(Math.PI * 2) = 6.28...) to
3242   // avoid using a double number. (Most arc() implementations use float numbers
3243   // and it is an overkill to use double numbers.)
3244   this.arc(x, y, radius, 0, 7, false);
3245   return this;
3246 };
3247 
3248 /**
3249  * Draws an ellipse (oval) with a specified width and height. Similar to
3250  * the Graphics.drawCircle() method except the width and height can be
3251  * different. A tiny API method "de" also exists.
3252  * @param {number} x
3253  * @param {number} y
3254  * @param {number} width
3255  * @param {number} height
3256  * @return {createjs.Graphics}
3257  * @const
3258  */
3259 createjs.Graphics.prototype.drawEllipse = function(x, y, width, height) {
3260   /// <param type="number" name="x"/>
3261   /// <param type="number" name="y"/>
3262   /// <param type="number" name="width"/>
3263   /// <param type="number" name="height"/>
3264   /// <returns type="createjs.Graphics"/>
3265   this.dirty_ = true;
3266   this.box.update(x, y);
3267   this.box.update(x + width, y + height);
3268   var k = 0.5522848;
3269   var ox = (width * 0.5) * k;
3270   var oy = (height * 0.5) * k;
3271   var xe = x + width;
3272   var ye = y + height;
3273   var xm = x + width * 0.5;
3274   var ym = y + height * 0.5;
3275   this.active_.push(
3276       createjs.Graphics.MoveTo.get(x, ym),
3277       createjs.Graphics.CurveTo.get(x, ym - oy, xm - ox, y, xm, y),
3278       createjs.Graphics.CurveTo.get(xm + ox, y, xe, ym - oy, xe, ym),
3279       createjs.Graphics.CurveTo.get(xe, ym + oy, xm + ox, ye, xm, ye),
3280       createjs.Graphics.CurveTo.get(xm - ox, ye, x, ym + oy, x, ym));
3281   return this;
3282 };
3283 
3284 /**
3285  * Injects a method of the Canvas 2D API.
3286  * @param {Function} callback
3287  * @param {Object} data
3288  * @return {createjs.Graphics}
3289  * @const
3290  */
3291 createjs.Graphics.prototype.inject = function(callback, data) {
3292   /// <param type="Function" name="callback"/>
3293   /// <param type="Object" name="data"/>
3294   /// <returns type="createjs.Graphics"/>
3295   createjs.notReached();
3296   return this;
3297 };
3298 
3299 /**
3300  * Draws a star or a convex. This method draws a start if pointSize is greater
3301  * than 0, or it draws a convex if pointSize is 0 with the specified number of
3302  * points. For example, the following code will draw a familiar 5 pointed star
3303  * shape centered at (100, 100) and with a radius of 50:
3304  *
3305  *   mycreatejs.Graphics.beginFill("#FF0").
3306  *       drawPolyStar(100, 100, 50, 5, 0.6, -90);
3307  *   // Note: -90 makes the first point vertical
3308  *
3309  * A tiny API method "dp" also exists.
3310  *
3311  * @param {number} x
3312  * @param {number} y
3313  * @param {number} radius
3314  * @param {number} sides
3315  * @param {number=} opt_pointSize
3316  * @param {number=} opt_angle (in degrees)
3317  * @return {createjs.Graphics}
3318  * @const
3319  */
3320 createjs.Graphics.prototype.drawPolyStar =
3321     function(x, y, radius, sides, opt_pointSize, opt_angle) {
3322   /// <param type="number" name="x"/>
3323   /// <param type="number" name="y"/>
3324   /// <param type="number" name="radius"/>
3325   /// <param type="number" name="sides"/>
3326   /// <param type="number" optional="true" name="opt_pointSize"/>
3327   /// <param type="number" optional="true" name="opt_angle"/>
3328   createjs.notReached();
3329   return this;
3330 };
3331 
3332 /**
3333  * Decodes a compact-encoded-path string.
3334  * A tiny API method "p" also exists.
3335  *
3336  * @param {string} encoded
3337  * @return {createjs.Graphics}
3338  * @const
3339  */
3340 createjs.Graphics.prototype.decodePath = function(encoded) {
3341   /// <param type="string" name="encoded"/>
3342   /// <returns type="createjs.Graphics"/>
3343   this.dirty_ = true;
3344   this.active_.push(createjs.Graphics.DecodePath.get(encoded, this.box));
3345   return this;
3346 };
3347 
3348 /**
3349  * Returns whether the specified point is in this object.
3350  * @param {number} x
3351  * @param {number} y
3352  * @return {boolean}
3353  * @const
3354  */
3355 createjs.Graphics.prototype.hitTest = function(x, y) {
3356   /// <param type="number" name="x"/>
3357   /// <param type="number" name="y"/>
3358   /// <returns type="boolean"/>
3359   return this.box.contain(x, y);
3360 };
3361 
3362 // Export the createjs.Graphics object to the global namespace.
3363 createjs.exportObject('createjs.Graphics', createjs.Graphics, {
3364   // createjs.Graphics methods.
3365   'moveTo': createjs.Graphics.prototype.moveTo,
3366   'lineTo': createjs.Graphics.prototype.lineTo,
3367   'arcTo': createjs.Graphics.prototype.arcTo,
3368   'arc': createjs.Graphics.prototype.arc,
3369   'quadraticCurveTo': createjs.Graphics.prototype.quadraticCurveTo,
3370   'bezierCurveTo': createjs.Graphics.prototype.bezierCurveTo,
3371   'rect': createjs.Graphics.prototype.rect,
3372   'closePath': createjs.Graphics.prototype.closePath,
3373   'clear': createjs.Graphics.prototype.clear,
3374   'beginFill': createjs.Graphics.prototype.beginFill,
3375   'beginLinearGradientFill':
3376       createjs.Graphics.prototype.beginLinearGradientFill,
3377   'beginRadialGradientFill':
3378       createjs.Graphics.prototype.beginRadialGradientFill,
3379   'beginBitmapFill': createjs.Graphics.prototype.beginBitmapFill,
3380   'endFill': createjs.Graphics.prototype.endFill,
3381   'setStrokeStyle': createjs.Graphics.prototype.setStrokeStyle,
3382   'beginStroke': createjs.Graphics.prototype.beginStroke,
3383   'beginLinearGradientStroke':
3384       createjs.Graphics.prototype.beginLinearGradientStroke,
3385   'beginRadialGradientStroke':
3386       createjs.Graphics.prototype.beginRadialGradientStroke,
3387   'beginBitmapStroke': createjs.Graphics.prototype.beginBitmapStroke,
3388   'endStroke': createjs.Graphics.prototype.endStroke,
3389   'curveTo': createjs.Graphics.prototype.quadraticCurveTo,
3390   'drawRect': createjs.Graphics.prototype.rect,
3391   'drawRoundRect': createjs.Graphics.prototype.drawRoundRect,
3392   'drawRoundRectComplex': createjs.Graphics.prototype.drawRoundRectComplex,
3393   'drawCircle': createjs.Graphics.prototype.drawCircle,
3394   'drawEllipse': createjs.Graphics.prototype.drawEllipse,
3395   'inject': createjs.Graphics.prototype.inject,
3396   'drawPolyStar': createjs.Graphics.prototype.drawPolyStar,
3397   'decodePath': createjs.Graphics.prototype.decodePath,
3398   'mt': createjs.Graphics.prototype.moveTo,
3399   'lt': createjs.Graphics.prototype.lineTo,
3400   'at': createjs.Graphics.prototype.arcTo,
3401   'a': createjs.Graphics.prototype.arc,
3402   'qt': createjs.Graphics.prototype.quadraticCurveTo,
3403   'bt': createjs.Graphics.prototype.bezierCurveTo,
3404   'r': createjs.Graphics.prototype.rect,
3405   'cp': createjs.Graphics.prototype.closePath,
3406   'c': createjs.Graphics.prototype.clear,
3407   'f': createjs.Graphics.prototype.beginFill,
3408   'lf': createjs.Graphics.prototype.beginLinearGradientFill,
3409   'rf': createjs.Graphics.prototype.beginRadialGradientFill,
3410   'bf': createjs.Graphics.prototype.beginBitmapFill,
3411   'ef': createjs.Graphics.prototype.endFill,
3412   'ss': createjs.Graphics.prototype.setStrokeStyle,
3413   's': createjs.Graphics.prototype.beginStroke,
3414   'ls': createjs.Graphics.prototype.beginLinearGradientStroke,
3415   'rs': createjs.Graphics.prototype.beginRadialGradientStroke,
3416   'bs': createjs.Graphics.prototype.beginBitmapStroke,
3417   'es': createjs.Graphics.prototype.endStroke,
3418   'dr': createjs.Graphics.prototype.rect,
3419   'rr': createjs.Graphics.prototype.drawRoundRect,
3420   'rc': createjs.Graphics.prototype.drawRoundRectComplex,
3421   'dc': createjs.Graphics.prototype.drawCircle,
3422   'de': createjs.Graphics.prototype.drawEllipse,
3423   'dp': createjs.Graphics.prototype.drawPolyStar,
3424   'p': createjs.Graphics.prototype.decodePath
3425 }, {
3426   'getRGB': createjs.Graphics.getRGB,
3427   'getHSL': createjs.Graphics.getHSL
3428 });
3429