@DomName('CanvasRenderingContext2D')
class CanvasRenderingContext2D extends CanvasRenderingContext native "CanvasRenderingContext2D" {

 @DomName('CanvasRenderingContext2D.currentPath')
 @DocsEditable
 Path currentPath;

 @DomName('CanvasRenderingContext2D.fillStyle')
 @DocsEditable
 @Creates('String|CanvasGradient|CanvasPattern')
 @Returns('String|CanvasGradient|CanvasPattern')
 dynamic fillStyle;

 @DomName('CanvasRenderingContext2D.font')
 @DocsEditable
 String font;

 @DomName('CanvasRenderingContext2D.globalAlpha')
 @DocsEditable
 num globalAlpha;

 @DomName('CanvasRenderingContext2D.globalCompositeOperation')
 @DocsEditable
 String globalCompositeOperation;

 @DomName('CanvasRenderingContext2D.lineCap')
 @DocsEditable
 String lineCap;

 @DomName('CanvasRenderingContext2D.lineJoin')
 @DocsEditable
 String lineJoin;

 @DomName('CanvasRenderingContext2D.lineWidth')
 @DocsEditable
 num lineWidth;

 @DomName('CanvasRenderingContext2D.miterLimit')
 @DocsEditable
 num miterLimit;

 @DomName('CanvasRenderingContext2D.shadowBlur')
 @DocsEditable
 num shadowBlur;

 @DomName('CanvasRenderingContext2D.shadowColor')
 @DocsEditable
 String shadowColor;

 @DomName('CanvasRenderingContext2D.shadowOffsetX')
 @DocsEditable
 num shadowOffsetX;

 @DomName('CanvasRenderingContext2D.shadowOffsetY')
 @DocsEditable
 num shadowOffsetY;

 @DomName('CanvasRenderingContext2D.strokeStyle')
 @DocsEditable
 @Creates('String|CanvasGradient|CanvasPattern')
 @Returns('String|CanvasGradient|CanvasPattern')
 dynamic strokeStyle;

 @DomName('CanvasRenderingContext2D.textAlign')
 @DocsEditable
 String textAlign;

 @DomName('CanvasRenderingContext2D.textBaseline')
 @DocsEditable
 String textBaseline;

 @JSName('webkitBackingStorePixelRatio')
 @DomName('CanvasRenderingContext2D.webkitBackingStorePixelRatio')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 final num backingStorePixelRatio;

 @JSName('webkitImageSmoothingEnabled')
 @DomName('CanvasRenderingContext2D.webkitImageSmoothingEnabled')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 bool imageSmoothingEnabled;

 @JSName('arc')
 @DomName('CanvasRenderingContext2D.arc')
 @DocsEditable
 void $dom_arc(num x, num y, num radius, num startAngle, num endAngle, bool anticlockwise) native;

 @DomName('CanvasRenderingContext2D.arcTo')
 @DocsEditable
 void arcTo(num x1, num y1, num x2, num y2, num radius) native;

 @DomName('CanvasRenderingContext2D.beginPath')
 @DocsEditable
 void beginPath() native;

 @DomName('CanvasRenderingContext2D.bezierCurveTo')
 @DocsEditable
 void bezierCurveTo(num cp1x, num cp1y, num cp2x, num cp2y, num x, num y) native;

 @DomName('CanvasRenderingContext2D.clearRect')
 @DocsEditable
 void clearRect(num x, num y, num width, num height) native;

 @DomName('CanvasRenderingContext2D.clip')
 @DocsEditable
 void clip([String winding]) native;

 @DomName('CanvasRenderingContext2D.closePath')
 @DocsEditable
 void closePath() native;

 @DomName('CanvasRenderingContext2D.createImageData')
 @DocsEditable
 @Creates('ImageData|=Object')
 ImageData createImageData(num sw, num sh) {
   return _convertNativeToDart_ImageData(_createImageData_1(sw, sh));
 }
 @JSName('createImageData')
 @DomName('CanvasRenderingContext2D.createImageData')
 @DocsEditable
 @Creates('ImageData|=Object')
 _createImageData_1(sw, sh) native;

 @DomName('CanvasRenderingContext2D.createImageData')
 @DocsEditable
 @Creates('ImageData|=Object')
 ImageData createImageDataFromImageData(ImageData imagedata) {
   var imagedata_1 = _convertDartToNative_ImageData(imagedata);
   return _convertNativeToDart_ImageData(_createImageDataFromImageData_1(imagedata_1));
 }
 @JSName('createImageData')
 @DomName('CanvasRenderingContext2D.createImageData')
 @DocsEditable
 @Creates('ImageData|=Object')
 _createImageDataFromImageData_1(imagedata) native;

 @DomName('CanvasRenderingContext2D.createLinearGradient')
 @DocsEditable
 CanvasGradient createLinearGradient(num x0, num y0, num x1, num y1) native;

 @DomName('CanvasRenderingContext2D.createPattern')
 @DocsEditable
 CanvasPattern createPattern(canvas_OR_image, String repetitionType) native;

 @DomName('CanvasRenderingContext2D.createRadialGradient')
 @DocsEditable
 CanvasGradient createRadialGradient(num x0, num y0, num r0, num x1, num y1, num r1) native;

 @DomName('CanvasRenderingContext2D.fill')
 @DocsEditable
 void fill([String winding]) native;

 @DomName('CanvasRenderingContext2D.fillRect')
 @DocsEditable
 void fillRect(num x, num y, num width, num height) native;

 @DomName('CanvasRenderingContext2D.fillText')
 @DocsEditable
 void fillText(String text, num x, num y, [num maxWidth]) native;

 @DomName('CanvasRenderingContext2D.getContextAttributes')
 @DocsEditable
 Canvas2DContextAttributes getContextAttributes() native;

 @DomName('CanvasRenderingContext2D.getImageData')
 @DocsEditable
 @Creates('ImageData|=Object')
 ImageData getImageData(num sx, num sy, num sw, num sh) {
   return _convertNativeToDart_ImageData(_getImageData_1(sx, sy, sw, sh));
 }
 @JSName('getImageData')
 @DomName('CanvasRenderingContext2D.getImageData')
 @DocsEditable
 @Creates('ImageData|=Object')
 _getImageData_1(sx, sy, sw, sh) native;

 @DomName('CanvasRenderingContext2D.getLineDash')
 @DocsEditable
 List<num> getLineDash() native;

 @DomName('CanvasRenderingContext2D.isPointInPath')
 @DocsEditable
 bool isPointInPath(num x, num y, [String winding]) native;

 @DomName('CanvasRenderingContext2D.isPointInStroke')
 @DocsEditable
 bool isPointInStroke(num x, num y) native;

 @DomName('CanvasRenderingContext2D.lineTo')
 @DocsEditable
 void lineTo(num x, num y) native;

 @DomName('CanvasRenderingContext2D.measureText')
 @DocsEditable
 TextMetrics measureText(String text) native;

 @DomName('CanvasRenderingContext2D.moveTo')
 @DocsEditable
 void moveTo(num x, num y) native;

 @DomName('CanvasRenderingContext2D.putImageData')
 @DocsEditable
 void putImageData(ImageData imagedata, num dx, num dy, [num dirtyX, num dirtyY, num dirtyWidth, num dirtyHeight]) {
   if (!?dirtyX && !?dirtyY && !?dirtyWidth && !?dirtyHeight) {
     var imagedata_1 = _convertDartToNative_ImageData(imagedata);
     _putImageData_1(imagedata_1, dx, dy);
     return;
   }
   var imagedata_2 = _convertDartToNative_ImageData(imagedata);
   _putImageData_2(imagedata_2, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
   return;
   throw new ArgumentError("Incorrect number or type of arguments");
 }
 @JSName('putImageData')
 @DomName('CanvasRenderingContext2D.putImageData')
 @DocsEditable
 void _putImageData_1(imagedata, dx, dy) native;
 @JSName('putImageData')
 @DomName('CanvasRenderingContext2D.putImageData')
 @DocsEditable
 void _putImageData_2(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) native;

 @DomName('CanvasRenderingContext2D.quadraticCurveTo')
 @DocsEditable
 void quadraticCurveTo(num cpx, num cpy, num x, num y) native;

 @DomName('CanvasRenderingContext2D.rect')
 @DocsEditable
 void rect(num x, num y, num width, num height) native;

 @DomName('CanvasRenderingContext2D.restore')
 @DocsEditable
 void restore() native;

 @DomName('CanvasRenderingContext2D.rotate')
 @DocsEditable
 void rotate(num angle) native;

 @DomName('CanvasRenderingContext2D.save')
 @DocsEditable
 void save() native;

 @DomName('CanvasRenderingContext2D.scale')
 @DocsEditable
 void scale(num sx, num sy) native;

 @DomName('CanvasRenderingContext2D.setLineDash')
 @DocsEditable
 void setLineDash(List<num> dash) native;

 @DomName('CanvasRenderingContext2D.setTransform')
 @DocsEditable
 void setTransform(num m11, num m12, num m21, num m22, num dx, num dy) native;

 @DomName('CanvasRenderingContext2D.stroke')
 @DocsEditable
 void stroke() native;

 @DomName('CanvasRenderingContext2D.strokeRect')
 @DocsEditable
 void strokeRect(num x, num y, num width, num height, [num lineWidth]) native;

 @DomName('CanvasRenderingContext2D.strokeText')
 @DocsEditable
 void strokeText(String text, num x, num y, [num maxWidth]) native;

 @DomName('CanvasRenderingContext2D.transform')
 @DocsEditable
 void transform(num m11, num m12, num m21, num m22, num dx, num dy) native;

 @DomName('CanvasRenderingContext2D.translate')
 @DocsEditable
 void translate(num tx, num ty) native;

 @DomName('CanvasRenderingContext2D.webkitGetImageDataHD')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 @Creates('ImageData|=Object')
 ImageData getImageDataHD(num sx, num sy, num sw, num sh) {
   return _convertNativeToDart_ImageData(_getImageDataHD_1(sx, sy, sw, sh));
 }
 @JSName('webkitGetImageDataHD')
 @DomName('CanvasRenderingContext2D.webkitGetImageDataHD')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 @Creates('ImageData|=Object')
 _getImageDataHD_1(sx, sy, sw, sh) native;

 @DomName('CanvasRenderingContext2D.webkitPutImageDataHD')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 void putImageDataHD(ImageData imagedata, num dx, num dy, [num dirtyX, num dirtyY, num dirtyWidth, num dirtyHeight]) {
   if (!?dirtyX && !?dirtyY && !?dirtyWidth && !?dirtyHeight) {
     var imagedata_1 = _convertDartToNative_ImageData(imagedata);
     _putImageDataHD_1(imagedata_1, dx, dy);
     return;
   }
   var imagedata_2 = _convertDartToNative_ImageData(imagedata);
   _putImageDataHD_2(imagedata_2, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
   return;
   throw new ArgumentError("Incorrect number or type of arguments");
 }
 @JSName('webkitPutImageDataHD')
 @DomName('CanvasRenderingContext2D.webkitPutImageDataHD')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 void _putImageDataHD_1(imagedata, dx, dy) native;
 @JSName('webkitPutImageDataHD')
 @DomName('CanvasRenderingContext2D.webkitPutImageDataHD')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 void _putImageDataHD_2(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) native;


 /**
  * Sets the color used inside shapes.
  * [r], [g], [b] are 0-255, [a] is 0-1.
  */
 void setFillColorRgb(int r, int g, int b, [num a = 1]) {
   this.fillStyle = 'rgba($r, $g, $b, $a)';
 }

 /**
  * Sets the color used inside shapes.
  * [h] is in degrees, 0-360.
  * [s], [l] are in percent, 0-100.
  * [a] is 0-1.
  */
 void setFillColorHsl(int h, num s, num l, [num a = 1]) {
   this.fillStyle = 'hsla($h, $s%, $l%, $a)';
 }

 /**
  * Sets the color used for stroking shapes.
  * [r], [g], [b] are 0-255, [a] is 0-1.
  */
 void setStrokeColorRgb(int r, int g, int b, [num a = 1]) {
   this.strokeStyle = 'rgba($r, $g, $b, $a)';
 }

 /**
  * Sets the color used for stroking shapes.
  * [h] is in degrees, 0-360.
  * [s], [l] are in percent, 0-100.
  * [a] is 0-1.
  */
 void setStrokeColorHsl(int h, num s, num l, [num a = 1]) {
   this.strokeStyle = 'hsla($h, $s%, $l%, $a)';
 }

 @DomName('CanvasRenderingContext2D.arc')
 void arc(num x,  num y,  num radius,  num startAngle, num endAngle,
     [bool anticlockwise = false]) {
   $dom_arc(x, y, radius, startAngle, endAngle, anticlockwise);
 }

 /**
  * Draws an image from a CanvasImageSource to an area of this canvas.
  *
  * The image will be drawn to an area of this canvas defined by
  * [destRect]. [sourceRect] defines the region of the source image that is
  * drawn.
  * If [sourceRect] is not provided, then
  * the entire rectangular image from [source] will be drawn to this context.
  *
  * If the image is larger than canvas
  * will allow, the image will be clipped to fit the available space.
  *
  *     CanvasElement canvas = new CanvasElement(width: 600, height: 600);
  *     CanvasRenderingContext2D ctx = canvas.context2D;
  *     ImageElement img = document.query('img');
  *     img.width = 100;
  *     img.height = 100;
  *
  *     // Scale the image to 20x20.
  *     ctx.drawImageToRect(img, new Rect(50, 50, 20, 20));
  *
  *     VideoElement video = document.query('video');
  *     video.width = 100;
  *     video.height = 100;
  *     // Take the middle 20x20 pixels from the video and stretch them.
  *     ctx.drawImageToRect(video, new Rect(50, 50, 100, 100),
  *         sourceRect: new Rect(40, 40, 20, 20));
  *
  *     // Draw the top 100x20 pixels from the otherCanvas.
  *     CanvasElement otherCanvas = document.query('canvas');
  *     ctx.drawImageToRect(otherCanvas, new Rect(0, 0, 100, 20),
  *         sourceRect: new Rect(0, 0, 100, 20));
  *
  * See also:
  *
  *   * [CanvasImageSource] for more information on what data is retrieved
  * from [source].
  *   * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage)
  * from the WHATWG.
  */
 @DomName('CanvasRenderingContext2D.drawImage')
 void drawImageToRect(CanvasImageSource source, Rect destRect,
     {Rect sourceRect}) {
   if (sourceRect == null) {
     drawImageScaled(source,
         destRect.left,
         destRect.top,
         destRect.width,
         destRect.height);
   } else {
     drawImageScaledFromSource(source,
         sourceRect.left,
         sourceRect.top,
         sourceRect.width,
         sourceRect.height,
         destRect.left,
         destRect.top,
         destRect.width,
         destRect.height);
   }
 }

 /**
  * Draws an image from a CanvasImageSource to this canvas.
  *
  * The entire image from [source] will be drawn to this context with its top
  * left corner at the point ([destX], [destY]). If the image is
  * larger than canvas will allow, the image will be clipped to fit the
  * available space.
  *
  *     CanvasElement canvas = new CanvasElement(width: 600, height: 600);
  *     CanvasRenderingContext2D ctx = canvas.context2D;
  *     ImageElement img = document.query('img');
  *
  *     ctx.drawImage(img, 100, 100);
  *
  *     VideoElement video = document.query('video');
  *     ctx.drawImage(video, 0, 0);
  *
  *     CanvasElement otherCanvas = document.query('canvas');
  *     otherCanvas.width = 100;
  *     otherCanvas.height = 100;
  *     ctx.drawImage(otherCanvas, 590, 590); // will get clipped
  *
  * See also:
  *
  *   * [CanvasImageSource] for more information on what data is retrieved
  * from [source].
  *   * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage)
  * from the WHATWG.
  */
 @DomName('CanvasRenderingContext2D.drawImage')
 @JSName('drawImage')
 void drawImage(CanvasImageSource source, num destX, num destY) native;

 /**
  * Draws an image from a CanvasImageSource to an area of this canvas.
  *
  * The image will be drawn to this context with its top left corner at the
  * point ([destX], [destY]) and will be scaled to be [destWidth] wide and
  * [destHeight] tall.
  *
  * If the image is larger than canvas
  * will allow, the image will be clipped to fit the available space.
  *
  *     CanvasElement canvas = new CanvasElement(width: 600, height: 600);
  *     CanvasRenderingContext2D ctx = canvas.context2D;
  *     ImageElement img = document.query('img');
  *     img.width = 100;
  *     img.height = 100;
  *
  *     // Scale the image to 300x50 at the point (20, 20)
  *     ctx.drawImageScaled(img, 20, 20, 300, 50);
  *
  * See also:
  *
  *   * [CanvasImageSource] for more information on what data is retrieved
  * from [source].
  *   * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage)
  * from the WHATWG.
  */
 @DomName('CanvasRenderingContext2D.drawImage')
 @JSName('drawImage')
 void drawImageScaled(CanvasImageSource source,
     num destX, num destY, num destWidth, num destHeight) native;

 /**
  * Draws an image from a CanvasImageSource to an area of this canvas.
  *
  * The image is a region of [source] that is [sourceWidth] wide and
  * [destHeight] tall with top left corner at ([sourceX], [sourceY]).
  * The image will be drawn to this context with its top left corner at the
  * point ([destX], [destY]) and will be scaled to be [destWidth] wide and
  * [destHeight] tall.
  *
  * If the image is larger than canvas
  * will allow, the image will be clipped to fit the available space.
  *
  *     VideoElement video = document.query('video');
  *     video.width = 100;
  *     video.height = 100;
  *     // Take the middle 20x20 pixels from the video and stretch them.
  *     ctx.drawImageScaledFromSource(video, 40, 40, 20, 20, 50, 50, 100, 100);
  *
  *     // Draw the top 100x20 pixels from the otherCanvas to this one.
  *     CanvasElement otherCanvas = document.query('canvas');
  *     ctx.drawImageScaledFromSource(otherCanvas, 0, 0, 100, 20, 0, 0, 100, 20);
  *
  * See also:
  *
  *   * [CanvasImageSource] for more information on what data is retrieved
  * from [source].
  *   * [drawImage](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage)
  * from the WHATWG.
  */
 @DomName('CanvasRenderingContext2D.drawImage')
 @JSName('drawImage')
 void drawImageScaledFromSource(CanvasImageSource source,
     num sourceX, num sourceY, num sourceWidth, num sourceHeight,
     num destX, num destY, num destWidth, num destHeight) native;

 @DomName('CanvasRenderingContext2D.lineDashOffset')
 num get lineDashOffset => JS('num',
     '#.lineDashOffset || #.webkitLineDashOffset', this, this);

 @DomName('CanvasRenderingContext2D.lineDashOffset')
 void set lineDashOffset(num value) => JS('void', 
     'typeof #.lineDashOffset != "undefined" ? #.lineDashOffset = # : '
     '#.webkitLineDashOffset = #', this, this, value, this, value);
}