@nativescript/canvas 0.9.22-v6 → 1.0.0-alpha.10

package/Canvas2D/CanvasRenderingContext2D/index.ios.js

@@ -1,22 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var common_1 = require("./common");
-var CanvasGradient_1 = require("../CanvasGradient");
-var Path2D_1 = require("../Path2D");
-var ImageData_1 = require("../ImageData");
-var TextMetrics_1 = require("../TextMetrics");
-var core_1 = require("@nativescript/core");
-var ImageAsset_1 = require("../../ImageAsset");
-var CanvasPattern_1 = require("../CanvasPattern");
-var Canvas_1 = require("../../Canvas");
-var CanvasRenderingContext2D = /** @class */ (function (_super) {
-    __extends(CanvasRenderingContext2D, _super);
-    function CanvasRenderingContext2D(context) {
-        var _this = _super.call(this) || this;
-        _this.context = context;
-        return _this;
-    }
-    CanvasRenderingContext2D.prototype._fillRuleFromString = function (string) {
+import { CanvasRenderingContext2DBase } from './common';
+import { CanvasGradient } from '../CanvasGradient';
+import { Path2D } from '../Path2D';
+import { ImageData } from '../ImageData';
+import { TextMetrics } from '../TextMetrics';
+import { ImageSource } from '@nativescript/core';
+import { ImageAsset } from '../../ImageAsset';
+import { CanvasPattern } from '../CanvasPattern';
+import { Canvas } from '../../Canvas';
+export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
+    constructor(context) {
+        super();
+        this.context = context;
+    }
+    _fillRuleFromString(string) {
         if (string === 'evenodd') {
             return TNSFillRule.EvenOdd;
         }
@@ -24,666 +20,579 @@ var CanvasRenderingContext2D = /** @class */ (function (_super) {
             return TNSFillRule.NonZero;
         }
         return null;
-    };
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "native", {
-        get: function () {
-            return this.context;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "canvas", {
-        get: function () {
-            return this._canvas;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "direction", {
-        get: function () {
-            this.log('direction');
-            return this.context.getDirection() === TNSTextDirection.Ltr ? "ltr" : "rtl";
-        },
-        set: function (value) {
-            this.log('direction value:', value);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                this.context.setDirection(value === "rtl" ? TNSTextDirection.Rtl : TNSTextDirection.Ltr);
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "font", {
-        get: function () {
-            this.log('get font');
-            return this.context.font;
-        },
-        set: function (value) {
-            this.log('set font value:', value);
-            if (this.context) {
-                this.context.font = value;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "shadowColor", {
-        get: function () {
-            this.log('get shadowColor');
-            return this.context.shadowColor;
-        },
-        set: function (color) {
-            this.log('set shadowColor', color);
-            this._ensureLayoutBeforeDraw();
-            if (this.context && typeof color === 'string') {
-                this.context.shadowColor = color;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "globalAlpha", {
-        get: function () {
-            this.log('get globalAlpha');
-            return this.context.globalAlpha;
-        },
-        set: function (alpha) {
-            this.log('set globalAlpha', alpha);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                this.context.globalAlpha = alpha;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "imageSmoothingEnabled", {
-        get: function () {
-            this.log('get imageSmoothingEnabled');
-            return this.context.imageSmoothingEnabled;
-        },
-        set: function (enabled) {
-            this.log('set imageSmoothingEnabled', enabled);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                this.context.imageSmoothingEnabled = enabled;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "imageSmoothingQuality", {
-        get: function () {
-            this.log('get imageSmoothingQuality');
-            switch (this.context.imageSmoothingQuality) {
-                case 2 /* High */:
-                    return 'high';
-                case 1 /* Medium */:
-                    return 'medium';
-                default:
-                    return 'low';
-            }
-        },
-        set: function (quality) {
-            this.log('set imageSmoothingQuality', quality);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                switch (quality) {
-                    case 'high':
-                        this.context.imageSmoothingQuality = 2 /* High */;
-                        break;
-                    case 'medium':
-                        this.context.imageSmoothingQuality = 1 /* Medium */;
-                        break;
-                    case 'low':
-                        this.context.imageSmoothingQuality = 0 /* Low */;
-                        break;
-                }
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "lineDashOffset", {
-        get: function () {
-            this.log('get lineDashOffset');
-            return this.context.lineDashOffset;
-        },
-        set: function (offset) {
-            this.log('set lineDashOffset', offset);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                this.context.lineDashOffset = offset;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "lineJoin", {
-        get: function () {
-            this.log('get lineJoin');
-            switch (this.context.lineJoin) {
-                case 1 /* Bevel */:
-                    return 'bevel';
-                case 0 /* Round */:
-                    return 'round';
-                default:
-                    return 'miter';
-            }
-        },
-        set: function (join) {
-            this.log('set lineJoin', join);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                switch (join) {
-                    case 'bevel':
-                        this.context.lineJoin = 1 /* Bevel */;
-                        break;
-                    case 'round':
-                        this.context.lineJoin = 0 /* Round */;
-                        break;
-                    case 'miter':
-                        this.context.lineJoin = 2 /* Miter */;
-                        break;
-                }
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "lineCap", {
-        get: function () {
-            this.log('get lineCap');
-            switch (this.context.lineCap) {
-                case 1 /* Round */:
-                    return 'round';
-                case 2 /* Square */:
-                    return 'square';
-                default:
-                    return 'butt';
-            }
-        },
-        set: function (cap) {
-            this.log('set lineCap', cap);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                switch (cap) {
-                    case 'round':
-                        this.context.lineCap = 1 /* Round */;
-                        break;
-                    case 'square':
-                        this.context.lineCap = 2 /* Square */;
-                        break;
-                    case 'butt':
-                        this.context.lineCap = 0 /* Butt */;
-                }
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "miterLimit", {
-        get: function () {
-            this.log('get miterLimit');
-            return this.context.miterLimit;
-        },
-        set: function (limit) {
-            this.log('set miterLimit', limit);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                this.context.miterLimit = limit;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "shadowBlur", {
-        get: function () {
-            this.log('get shadowBlur');
-            return this.context.shadowBlur;
-        },
-        set: function (blur) {
-            this.log('set shadowBlur', blur);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                this.context.shadowBlur = blur;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "shadowOffsetX", {
-        get: function () {
-            this.log('get shadowOffsetX');
-            return this.context.shadowOffsetX;
-        },
-        set: function (x) {
-            this.log('set shadowOffsetX', x);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                this.context.shadowOffsetX = x;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "shadowOffsetY", {
-        get: function () {
-            this.log('get shadowOffsetY');
-            return this.context.shadowOffsetY;
-        },
-        set: function (y) {
-            this.log('set shadowOffsetY', y);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                this.context.shadowOffsetY = y;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "textAlign", {
-        get: function () {
-            this.log('get textAlign');
-            switch (this.context.textAlign) {
-                case 0 /* Start */:
-                    return 'start';
-                case 2 /* Center */:
-                    return 'center';
-                case 4 /* End */:
-                    return 'end';
-                case 3 /* Right */:
-                    return 'right';
-                default:
-                    return 'left';
-            }
-        },
-        set: function (alignment) {
-            this.log('set textAlign', alignment);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                switch (alignment) {
-                    case 'start':
-                        this.context.textAlign = 0 /* Start */;
-                        break;
-                    case 'center':
-                        this.context.textAlign = 2 /* Center */;
-                        break;
-                    case 'end':
-                        this.context.textAlign = 4 /* End */;
-                        break;
-                    case 'right':
-                        this.context.textAlign = 3 /* Right */;
-                        break;
-                    case 'left':
-                        this.context.textAlign = 1 /* Left */;
-                        break;
-                }
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "globalCompositeOperation", {
-        get: function () {
-            this.log('get globalCompositeOperation');
-            switch (this.context.globalCompositeOperation) {
-                case 0 /* SourceOver */:
-                    return 'source-over';
-                case 1 /* SourceIn */:
-                    return 'source-in';
-                case 2 /* SourceOut */:
-                    return 'source-out';
-                case 3 /* SourceAtop */:
-                    return 'source-atop';
-                case 4 /* DestinationOver */:
-                    return 'destination-over';
-                case 5 /* DestinationIn */:
-                    return 'destination-in';
-                case 6 /* DestinationOut */:
-                    return 'destination-out';
-                case 7 /* DestinationAtop */:
-                    return 'destination-atop';
-                case 8 /* Lighter */:
-                    return 'lighter';
-                case 9 /* Copy */:
-                    return 'copy';
-                case 10 /* Xor */:
-                    return 'xor';
-                case 11 /* Multiply */:
-                    return 'multiply';
-                case 12 /* Screen */:
-                    return 'screen';
-                case 13 /* Overlay */:
-                    return 'overlay';
-                case 14 /* Darken */:
-                    return 'darken';
-                case 15 /* Lighten */:
-                    return 'lighten';
-                case 16 /* ColorDodge */:
-                    return 'color-dodge';
-                case 17 /* ColorBurn */:
-                    return 'color-burn';
-                case 18 /* HardLight */:
-                    return 'hard-light';
-                case 19 /* SoftLight */:
-                    return 'soft-light';
-                case 20 /* Difference */:
-                    return 'difference';
-                case 21 /* Exclusion */:
-                    return 'exclusion';
-                case 22 /* Hue */:
-                    return 'hue';
-                case 23 /* Saturation */:
-                    return 'saturation';
-                case 24 /* Color */:
-                    return 'color';
-                case 25 /* Luminosity */:
-                    return 'luminosity';
-            }
-        },
-        set: function (composite) {
-            this.log('set globalCompositeOperation', composite);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                switch (composite.toLowerCase()) {
-                    case 'source-over':
-                        this.context.globalCompositeOperation = 0 /* SourceOver */;
-                        break;
-                    case 'source-in':
-                        this.context.globalCompositeOperation = 1 /* SourceIn */;
-                        break;
-                    case 'source-out':
-                        this.context.globalCompositeOperation = 2 /* SourceOut */;
-                        break;
-                    case 'source-atop':
-                        this.context.globalCompositeOperation = 3 /* SourceAtop */;
-                        break;
-                    case 'destination-over':
-                        this.context.globalCompositeOperation = 4 /* DestinationOver */;
-                        break;
-                    case 'destination-in':
-                        this.context.globalCompositeOperation = 5 /* DestinationIn */;
-                        break;
-                    case 'destination-out':
-                        this.context.globalCompositeOperation = 6 /* DestinationOut */;
-                        break;
-                    case 'destination-atop':
-                        this.context.globalCompositeOperation = 7 /* DestinationAtop */;
-                        break;
-                    case 'lighter':
-                        this.context.globalCompositeOperation = 8 /* Lighter */;
-                        break;
-                    case 'copy':
-                        this.context.globalCompositeOperation = 9 /* Copy */;
-                        break;
-                    case 'xor':
-                        this.context.globalCompositeOperation = 10 /* Xor */;
-                        break;
-                    case 'multiply':
-                        this.context.globalCompositeOperation = 11 /* Multiply */;
-                        break;
-                    case 'screen':
-                        this.context.globalCompositeOperation = 12 /* Screen */;
-                        break;
-                    case 'overlay':
-                        this.context.globalCompositeOperation = 13 /* Overlay */;
-                        break;
-                    case 'darken':
-                        this.context.globalCompositeOperation = 14 /* Darken */;
-                        break;
-                    case 'lighten':
-                        this.context.globalCompositeOperation = 15 /* Lighten */;
-                        break;
-                    case 'color-dodge':
-                        this.context.globalCompositeOperation = 16 /* ColorDodge */;
-                        break;
-                    case 'color-burn':
-                        this.context.globalCompositeOperation = 17 /* ColorBurn */;
-                        break;
-                    case 'hard-light':
-                        this.context.globalCompositeOperation = 18 /* HardLight */;
-                        break;
-                    case 'soft-light':
-                        this.context.globalCompositeOperation = 19 /* SoftLight */;
-                        break;
-                    case 'difference':
-                        this.context.globalCompositeOperation = 20 /* Difference */;
-                        break;
-                    case 'exclusion':
-                        this.context.globalCompositeOperation = 21 /* Exclusion */;
-                        break;
-                    case 'hue':
-                        this.context.globalCompositeOperation = 22 /* Hue */;
-                        break;
-                    case 'saturation':
-                        this.context.globalCompositeOperation = 23 /* Saturation */;
-                        break;
-                    case 'color':
-                        this.context.globalCompositeOperation = 24 /* Color */;
-                        break;
-                    case 'luminosity':
-                        this.context.globalCompositeOperation = 25 /* Luminosity */;
-                        break;
-                }
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "filter", {
-        get: function () {
-            this.log('get filter');
-            return this.context.filter;
-        },
-        set: function (value) {
-            this.log('set filter', value);
-            if (this.context) {
-                this.context.filter = value;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "fillStyle", {
-        get: function () {
-            this.log('get fillStyle');
-            switch (this.context.fillStyle.getStyleType()) {
-                case 0 /* Color */:
-                    var color = this.context.fillStyle;
-                    return color.color;
-                case 1 /* Gradient */:
-                    return CanvasGradient_1.CanvasGradient.fromNative(this.context.fillStyle);
-                case 2 /* Pattern */:
-                    return new CanvasPattern_1.CanvasPattern(this.context.fillStyle);
-            }
-        },
-        set: function (color) {
-            this.log('set fillStyle', color);
-            if (color === undefined || color === null) {
-                return;
-            }
-            this._ensureLayoutBeforeDraw();
-            if (typeof color === 'string') {
-                this.context.fillStyle = TNSColor.alloc().init(color);
-            }
-            else if (color instanceof CanvasGradient_1.CanvasGradient) {
-                this.context.fillStyle = color.native;
-            }
-            else if (color instanceof CanvasPattern_1.CanvasPattern) {
-                this.context.fillStyle = color.native;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "strokeStyle", {
-        get: function () {
-            this.log('get strokeStyle');
-            switch (this.context.strokeStyle.getStyleType()) {
-                case 0 /* Color */:
-                    var color = this.context.strokeStyle;
-                    return color.color;
-                case 1 /* Gradient */:
-                    return CanvasGradient_1.CanvasGradient.fromNative(this.context.strokeStyle);
-                case 2 /* Pattern */:
-                    return new CanvasPattern_1.CanvasPattern(this.context.strokeStyle);
-            }
-        },
-        set: function (color) {
-            this.log('set strokeStyle', color);
-            if (color === undefined || color === null) {
-                return;
+    }
+    get native() {
+        return this.context;
+    }
+    get canvas() {
+        return this._canvas;
+    }
+    get direction() {
+        this.log('direction');
+        return this.context.getDirection() === 0 /* Ltr */ ? "ltr" : "rtl";
+    }
+    set direction(value) {
+        this.log('direction value:', value);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            this.context.setDirection(value === "rtl" ? 1 /* Rtl */ : 0 /* Ltr */);
+        }
+    }
+    get font() {
+        this.log('get font');
+        return this.context.font;
+    }
+    set font(value) {
+        this.log('set font value:', value);
+        if (this.context) {
+            this.context.font = value;
+        }
+    }
+    get shadowColor() {
+        this.log('get shadowColor');
+        return this.context.shadowColor;
+    }
+    set shadowColor(color) {
+        this.log('set shadowColor', color);
+        this._ensureLayoutBeforeDraw();
+        if (this.context && typeof color === 'string') {
+            this.context.shadowColor = color;
+        }
+    }
+    get globalAlpha() {
+        this.log('get globalAlpha');
+        return this.context.globalAlpha;
+    }
+    set globalAlpha(alpha) {
+        this.log('set globalAlpha', alpha);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            this.context.globalAlpha = alpha;
+        }
+    }
+    get imageSmoothingEnabled() {
+        this.log('get imageSmoothingEnabled');
+        return this.context.imageSmoothingEnabled;
+    }
+    set imageSmoothingEnabled(enabled) {
+        this.log('set imageSmoothingEnabled', enabled);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            this.context.imageSmoothingEnabled = enabled;
+        }
+    }
+    get imageSmoothingQuality() {
+        this.log('get imageSmoothingQuality');
+        switch (this.context.imageSmoothingQuality) {
+            case 2 /* High */:
+                return 'high';
+            case 1 /* Medium */:
+                return 'medium';
+            default:
+                return 'low';
+        }
+    }
+    set imageSmoothingQuality(quality) {
+        this.log('set imageSmoothingQuality', quality);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            switch (quality) {
+                case 'high':
+                    this.context.imageSmoothingQuality = 2 /* High */;
+                    break;
+                case 'medium':
+                    this.context.imageSmoothingQuality = 1 /* Medium */;
+                    break;
+                case 'low':
+                    this.context.imageSmoothingQuality = 0 /* Low */;
+                    break;
             }
-            this._ensureLayoutBeforeDraw();
-            if (typeof color === 'string') {
-                this.context.strokeStyle = TNSColor.alloc().init(color);
+        }
+    }
+    get lineDashOffset() {
+        this.log('get lineDashOffset');
+        return this.context.lineDashOffset;
+    }
+    set lineDashOffset(offset) {
+        this.log('set lineDashOffset', offset);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            this.context.lineDashOffset = offset;
+        }
+    }
+    get lineJoin() {
+        this.log('get lineJoin');
+        switch (this.context.lineJoin) {
+            case 1 /* Bevel */:
+                return 'bevel';
+            case 0 /* Round */:
+                return 'round';
+            default:
+                return 'miter';
+        }
+    }
+    set lineJoin(join) {
+        this.log('set lineJoin', join);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            switch (join) {
+                case 'bevel':
+                    this.context.lineJoin = 1 /* Bevel */;
+                    break;
+                case 'round':
+                    this.context.lineJoin = 0 /* Round */;
+                    break;
+                case 'miter':
+                    this.context.lineJoin = 2 /* Miter */;
+                    break;
             }
-            else if (color instanceof CanvasGradient_1.CanvasGradient) {
-                this.context.strokeStyle = color.native;
+        }
+    }
+    get lineCap() {
+        this.log('get lineCap');
+        switch (this.context.lineCap) {
+            case 1 /* Round */:
+                return 'round';
+            case 2 /* Square */:
+                return 'square';
+            default:
+                return 'butt';
+        }
+    }
+    set lineCap(cap) {
+        this.log('set lineCap', cap);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            switch (cap) {
+                case 'round':
+                    this.context.lineCap = 1 /* Round */;
+                    break;
+                case 'square':
+                    this.context.lineCap = 2 /* Square */;
+                    break;
+                case 'butt':
+                    this.context.lineCap = 0 /* Butt */;
             }
-            else if (color instanceof CanvasPattern_1.CanvasPattern) {
-                this.context.strokeStyle = color.native;
+        }
+    }
+    get miterLimit() {
+        this.log('get miterLimit');
+        return this.context.miterLimit;
+    }
+    set miterLimit(limit) {
+        this.log('set miterLimit', limit);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            this.context.miterLimit = limit;
+        }
+    }
+    get shadowBlur() {
+        this.log('get shadowBlur');
+        return this.context.shadowBlur;
+    }
+    set shadowBlur(blur) {
+        this.log('set shadowBlur', blur);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            this.context.shadowBlur = blur;
+        }
+    }
+    get shadowOffsetX() {
+        this.log('get shadowOffsetX');
+        return this.context.shadowOffsetX;
+    }
+    set shadowOffsetX(x) {
+        this.log('set shadowOffsetX', x);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            this.context.shadowOffsetX = x;
+        }
+    }
+    get shadowOffsetY() {
+        this.log('get shadowOffsetY');
+        return this.context.shadowOffsetY;
+    }
+    set shadowOffsetY(y) {
+        this.log('set shadowOffsetY', y);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            this.context.shadowOffsetY = y;
+        }
+    }
+    get textAlign() {
+        this.log('get textAlign');
+        switch (this.context.textAlign) {
+            case 0 /* Start */:
+                return 'start';
+            case 2 /* Center */:
+                return 'center';
+            case 4 /* End */:
+                return 'end';
+            case 3 /* Right */:
+                return 'right';
+            default:
+                return 'left';
+        }
+    }
+    set textAlign(alignment) {
+        this.log('set textAlign', alignment);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            switch (alignment) {
+                case 'start':
+                    this.context.textAlign = 0 /* Start */;
+                    break;
+                case 'center':
+                    this.context.textAlign = 2 /* Center */;
+                    break;
+                case 'end':
+                    this.context.textAlign = 4 /* End */;
+                    break;
+                case 'right':
+                    this.context.textAlign = 3 /* Right */;
+                    break;
+                case 'left':
+                    this.context.textAlign = 1 /* Left */;
+                    break;
             }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CanvasRenderingContext2D.prototype, "lineWidth", {
-        get: function () {
-            this.log('get lineWidth');
-            return this.context.lineWidth;
-        },
-        set: function (width) {
-            this.log('set lineWidth', width);
-            this._ensureLayoutBeforeDraw();
-            if (this.context) {
-                this.context.lineWidth = width;
+        }
+    }
+    get globalCompositeOperation() {
+        this.log('get globalCompositeOperation');
+        switch (this.context.globalCompositeOperation) {
+            case 0 /* SourceOver */:
+                return 'source-over';
+            case 1 /* SourceIn */:
+                return 'source-in';
+            case 2 /* SourceOut */:
+                return 'source-out';
+            case 3 /* SourceAtop */:
+                return 'source-atop';
+            case 4 /* DestinationOver */:
+                return 'destination-over';
+            case 5 /* DestinationIn */:
+                return 'destination-in';
+            case 6 /* DestinationOut */:
+                return 'destination-out';
+            case 7 /* DestinationAtop */:
+                return 'destination-atop';
+            case 8 /* Lighter */:
+                return 'lighter';
+            case 9 /* Copy */:
+                return 'copy';
+            case 10 /* Xor */:
+                return 'xor';
+            case 11 /* Multiply */:
+                return 'multiply';
+            case 12 /* Screen */:
+                return 'screen';
+            case 13 /* Overlay */:
+                return 'overlay';
+            case 14 /* Darken */:
+                return 'darken';
+            case 15 /* Lighten */:
+                return 'lighten';
+            case 16 /* ColorDodge */:
+                return 'color-dodge';
+            case 17 /* ColorBurn */:
+                return 'color-burn';
+            case 18 /* HardLight */:
+                return 'hard-light';
+            case 19 /* SoftLight */:
+                return 'soft-light';
+            case 20 /* Difference */:
+                return 'difference';
+            case 21 /* Exclusion */:
+                return 'exclusion';
+            case 22 /* Hue */:
+                return 'hue';
+            case 23 /* Saturation */:
+                return 'saturation';
+            case 24 /* Color */:
+                return 'color';
+            case 25 /* Luminosity */:
+                return 'luminosity';
+        }
+    }
+    set globalCompositeOperation(composite) {
+        this.log('set globalCompositeOperation', composite);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            switch (composite.toLowerCase()) {
+                case 'source-over':
+                    this.context.globalCompositeOperation = 0 /* SourceOver */;
+                    break;
+                case 'source-in':
+                    this.context.globalCompositeOperation = 1 /* SourceIn */;
+                    break;
+                case 'source-out':
+                    this.context.globalCompositeOperation = 2 /* SourceOut */;
+                    break;
+                case 'source-atop':
+                    this.context.globalCompositeOperation = 3 /* SourceAtop */;
+                    break;
+                case 'destination-over':
+                    this.context.globalCompositeOperation = 4 /* DestinationOver */;
+                    break;
+                case 'destination-in':
+                    this.context.globalCompositeOperation = 5 /* DestinationIn */;
+                    break;
+                case 'destination-out':
+                    this.context.globalCompositeOperation = 6 /* DestinationOut */;
+                    break;
+                case 'destination-atop':
+                    this.context.globalCompositeOperation = 7 /* DestinationAtop */;
+                    break;
+                case 'lighter':
+                    this.context.globalCompositeOperation = 8 /* Lighter */;
+                    break;
+                case 'copy':
+                    this.context.globalCompositeOperation = 9 /* Copy */;
+                    break;
+                case 'xor':
+                    this.context.globalCompositeOperation = 10 /* Xor */;
+                    break;
+                case 'multiply':
+                    this.context.globalCompositeOperation = 11 /* Multiply */;
+                    break;
+                case 'screen':
+                    this.context.globalCompositeOperation = 12 /* Screen */;
+                    break;
+                case 'overlay':
+                    this.context.globalCompositeOperation = 13 /* Overlay */;
+                    break;
+                case 'darken':
+                    this.context.globalCompositeOperation = 14 /* Darken */;
+                    break;
+                case 'lighten':
+                    this.context.globalCompositeOperation = 15 /* Lighten */;
+                    break;
+                case 'color-dodge':
+                    this.context.globalCompositeOperation = 16 /* ColorDodge */;
+                    break;
+                case 'color-burn':
+                    this.context.globalCompositeOperation = 17 /* ColorBurn */;
+                    break;
+                case 'hard-light':
+                    this.context.globalCompositeOperation = 18 /* HardLight */;
+                    break;
+                case 'soft-light':
+                    this.context.globalCompositeOperation = 19 /* SoftLight */;
+                    break;
+                case 'difference':
+                    this.context.globalCompositeOperation = 20 /* Difference */;
+                    break;
+                case 'exclusion':
+                    this.context.globalCompositeOperation = 21 /* Exclusion */;
+                    break;
+                case 'hue':
+                    this.context.globalCompositeOperation = 22 /* Hue */;
+                    break;
+                case 'saturation':
+                    this.context.globalCompositeOperation = 23 /* Saturation */;
+                    break;
+                case 'color':
+                    this.context.globalCompositeOperation = 24 /* Color */;
+                    break;
+                case 'luminosity':
+                    this.context.globalCompositeOperation = 25 /* Luminosity */;
+                    break;
             }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    CanvasRenderingContext2D.prototype.addHitRegion = function (region) {
-    };
-    CanvasRenderingContext2D.prototype.arc = function (x, y, radius, startAngle, endAngle, anticlockwise) {
-        if (anticlockwise === void 0) { anticlockwise = false; }
+        }
+    }
+    get filter() {
+        this.log('get filter');
+        return this.context.filter;
+    }
+    set filter(value) {
+        this.log('set filter', value);
+        if (this.context) {
+            this.context.filter = value;
+        }
+    }
+    get fillStyle() {
+        this.log('get fillStyle');
+        switch (this.context.fillStyle.getStyleType()) {
+            case 0 /* Color */:
+                const color = this.context.fillStyle;
+                return color.color;
+            case 1 /* Gradient */:
+                return CanvasGradient.fromNative(this.context.fillStyle);
+            case 2 /* Pattern */:
+                return new CanvasPattern(this.context.fillStyle);
+        }
+    }
+    set fillStyle(color) {
+        this.log('set fillStyle', color);
+        if (color === undefined || color === null) {
+            return;
+        }
+        this._ensureLayoutBeforeDraw();
+        if (typeof color === 'string') {
+            this.context.fillStyle = TNSColor.alloc().init(color);
+        }
+        else if (color instanceof CanvasGradient) {
+            this.context.fillStyle = color.native;
+        }
+        else if (color instanceof CanvasPattern) {
+            this.context.fillStyle = color.native;
+        }
+    }
+    get strokeStyle() {
+        this.log('get strokeStyle');
+        switch (this.context.strokeStyle.getStyleType()) {
+            case 0 /* Color */:
+                const color = this.context.strokeStyle;
+                return color.color;
+            case 1 /* Gradient */:
+                return CanvasGradient.fromNative(this.context.strokeStyle);
+            case 2 /* Pattern */:
+                return new CanvasPattern(this.context.strokeStyle);
+        }
+    }
+    set strokeStyle(color) {
+        this.log('set strokeStyle', color);
+        if (color === undefined || color === null) {
+            return;
+        }
+        this._ensureLayoutBeforeDraw();
+        if (typeof color === 'string') {
+            this.context.strokeStyle = TNSColor.alloc().init(color);
+        }
+        else if (color instanceof CanvasGradient) {
+            this.context.strokeStyle = color.native;
+        }
+        else if (color instanceof CanvasPattern) {
+            this.context.strokeStyle = color.native;
+        }
+    }
+    get lineWidth() {
+        this.log('get lineWidth');
+        return this.context.lineWidth;
+    }
+    set lineWidth(width) {
+        this.log('set lineWidth', width);
+        this._ensureLayoutBeforeDraw();
+        if (this.context) {
+            this.context.lineWidth = width;
+        }
+    }
+    addHitRegion(region) {
+    }
+    arc(x, y, radius, startAngle, endAngle, anticlockwise = false) {
         this.log('arc', x, y, radius, startAngle, anticlockwise);
         this._ensureLayoutBeforeDraw();
         this.context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-    };
-    CanvasRenderingContext2D.prototype.arcTo = function (x1, y1, x2, y2, radius) {
+    }
+    arcTo(x1, y1, x2, y2, radius) {
         this.log('arcTo', x1, y1, x2, y2, radius);
         this._ensureLayoutBeforeDraw();
         this.context.arcTo(x1, y1, x2, y2, radius);
-    };
-    CanvasRenderingContext2D.prototype.beginPath = function () {
+    }
+    beginPath() {
         this.log('beginPath');
         this._ensureLayoutBeforeDraw();
         this.context.beginPath();
-    };
-    CanvasRenderingContext2D.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
+    }
+    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
         this.log('bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y);
         this._ensureLayoutBeforeDraw();
         this.context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-    };
-    CanvasRenderingContext2D.prototype.clearHitRegions = function () {
-    };
-    CanvasRenderingContext2D.prototype.clearRect = function (x, y, width, height) {
+    }
+    clearHitRegions() {
+    }
+    clearRect(x, y, width, height) {
         this.log('clearRect', x, y, width, height);
         this._ensureLayoutBeforeDraw();
         this.context.clearRect(x, y, width, height);
-    };
-    CanvasRenderingContext2D.prototype.clip = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        this.log.apply(this, ['clip'].concat(args));
+    }
+    clip(...args) {
+        this.log('clip', ...args);
         this._ensureLayoutBeforeDraw();
         if (typeof args[0] === 'string') {
             // browser throws for invalid enum
-            var rule = this._fillRuleFromString(args[0]);
-            console.log(rule);
+            const rule = this._fillRuleFromString(args[0]);
             this.context.clip(rule);
         }
-        else if (args[0] instanceof Path2D_1.Path2D && typeof args[1] === 'string') {
-            var rule = this._fillRuleFromString(args[1]);
+        else if (args[0] instanceof Path2D && typeof args[1] === 'string') {
+            const rule = this._fillRuleFromString(args[1]);
             this.context.clip(args[0].native, rule);
         }
-        else if (args[0] instanceof Path2D_1.Path2D) {
+        else if (args[0] instanceof Path2D) {
             this.context.clip(args[0].native);
         }
         else {
             this.context.clip();
         }
-    };
-    CanvasRenderingContext2D.prototype.closePath = function () {
+    }
+    closePath() {
         this.log('closePath');
         this._ensureLayoutBeforeDraw();
         this.context.closePath();
-    };
-    CanvasRenderingContext2D.prototype.createImageData = function (width, height) {
+    }
+    createImageData(width, height) {
         this.log('createImageData', width, height);
-        if (width instanceof ImageData_1.ImageData) {
-            return ImageData_1.ImageData.fromNative(this.context.createImageData(width.native));
+        if (width instanceof ImageData) {
+            return ImageData.fromNative(this.context.createImageData(width.native));
         }
         else {
-            return ImageData_1.ImageData.fromNative(this.context.createImageData(width, height));
+            return ImageData.fromNative(this.context.createImageData(width, height));
         }
-    };
-    CanvasRenderingContext2D.prototype.createLinearGradient = function (x0, y0, x1, y1) {
+    }
+    createLinearGradient(x0, y0, x1, y1) {
         this.log('createLinearGradient', x0, y0, x1, y1);
         this._ensureLayoutBeforeDraw();
-        return CanvasGradient_1.CanvasGradient.fromNative(this.context.createLinearGradient(x0, y0, x1, y1));
-    };
-    CanvasRenderingContext2D.prototype.createPattern = function (image, repetition) {
+        return CanvasGradient.fromNative(this.context.createLinearGradient(x0, y0, x1, y1));
+    }
+    createPattern(image, repetition) {
         this.log('createPattern', image, repetition);
         this._ensureLayoutBeforeDraw();
         if (repetition === undefined || typeof repetition !== 'string') {
-            var e = new Error('The string did not match the expected pattern.');
+            const e = new Error('The string did not match the expected pattern.');
             e.name = 'SyntaxError';
             throw e;
         }
-        var img;
-        if (image instanceof core_1.ImageSource) {
+        let img;
+        if (image instanceof ImageSource) {
             img = image.ios;
         }
         else if (image instanceof UIImage) {
             img = image;
         }
-        else if (image instanceof ImageAsset_1.ImageAsset) {
+        else if (image instanceof ImageAsset) {
             img = image.native;
         }
-        else if (image instanceof Canvas_1.Canvas) {
+        else if (image instanceof Canvas) {
             img = image.ios;
         }
         else if (image && typeof image.tagName === 'string' && (image.tagName === 'IMG' || image.tagName === 'IMAGE')) {
-            if (image._imageSource instanceof core_1.ImageSource) {
+            if (image._imageSource instanceof ImageSource) {
                 img = image._imageSource.android;
             }
             else if (image._image instanceof UIImage) {
                 img = image._image;
             }
-            else if (image._asset instanceof ImageAsset_1.ImageAsset) {
+            else if (image._asset instanceof ImageAsset) {
                 img = image._asset.native;
             }
             else if (typeof image.src === 'string') {
-                img = core_1.ImageSource.fromFileSync(image.src).ios;
+                img = ImageSource.fromFileSync(image.src).ios;
             }
         }
         else if (image &&
             typeof image.tagName === 'string' &&
             image.tagName === 'CANVAS') {
-            if (image._canvas instanceof Canvas_1.Canvas) {
+            if (image._canvas instanceof Canvas) {
                 img = image._canvas.ios;
             }
         }
+        else if (image instanceof ImageBitmap || (image === null || image === void 0 ? void 0 : image.native) instanceof TNSImageBitmap) {
+            img = image.native;
+        }
         if (!img) {
             return null;
         }
-        var rep;
+        let rep;
         switch (repetition) {
             case 'no-repeat':
                 rep = 3 /* NoRepeat */;
@@ -699,45 +608,40 @@ var CanvasRenderingContext2D = /** @class */ (function (_super) {
                 break;
         }
         if (img instanceof TNSImageAsset) {
-            return new CanvasPattern_1.CanvasPattern(this.context.createPattern(img, rep));
+            return new CanvasPattern(this.context.createPattern(img, rep));
+        }
+        else if (img instanceof TNSImageBitmap) {
+            return new CanvasPattern(this.context.createPattern(img, rep));
         }
         else if (img instanceof UIImage) {
-            return new CanvasPattern_1.CanvasPattern(this.context.createPattern(img, rep));
+            return new CanvasPattern(this.context.createPattern(img, rep));
         }
         else if (img instanceof TNSCanvas) {
-            return new CanvasPattern_1.CanvasPattern(this.context.createPattern(img, rep));
+            return new CanvasPattern(this.context.createPattern(img, rep));
         }
         return null;
-    };
-    CanvasRenderingContext2D.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {
+    }
+    createRadialGradient(x0, y0, r0, x1, y1, r1) {
         this.log('createRadialGradient', x0, y0, r0, x1, y1, r1);
         this._ensureLayoutBeforeDraw();
-        return CanvasGradient_1.CanvasGradient.fromNative(this.context.createRadialGradient(x0, y0, r0, x1, y1, r1));
-    };
-    CanvasRenderingContext2D.prototype.drawFocusIfNeeded = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-    };
-    CanvasRenderingContext2D.prototype.drawImage = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        this.log.apply(this, ['drawImage'].concat(args));
+        return CanvasGradient.fromNative(this.context.createRadialGradient(x0, y0, r0, x1, y1, r1));
+    }
+    drawFocusIfNeeded(...args) {
+    }
+    drawImage(...args) {
+        this.log('drawImage', ...args);
         this._ensureLayoutBeforeDraw();
         if (!args) {
             return;
         }
-        var image = args[0];
-        var asset = null;
-        var width = 0;
-        var height = 0;
-        if (image instanceof core_1.ImageSource) {
+        let image = args[0];
+        let asset = null;
+        let width = 0;
+        let height = 0;
+        if (image instanceof ImageSource) {
             image = image.ios;
         }
-        else if (image instanceof ImageAsset_1.ImageAsset || image instanceof UIImage) {
+        else if (image instanceof ImageAsset || image instanceof UIImage) {
             // NOOP
         }
         else if (image &&
@@ -745,29 +649,32 @@ var CanvasRenderingContext2D = /** @class */ (function (_super) {
             (image.tagName === 'IMG' || image.tagName === 'IMAGE')) {
             width = image.width;
             height = image.height;
-            if (image._imageSource instanceof core_1.ImageSource) {
+            if (image._imageSource instanceof ImageSource) {
                 image = image._imageSource.ios;
             }
             else if (image._image instanceof UIImage) {
                 image = image._image;
             }
-            else if (image._asset instanceof ImageAsset_1.ImageAsset) {
+            else if (image._asset instanceof ImageAsset) {
                 image = image._asset;
             }
             else if (typeof image.src === 'string') {
-                image = core_1.ImageSource.fromFileSync(image.src).ios;
+                image = ImageSource.fromFileSync(image.src).ios;
             }
         }
         else if (image &&
             typeof image.tagName === 'string' &&
-            image.tagName === 'CANVAS' && image._canvas instanceof Canvas_1.Canvas) {
+            image.tagName === 'CANVAS' && image._canvas instanceof Canvas) {
             image = image._canvas;
         }
+        else if (image instanceof ImageBitmap || (image === null || image === void 0 ? void 0 : image.native) instanceof TNSImageBitmap) {
+            image = image.native;
+        }
         if (args.length === 3) {
-            if (image instanceof ImageAsset_1.ImageAsset) {
+            if (image instanceof ImageAsset) {
                 this.context.drawImage(image.native, args[1], args[2]);
             }
-            else if (image instanceof Canvas_1.Canvas) {
+            else if (image instanceof Canvas) {
                 this.context.drawImage(image.ios, args[1], args[2]);
             }
             else {
@@ -775,10 +682,10 @@ var CanvasRenderingContext2D = /** @class */ (function (_super) {
             }
         }
         else if (args.length === 5) {
-            if (image instanceof ImageAsset_1.ImageAsset) {
+            if (image instanceof ImageAsset) {
                 this.context.drawImage(image.native, args[1], args[2], args[3], args[4]);
             }
-            else if (image instanceof Canvas_1.Canvas) {
+            else if (image instanceof Canvas) {
                 this.context.drawImage(image.ios, args[1], args[2], args[3], args[4]);
             }
             else {
@@ -786,51 +693,46 @@ var CanvasRenderingContext2D = /** @class */ (function (_super) {
             }
         }
         else if (args.length === 9) {
-            if (image instanceof ImageAsset_1.ImageAsset) {
+            if (image instanceof ImageAsset) {
                 this.context.drawImage(image.native, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
             }
-            else if (image instanceof Canvas_1.Canvas) {
+            else if (image instanceof Canvas) {
                 this.context.drawImage(image.ios, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
             }
             else {
                 this.context.drawImage(image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
             }
         }
-    };
-    CanvasRenderingContext2D.prototype.ellipse = function (x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
-        if (anticlockwise === void 0) { anticlockwise = false; }
+    }
+    ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise = false) {
         this.log('ellipse', x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
         this._ensureLayoutBeforeDraw();
         this.context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
-    };
-    CanvasRenderingContext2D.prototype.fill = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        this.log.apply(this, ['fill'].concat(args));
+    }
+    fill(...args) {
+        this.log('fill', ...args);
         this._ensureLayoutBeforeDraw();
         if (typeof args[0] === 'string') {
-            var rule = this._fillRuleFromString(args[0]);
+            const rule = this._fillRuleFromString(args[0]);
             this.context.fillWithValue(rule);
         }
-        else if (args.length === 2 && args[0] instanceof Path2D_1.Path2D && typeof args[1] === 'string') {
-            var rule = this._fillRuleFromString(args[1]);
+        else if (args.length === 2 && args[0] instanceof Path2D && typeof args[1] === 'string') {
+            const rule = this._fillRuleFromString(args[1]);
             this.context.fill(args[0].native, rule);
         }
-        else if (args[0] instanceof Path2D_1.Path2D) {
+        else if (args[0] instanceof Path2D) {
             this.context.fillWithValue(args[0].native);
         }
         else {
             this.context.fill();
         }
-    };
-    CanvasRenderingContext2D.prototype.fillRect = function (x, y, width, height) {
+    }
+    fillRect(x, y, width, height) {
         this.log('fillRect', x, y, width, height);
         this._ensureLayoutBeforeDraw();
         this.context.fillRect(x, y, width, height);
-    };
-    CanvasRenderingContext2D.prototype.fillText = function (text, x, y, maxWidth) {
+    }
+    fillText(text, x, y, maxWidth) {
         this.log('fillText', text, x, y, maxWidth);
         this._ensureLayoutBeforeDraw();
         if (typeof maxWidth === 'number') {
@@ -839,23 +741,19 @@ var CanvasRenderingContext2D = /** @class */ (function (_super) {
         else {
             this.context.fillText(text, x, y);
         }
-    };
-    CanvasRenderingContext2D.prototype.getImageData = function (sx, sy, sw, sh) {
+    }
+    getImageData(sx, sy, sw, sh) {
         this.log('getImageData', sx, sy, sw, sh);
         this._ensureLayoutBeforeDraw();
-        return ImageData_1.ImageData.fromNative(this.context.getImageData(sx, sy, sw, sh));
-    };
-    CanvasRenderingContext2D.prototype.getLineDash = function () {
+        return ImageData.fromNative(this.context.getImageData(sx, sy, sw, sh));
+    }
+    getLineDash() {
         this.log('getLineDash');
         this._ensureLayoutBeforeDraw();
         return this.context.getLineDash();
-    };
-    CanvasRenderingContext2D.prototype.isPointInPath = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        this.log.apply(this, ['isPointInPath'].concat(args));
+    }
+    isPointInPath(...args) {
+        this.log('isPointInPath', ...args);
         this._ensureLayoutBeforeDraw();
         if (args.length === 2) {
             return this.context.isPointInPath(args[0], args[1]);
@@ -863,111 +761,103 @@ var CanvasRenderingContext2D = /** @class */ (function (_super) {
         else if (args.length === 3) {
             return this.context.isPointInPath(args[0], args[1], args[2]);
         }
-        else if (args.length === 4 && args[0] instanceof Path2D_1.Path2D) {
+        else if (args.length === 4 && args[0] instanceof Path2D) {
             return this.context.isPointInPath(args[0].native, args[1], args[2], args[3]);
         }
         return false;
-    };
-    CanvasRenderingContext2D.prototype.isPointInStroke = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        this.log.apply(this, ['isPointInStroke'].concat(args));
+    }
+    isPointInStroke(...args) {
+        this.log('isPointInStroke', ...args);
         this._ensureLayoutBeforeDraw();
         if (args.length === 2) {
             return this.context.isPointInStroke(args[0], args[1]);
         }
-        else if (args.length === 3 && args[0] instanceof Path2D_1.Path2D) {
+        else if (args.length === 3 && args[0] instanceof Path2D) {
             return this.context.isPointInStroke(args[0].native, args[1], args[2]);
         }
         return false;
-    };
-    CanvasRenderingContext2D.prototype.lineTo = function (x, y) {
+    }
+    lineTo(x, y) {
         this.log('lineTo', x, y);
         this._ensureLayoutBeforeDraw();
         this.context.lineTo(x, y);
-    };
-    CanvasRenderingContext2D.prototype.measureText = function (text) {
+    }
+    measureText(text) {
         this.log('measureText', text);
         this._ensureLayoutBeforeDraw();
-        return new TextMetrics_1.TextMetrics(this.context.measureText(text));
-    };
-    CanvasRenderingContext2D.prototype.moveTo = function (x, y) {
+        return new TextMetrics(this.context.measureText(text));
+    }
+    moveTo(x, y) {
         this.log('moveTo', x, y);
         this._ensureLayoutBeforeDraw();
         this.context.moveTo(x, y);
-    };
-    CanvasRenderingContext2D.prototype.putImageData = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        this.log.apply(this, ['putImageData'].concat(args));
+    }
+    putImageData(...args) {
+        this.log('putImageData', ...args);
         this._ensureLayoutBeforeDraw();
         if (!args) {
             return;
         }
-        var data = args[0];
+        let data = args[0];
         if (args.length === 3) {
             this.context.putImageData(data.native, args[1], args[2]);
         }
         else if (args.length === 7) {
             this.context.putImageData(data.native, args[1], args[2], args[3], args[4], args[5], args[6]);
         }
-    };
-    CanvasRenderingContext2D.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
+    }
+    quadraticCurveTo(cpx, cpy, x, y) {
         this.log('quadraticCurveTo', cpx, cpy, x, y);
         this._ensureLayoutBeforeDraw();
         this.context.quadraticCurveTo(cpx, cpy, x, y);
-    };
-    CanvasRenderingContext2D.prototype.rect = function (x, y, width, height) {
+    }
+    rect(x, y, width, height) {
         this.log('rect', x, y, width, height);
         this._ensureLayoutBeforeDraw();
         this.context.rect(x, y, width, height);
-    };
-    CanvasRenderingContext2D.prototype.removeHitRegion = function (id) {
-    };
-    CanvasRenderingContext2D.prototype.resetTransform = function () {
+    }
+    removeHitRegion(id) {
+    }
+    resetTransform() {
         this.log('resetTransform');
         this._ensureLayoutBeforeDraw();
         this.context.resetTransform();
-    };
-    CanvasRenderingContext2D.prototype.restore = function () {
+    }
+    restore() {
         this.log('restore');
         this._ensureLayoutBeforeDraw();
         this.context.restore();
-    };
-    CanvasRenderingContext2D.prototype.rotate = function (angle) {
+    }
+    rotate(angle) {
         this.log('rotate', angle);
         this._ensureLayoutBeforeDraw();
         this.context.rotate(angle);
-    };
-    CanvasRenderingContext2D.prototype.save = function () {
+    }
+    save() {
         this.log('save');
         this._ensureLayoutBeforeDraw();
         this.context.save();
-    };
-    CanvasRenderingContext2D.prototype.scale = function (x, y) {
+    }
+    scale(x, y) {
         this.log('scale', x, y);
         this._ensureLayoutBeforeDraw();
         if (typeof x === 'number' && typeof y === 'number') {
             this.context.scale(x, y);
         }
-    };
-    CanvasRenderingContext2D.prototype.scrollPathIntoView = function (path) {
-    };
-    CanvasRenderingContext2D.prototype.setLineDash = function (segments) {
+    }
+    scrollPathIntoView(path) {
+    }
+    setLineDash(segments) {
         this.log('setLineDash', segments);
         this._ensureLayoutBeforeDraw();
         this.context.setLineDash(segments);
-    };
-    CanvasRenderingContext2D.prototype.setTransform = function (a, b, c, d, e, f) {
+    }
+    setTransform(a, b, c, d, e, f) {
         this.log('setTransform', a, b, c, d, e, f);
         this._ensureLayoutBeforeDraw();
         this.context.setTransform(a, b, c, d, e, f);
-    };
-    CanvasRenderingContext2D.prototype.stroke = function (path) {
+    }
+    stroke(path) {
         this.log('stroke', path);
         this._ensureLayoutBeforeDraw();
         if (path) {
@@ -976,13 +866,13 @@ var CanvasRenderingContext2D = /** @class */ (function (_super) {
         else {
             this.context.stroke();
         }
-    };
-    CanvasRenderingContext2D.prototype.strokeRect = function (x, y, width, height) {
+    }
+    strokeRect(x, y, width, height) {
         this.log('strokeRect', x, y, width, height);
         this._ensureLayoutBeforeDraw();
         this.context.strokeRect(x, y, width, height);
-    };
-    CanvasRenderingContext2D.prototype.strokeText = function (text, x, y, maxWidth) {
+    }
+    strokeText(text, x, y, maxWidth) {
         this.log('strokeText', text, x, y, maxWidth);
         this._ensureLayoutBeforeDraw();
         if (typeof maxWidth === 'number') {
@@ -991,34 +881,28 @@ var CanvasRenderingContext2D = /** @class */ (function (_super) {
         else {
             this.context.strokeText(text, x, y);
         }
-    };
-    CanvasRenderingContext2D.prototype.transform = function (a, b, c, d, e, f) {
+    }
+    transform(a, b, c, d, e, f) {
         this.log('transform', a, b, c, d, e, f);
         this._ensureLayoutBeforeDraw();
         this.context.transform(a, b, c, d, e, f);
-    };
-    CanvasRenderingContext2D.prototype.translate = function (x, y) {
+    }
+    translate(x, y) {
         this.log('translate', x, y);
         this._ensureLayoutBeforeDraw();
         this.context.translate(x, y);
-    };
-    CanvasRenderingContext2D.prototype.log = function (message) {
-        var args = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            args[_i - 1] = arguments[_i];
-        }
+    }
+    log(message, ...args) {
         if (!CanvasRenderingContext2D.isDebug) {
             return;
         }
         console.log(message, args);
-    };
-    CanvasRenderingContext2D.prototype._ensureLayoutBeforeDraw = function () {
+    }
+    _ensureLayoutBeforeDraw() {
         if (this.canvas) {
             this.canvas._layoutNative();
         }
-    };
-    CanvasRenderingContext2D.isDebug = false;
-    return CanvasRenderingContext2D;
-}(common_1.CanvasRenderingContext2DBase));
-exports.CanvasRenderingContext2D = CanvasRenderingContext2D;
+    }
+}
+CanvasRenderingContext2D.isDebug = false;
 //# sourceMappingURL=index.ios.js.map