@nativescript/canvas 2.0.0-alpha.9 → 2.0.0-beta.0

package/Canvas2D/CanvasRenderingContext2D/index.js

@@ -8,10 +8,55 @@ import { CanvasPattern } from '../CanvasPattern';
 import { Canvas } from '../../Canvas';
 import { Helpers } from '../../helpers';
 let ctor;
+function ruleToEnum(rule) {
+    switch (rule) {
+        case 'nonzero':
+            return 0;
+        case 'evenodd':
+            return 1;
+        default:
+            return -1; // will be ignored
+    }
+}
+function toBaseLine(value) {
+    switch (value) {
+        case 'top':
+            return 0;
+        case 'hanging':
+            return 1;
+        case 'middle':
+            return 2;
+        case 'alphabetic':
+            return 3;
+        case 'ideographic':
+            return 4;
+        case 'bottom':
+            return 5;
+        default:
+            return -1;
+    }
+}
+function fromBaseLine(value) {
+    switch (value) {
+        case 0:
+            return 'top';
+        case 1:
+            return 'hanging';
+        case 2:
+            return 'middle';
+        case 3:
+            return 'alphabetic';
+        case 4:
+            return 'ideographic';
+        case 5:
+            return 'bottom';
+        default:
+            return null;
+    }
+}
 export class CanvasRenderingContext2D {
     constructor(context, contextOptions) {
         this._type = 'none';
-        this._methodCache = new Map();
         /*const width = context.getDrawingBufferWidth(); // can use  getMeasuredWidth / getMeasuredHeight
         const height = context.getDrawingBufferHeight();
 
@@ -38,121 +83,106 @@ export class CanvasRenderingContext2D {
         return this.context.shadowColor;
     }
     set shadowColor(color) {
-        if (this.context) {
-            this._ensureLayoutBeforeDraw();
-            this.context.shadowColor = color;
-        }
+        this.context.shadowColor = color;
     }
     get font() {
         return this.context.font;
     }
     set font(value) {
-        if (this.context) {
-            this._ensureLayoutBeforeDraw();
-            this.context.font = value;
-        }
+        this.context.font = value;
     }
     get direction() {
         return this.context.direction;
     }
     set direction(value) {
-        if (this.context) {
-            this._ensureLayoutBeforeDraw();
-            this.context.direction = value;
-        }
+        this.context.direction = value;
     }
     get globalAlpha() {
         return this.context.globalAlpha;
     }
     set globalAlpha(alpha) {
-        if (this.context) {
-            this._ensureLayoutBeforeDraw();
-            this.context.globalAlpha = alpha;
-        }
+        this.context.globalAlpha = alpha;
     }
     get imageSmoothingEnabled() {
         return this.context.imageSmoothingEnabled;
     }
     set imageSmoothingEnabled(enabled) {
-        if (this.context) {
-            this._ensureLayoutBeforeDraw();
-            this.context.imageSmoothingEnabled = enabled;
-        }
+        this.context.imageSmoothingEnabled = enabled;
     }
     get imageSmoothingQuality() {
         return this.context.imageSmoothingQuality;
     }
     set imageSmoothingQuality(quality) {
-        this._ensureLayoutBeforeDraw();
         this.context.imageSmoothingQuality = quality;
     }
     get lineDashOffset() {
         return this.context.lineDashOffset;
     }
     set lineDashOffset(offset) {
-        if (this.context) {
-            this._ensureLayoutBeforeDraw();
-            this.context.lineDashOffset = offset;
-        }
+        this.context.lineDashOffset = offset;
+    }
+    get letterSpacing() {
+        return this.context.letterSpacing;
+    }
+    set letterSpacing(spacing) {
+        this.context.letterSpacing = spacing;
     }
     get lineJoin() {
         return this.context.lineJoin;
     }
     set lineJoin(join) {
-        this._ensureLayoutBeforeDraw();
         this.context.lineJoin = join;
     }
     get lineCap() {
         return this.context.lineCap;
     }
     set lineCap(cap) {
-        this._ensureLayoutBeforeDraw();
         this.context.lineCap = cap;
     }
     get miterLimit() {
         return this.context.miterLimit;
     }
     set miterLimit(limit) {
-        this._ensureLayoutBeforeDraw();
         this.context.miterLimit = limit;
     }
     get shadowBlur() {
         return this.context.shadowBlur;
     }
     set shadowBlur(blur) {
-        this._ensureLayoutBeforeDraw();
         this.context.shadowBlur = blur;
     }
     get shadowOffsetX() {
         return this.context.shadowOffsetX;
     }
     set shadowOffsetX(x) {
-        if (this.context) {
-            this._ensureLayoutBeforeDraw();
-            this.context.shadowOffsetX = x;
-        }
+        this.context.shadowOffsetX = x;
     }
     get shadowOffsetY() {
         return this.context.shadowOffsetY;
     }
     set shadowOffsetY(y) {
-        if (this.context) {
-            this._ensureLayoutBeforeDraw();
-            this.context.shadowOffsetY = y;
-        }
+        this.context.shadowOffsetY = y;
     }
     get textAlign() {
         return this.context.textAlign;
     }
     set textAlign(alignment) {
-        this._ensureLayoutBeforeDraw();
-        this.context.setTextAlign = alignment;
+        this.context.textAlign = alignment;
+    }
+    get textBaseline() {
+        return fromBaseLine(this.context.textBaseline);
+    }
+    set textBaseline(baseline) {
+        const value = toBaseLine(baseline);
+        if (value === -1) {
+            return;
+        }
+        this.context.textBaseline = value;
     }
     get globalCompositeOperation() {
         return this.context.globalCompositeOperation;
     }
     set globalCompositeOperation(composite) {
-        this._ensureLayoutBeforeDraw();
         this.context.globalCompositeOperation = composite;
     }
     get fillStyle() {
@@ -162,19 +192,12 @@ export class CanvasRenderingContext2D {
         if (color === undefined || color === null) {
             return;
         }
-        this._ensureLayoutBeforeDraw();
-        if (color instanceof CanvasGradient || color instanceof CanvasPattern) {
-            this.context.fillStyle = color.native;
-        }
-        else {
-            this.context.fillStyle = color;
-        }
+        this.context.fillStyle = typeof color === 'object' ? color.native : color;
     }
     get filter() {
         return this.context.filter;
     }
     set filter(value) {
-        this._ensureLayoutBeforeDraw();
         this.context.filter = value;
     }
     get strokeStyle() {
@@ -184,81 +207,56 @@ export class CanvasRenderingContext2D {
         if (color === undefined || color === null) {
             return;
         }
-        this._ensureLayoutBeforeDraw();
-        if (color instanceof CanvasGradient || color instanceof CanvasPattern) {
-            this.context.strokeStyle = color.native;
-        }
-        else {
-            this.context.strokeStyle = color;
-        }
+        this.context.strokeStyle = typeof color === 'object' ? color.native : color;
     }
     get lineWidth() {
         return this.context.lineWidth;
     }
     set lineWidth(width) {
-        this._ensureLayoutBeforeDraw();
         this.context.lineWidth = width;
     }
-    _getMethod(name) {
-        const cached = this._methodCache.get(name);
-        if (cached === undefined) {
-            const ret = this.context[name];
-            this._methodCache.set(name, ret);
-            return ret;
-        }
-        return cached;
+    get wordSpacing() {
+        return this.context.wordSpacing;
+    }
+    set wordSpacing(spacing) {
+        this.context.wordSpacing = spacing;
     }
     __toDataURL(type = 'image/jpg', quality = 92) {
-        const __toDataURL = this._getMethod('__toDataURL');
-        return __toDataURL(type, quality);
+        return this.context.__toDataURL(type, quality);
     }
     addHitRegion(region) { }
     arc(x, y, radius, startAngle, endAngle, anticlockwise = false) {
-        this._ensureLayoutBeforeDraw();
-        const arc = this._getMethod('arc');
-        arc(x, y, radius, startAngle, endAngle, anticlockwise);
+        this.context.arc(x, y, radius, startAngle, endAngle, anticlockwise ?? false);
     }
     arcTo(x1, y1, x2, y2, radius) {
-        this._ensureLayoutBeforeDraw();
-        const arcTo = this._getMethod('arcTo');
-        arcTo(x1, y1, x2, y2, radius);
+        this.context.arcTo(x1, y1, x2, y2, radius);
     }
     beginPath() {
-        this._ensureLayoutBeforeDraw();
-        const beginPath = this._getMethod('beginPath');
-        beginPath();
+        this.context.beginPath();
     }
     bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-        this._ensureLayoutBeforeDraw();
-        const bezierCurveTo = this._getMethod('bezierCurveTo');
-        bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+        this.context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
     }
     clearHitRegions() { }
     clearRect(x, y, width, height) {
-        this._ensureLayoutBeforeDraw();
-        const clearRect = this._getMethod('clearRect');
-        clearRect(x, y, width, height);
+        this.context.clearRect(x, y, width, height);
     }
     clip(...args) {
-        this._ensureLayoutBeforeDraw();
-        const clip = this._getMethod('clip');
         if (typeof args[0] === 'string') {
-            clip(args[0]);
+            this.context.clip(ruleToEnum(args[0]));
         }
         else if (args[0] instanceof Path2D && typeof args[1] === 'string') {
-            clip(args[0].native, args[1]);
+            this.context.clip(args[0].native, ruleToEnum(args[1]));
         }
         else if (args[0] instanceof Path2D) {
-            clip(args[0].native);
+            this.context.clip(args[0].native);
         }
         else {
-            clip();
+            this.context.clip();
         }
     }
     closePath() {
-        this._ensureLayoutBeforeDraw();
-        const closePath = this._getMethod('closePath');
-        closePath();
+        this.context.closePath();
     }
     createImageData(width, height) {
         if (width instanceof ImageData) {
@@ -269,48 +267,45 @@ export class CanvasRenderingContext2D {
         }
     }
     createLinearGradient(x0, y0, x1, y1) {
-        this._ensureLayoutBeforeDraw();
-        const createLinearGradient = this._getMethod('createLinearGradient');
-        return CanvasGradient.fromNative(createLinearGradient(x0, y0, x1, y1));
+        return CanvasGradient.fromNative(this.context.createLinearGradient(x0, y0, x1, y1));
     }
     createPattern(image, repetition) {
-        var _a;
-        this._ensureLayoutBeforeDraw();
         if (repetition === undefined || typeof repetition !== 'string') {
             const e = new Error('The string did not match the expected pattern.');
             e.name = 'SyntaxError';
             throw e;
         }
-        const createPattern = this._getMethod('createPattern');
+        //const createPattern = this._getMethod('createPattern');
+        //const createPattern = this.context.createPattern;
         let img;
-        if ((image === null || image === void 0 ? void 0 : image._type) === '2d' || ((_a = image === null || image === void 0 ? void 0 : image._type) === null || _a === void 0 ? void 0 : _a.indexOf('webgl')) > -1) {
+        if (image?._type === '2d' || image?._type?.indexOf('webgl') > -1) {
             img = image.native;
         }
         else if (image instanceof ImageSource) {
-            const ptr = this._getMethod('__getPointer');
-            const createPattern = this._getMethod('__createPatternWithNative');
+            //const ptr = this.context.__getPointer; //this._getMethod('__getPointer');
+            //const createPattern = this.context.__createPatternWithNative; //this._getMethod('__createPatternWithNative');
             if (global.isAndroid) {
                 img = image.android;
-                const pattern = org.nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(ptr), img, repetition);
-                return new CanvasPattern(createPattern(pattern));
+                const pattern = org.nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(this.context.__getPointer()), img, repetition);
+                return new CanvasPattern(this.context.__createPatternWithNative(pattern));
             }
             if (global.isIOS) {
                 img = image.ios;
-                const pattern = NSCCanvasRenderingContext2D.createPattern(long(ptr), img, repetition);
-                return new CanvasPattern(createPattern(pattern));
+                const pattern = NSCCanvasRenderingContext2D.createPattern(this.context.__getPointer(), img, repetition);
+                return new CanvasPattern(this.context.__createPatternWithNative(pattern));
             }
             return null;
         }
         else if (global.isAndroid && image instanceof android.graphics.Bitmap) {
-            const ptr = this._getMethod('__getPointer');
-            const createPattern = this._getMethod('__createPatternWithNative');
+            //const ptr = this.context.__getPointer; //this._getMethod('__getPointer');
+            const createPattern = this.context.__createPatternWithNative; //this._getMethod('__createPatternWithNative');
             if (global.isAndroid) {
-                const pattern = org.nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(ptr), image, repetition);
-                return new CanvasPattern(createPattern(pattern));
+                const pattern = org.nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(this.context.__getPointer()), image, repetition);
+                return new CanvasPattern(this.context.__createPatternWithNative(pattern));
             }
             if (global.isIOS) {
-                const pattern = NSCCanvasRenderingContext2D.createPattern(long(ptr), image, repetition);
-                return new CanvasPattern(createPattern(pattern));
+                const pattern = NSCCanvasRenderingContext2D.createPattern(this.context.__getPointer(), image, repetition);
+                return new CanvasPattern(this.context.__createPatternWithNative(pattern));
             }
             return null;
         }
@@ -329,17 +324,17 @@ export class CanvasRenderingContext2D {
                 img = image._asset.native;
             }
             else if (typeof image.src === 'string') {
-                const ptr = this._getMethod('__getPointer');
-                const createPattern = this._getMethod('__createPatternWithNative');
+                //const ptr = this.context.__getPointer; //this._getMethod('__getPointer');
+                //const createPattern = this.context.__createPatternWithNative; //this._getMethod('__createPatternWithNative');
                 if (global.isAndroid) {
                     img = ImageSource.fromFileSync(image.src).android;
-                    const pattern = org.nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(ptr), img, repetition);
-                    return new CanvasPattern(createPattern(pattern));
+                    const pattern = org.nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(this.context.__getPointer()), img, repetition);
+                    return new CanvasPattern(this.context.__createPatternWithNative(pattern));
                 }
                 if (global.isiOS) {
                     img = ImageSource.fromFileSync(image.src).android;
-                    const pattern = NSCCanvasRenderingContext2D.createPattern(long(ptr), img, repetition);
-                    return new CanvasPattern(createPattern(pattern));
+                    const pattern = NSCCanvasRenderingContext2D.createPattern(this.context.__getPointer(), img, repetition);
+                    return new CanvasPattern(this.context.__createPatternWithNative(pattern));
                 }
                 return null;
             }
@@ -353,67 +348,60 @@ export class CanvasRenderingContext2D {
         if (!img) {
             return null;
         }
-        return new CanvasPattern(createPattern(img, repetition));
+        return new CanvasPattern(this.context.createPattern(img, repetition));
     }
     createRadialGradient(x0, y0, r0, x1, y1, r1) {
-        this._ensureLayoutBeforeDraw();
-        const createRadialGradient = this._getMethod('createRadialGradient');
-        return CanvasGradient.fromNative(createRadialGradient(x0, y0, r0, x1, y1, r1));
+        return CanvasGradient.fromNative(this.context.createRadialGradient(x0, y0, r0, x1, y1, r1));
+    }
+    createConicGradient(startAngle, x, y) {
+        return CanvasGradient.fromNative(this.context.createConicGradient(startAngle, x, y));
     }
     drawPaint(color) {
-        this._ensureLayoutBeforeDraw();
-        const drawPaint = this._getMethod('drawPaint');
-        drawPaint(color);
+        this.context.drawPaint(color);
     }
     drawPoint(x, y) {
-        this._ensureLayoutBeforeDraw();
-        const drawPoint = this._getMethod('drawPoint');
-        drawPoint(x, y);
+        this.context.drawPoint(x, y);
     }
     drawPoints(mode, points) {
-        this._ensureLayoutBeforeDraw();
-        const drawPoints = this._getMethod('drawPoints');
-        drawPoints(mode, points);
+        this.context.drawPoints(mode, points);
     }
     drawFocusIfNeeded(...args) { }
     drawImage(...args) {
-        var _a;
-        this._ensureLayoutBeforeDraw();
-        const drawImage = this._getMethod('drawImage');
+        //const drawImage = this.context.drawImage; //this._getMethod('drawImage');
         const drawNativeImage = (args, image) => {
-            const ptr = this._getMethod('__getPointer');
-            const makeDirty = this._getMethod('__makeDirty');
+            //const ptr = this.context.__getPointer; //this._getMethod('__getPointer');
+            //const makeDirty = this.context.__makeDirty; //this._getMethod('__makeDirty');
             let dirty = false;
             if (args.length === 3) {
                 if (global.isAndroid) {
-                    dirty = org.nativescript.canvas.NSCCanvasRenderingContext2D.drawImage(long(ptr), image, args[1], args[2]);
+                    dirty = org.nativescript.canvas.NSCCanvasRenderingContext2D.drawImage(long(this.context.__getPointer()), image, args[1], args[2]);
                 }
                 if (global.isIOS) {
-                    dirty = NSCCanvasRenderingContext2D.drawImage(long(ptr), image, args[1], args[2]);
+                    dirty = NSCCanvasRenderingContext2D.drawImage(this.context.__getPointer(), image, args[1], args[2]);
                 }
             }
             else if (args.length === 5) {
                 if (global.isAndroid) {
-                    dirty = org.nativescript.canvas.NSCCanvasRenderingContext2D.drawImage(long(ptr), image, args[1], args[2], args[3], args[4]);
+                    dirty = org.nativescript.canvas.NSCCanvasRenderingContext2D.drawImage(long(this.context.__getPointer()), image, args[1], args[2], args[3], args[4]);
                 }
                 if (global.isIOS) {
-                    dirty = NSCCanvasRenderingContext2D.drawImage(long(ptr), image, args[1], args[2], args[3], args[4]);
+                    dirty = NSCCanvasRenderingContext2D.drawImage(this.context.__getPointer(), image, args[1], args[2], args[3], args[4]);
                 }
             }
             else if (args.length === 9) {
                 if (global.Android) {
-                    dirty = org.nativescript.canvas.NSCCanvasRenderingContext2D.drawImage(long(ptr), image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
+                    dirty = org.nativescript.canvas.NSCCanvasRenderingContext2D.drawImage(long(this.context.__getPointer()), image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
                 }
                 if (global.isIOS) {
-                    dirty = NSCCanvasRenderingContext2D.drawImage(long(ptr), image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
+                    dirty = NSCCanvasRenderingContext2D.drawImage(this.context.__getPointer(), image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
                 }
             }
             if (dirty) {
-                makeDirty();
+                this.context.__makeDirty();
             }
         };
         let image = args[0];
-        if ((image === null || image === void 0 ? void 0 : image._type) === '2d' || ((_a = image === null || image === void 0 ? void 0 : image._type) === null || _a === void 0 ? void 0 : _a.indexOf('webgl')) > -1) {
+        if (image?._type === '2d' || image?._type?.indexOf('webgl') > -1) {
             image = image.native;
         }
         else if (image instanceof ImageAsset) {
@@ -472,218 +460,159 @@ export class CanvasRenderingContext2D {
             }
         }
         else if (image && typeof image.tagName === 'string' && image.tagName === 'CANVAS' && image._canvas instanceof Canvas) {
-            image = image._canvas.android;
+            image = image._canvas.native;
         }
         else if (image instanceof ImageBitmap) {
             image = image.native;
         }
         if (args.length === 3) {
-            drawImage(image, args[1], args[2]);
+            this.context.drawImage(image, args[1], args[2]);
         }
         else if (args.length === 5) {
-            drawImage(image, args[1], args[2], args[3], args[4]);
+            this.context.drawImage(image, args[1], args[2], args[3], args[4]);
         }
         else if (args.length === 9) {
-            drawImage(image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
+            this.context.drawImage(image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
         }
     }
     ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise = false) {
-        this._ensureLayoutBeforeDraw();
-        const ellipse = this._getMethod('ellipse');
-        ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+        this.context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise ?? false);
     }
     fill(...args) {
-        this._ensureLayoutBeforeDraw();
-        const fill = this._getMethod('fill');
         if (typeof args[0] === 'string') {
-            fill(args[0]);
+            this.context.fill(ruleToEnum(args[0]));
         }
         else if (args[0] instanceof Path2D && typeof args[1] === 'string') {
-            fill(args[0].native, args[1]);
+            this.context.fill(args[0].native, ruleToEnum(args[1]));
         }
         else if (args[0] instanceof Path2D) {
-            fill(args[0].native);
+            this.context.fill(args[0].native);
         }
         else {
-            fill();
+            this.context.fill();
         }
     }
     fillRect(x, y, width, height) {
-        this._ensureLayoutBeforeDraw();
-        const fillRect = this._getMethod('fillRect');
-        fillRect(x, y, width, height);
+        this.context.fillRect(x, y, width, height);
     }
     fillText(text, x, y, maxWidth) {
-        this._ensureLayoutBeforeDraw();
-        const fillText = this._getMethod('fillText');
         if (typeof maxWidth === 'number') {
-            fillText(text + '', x, y, maxWidth);
+            this.context.fillText(text + '', x, y, maxWidth);
         }
         else {
-            fillText(text + '', x, y);
+            this.context.fillText(text + '', x, y);
         }
     }
     getImageData(sx, sy, sw, sh) {
-        this._ensureLayoutBeforeDraw();
-        const getImageData = this._getMethod('getImageData');
-        return ImageData.fromNative(getImageData(sx, sy, sw, sh));
+        return ImageData.fromNative(this.context.getImageData(sx, sy, sw, sh));
     }
     getLineDash() {
-        this._ensureLayoutBeforeDraw();
-        const getLineDash = this._getMethod('getLineDash');
-        return getLineDash();
+        return this.context.getLineDash();
     }
     isPointInPath(...args) {
-        this._ensureLayoutBeforeDraw();
-        const isPointInPath = this._getMethod('isPointInPath');
         if (args.length === 2) {
-            return isPointInPath(args[0], args[1]);
+            return this.context.isPointInPath(args[0], args[1]);
         }
         else if (args.length === 3) {
-            return isPointInPath(args[0], args[1], args[2]);
+            return this.context.isPointInPath(args[0], args[1], ruleToEnum(args[2]));
         }
         else if (args.length === 4 && args[0] instanceof Path2D) {
-            return isPointInPath(args[0].native, args[1], args[2], args[3]);
+            return this.context.isPointInPath(args[0].native, args[1], args[2], ruleToEnum(args[3]));
         }
         return false;
     }
     isPointInStroke(...args) {
-        this._ensureLayoutBeforeDraw();
-        const isPointInStroke = this._getMethod('isPointInStroke');
         if (args.length === 2) {
-            return isPointInStroke(args[0], args[1]);
+            return this.context.isPointInStroke(args[0], args[1]);
         }
         else if (args.length === 3 && args[0] instanceof Path2D) {
-            return isPointInStroke(args[0].native, args[1], args[2]);
+            return this.context.isPointInStroke(args[0].native, args[1], args[2]);
         }
         return false;
     }
     lineTo(x, y) {
-        this._ensureLayoutBeforeDraw();
-        const lineTo = this._getMethod('lineTo');
-        lineTo(x, y);
+        this.context.lineTo(x, y);
     }
     measureText(text) {
-        this._ensureLayoutBeforeDraw();
-        const measureText = this._getMethod('measureText');
-        return new TextMetrics(measureText(text));
+        return new TextMetrics(this.context.measureText(text));
     }
     moveTo(x, y) {
-        this._ensureLayoutBeforeDraw();
-        const moveTo = this._getMethod('moveTo');
-        moveTo(x, y);
+        this.context.moveTo(x, y);
     }
     putImageData(...args) {
-        this._ensureLayoutBeforeDraw();
         if (!args) {
             return;
         }
-        const putImageData = this._getMethod('putImageData');
-        let data = args[0];
+        const data = args[0];
         if (args.length === 3) {
-            putImageData(data.native, args[1], args[2]);
+            this.context.putImageData(data.native, args[1], args[2]);
         }
         else if (args.length === 7) {
-            putImageData(data.native, args[1], args[2], args[3], args[4], args[5], args[6]);
+            this.context.putImageData(data.native, args[1], args[2], args[3], args[4], args[5], args[6]);
         }
     }
     quadraticCurveTo(cpx, cpy, x, y) {
-        this._ensureLayoutBeforeDraw();
-        const quadraticCurveTo = this._getMethod('quadraticCurveTo');
-        quadraticCurveTo(cpx, cpy, x, y);
+        this.context.quadraticCurveTo(cpx, cpy, x, y);
     }
     rect(x, y, width, height) {
-        this._ensureLayoutBeforeDraw();
-        const rect = this._getMethod('rect');
-        rect(x, y, width, height);
+        this.context.rect(x, y, width, height);
     }
     roundRect(x, y, width, height, radii) {
-        this._ensureLayoutBeforeDraw();
-        const roundRect = this._getMethod('roundRect');
-        roundRect(x, y, width, height, radii);
+        this.context.roundRect(x, y, width, height, radii);
     }
     removeHitRegion(id) { }
     resetTransform() {
-        this._ensureLayoutBeforeDraw();
-        const resetTransform = this._getMethod('resetTransform');
-        resetTransform();
+        this.context.resetTransform();
     }
     restore() {
-        this._ensureLayoutBeforeDraw();
-        const restore = this._getMethod('restore');
-        restore();
+        this.context.restore();
     }
     rotate(angle) {
-        this._ensureLayoutBeforeDraw();
-        const rotate = this._getMethod('rotate');
-        rotate(angle);
+        this.context.rotate(angle);
     }
     save() {
-        this._ensureLayoutBeforeDraw();
-        const save = this._getMethod('save');
-        save();
+        this.context.save();
     }
     scale(x, y) {
-        this._ensureLayoutBeforeDraw();
-        const scale = this._getMethod('scale');
-        scale(x, y);
+        this.context.scale(x, y);
     }
     scrollPathIntoView(path) { }
     setLineDash(segments) {
-        this._ensureLayoutBeforeDraw();
-        const setLineDash = this._getMethod('setLineDash');
-        setLineDash(segments);
+        this.context.setLineDash(segments);
     }
     setTransform(a, b, c, d, e, f) {
-        this._ensureLayoutBeforeDraw();
-        const setTransform = this._getMethod('setTransform');
-        setTransform(a, b, c, d, e, f);
+        this.context.setTransform(a, b, c, d, e, f);
     }
     stroke(path) {
-        this._ensureLayoutBeforeDraw();
-        const stroke = this._getMethod('stroke');
         if (path) {
-            stroke(path.native);
+            this.context.stroke(path.native);
         }
         else {
-            stroke();
+            this.context.stroke();
         }
     }
     strokeRect(x, y, width, height) {
-        this._ensureLayoutBeforeDraw();
-        const strokeRect = this._getMethod('strokeRect');
-        strokeRect(x, y, width, height);
+        this.context.strokeRect(x, y, width, height);
     }
     strokeText(text, x, y, maxWidth) {
-        this._ensureLayoutBeforeDraw();
-        const strokeText = this._getMethod('strokeText');
         if (typeof maxWidth === 'number') {
-            strokeText(text + '', x, y, maxWidth);
+            this.context.strokeText(text + '', x, y, maxWidth);
         }
         else {
-            strokeText(text + '', x, y);
+            this.context.strokeText(text + '', x, y);
         }
     }
     transform(a, b, c, d, e, f) {
-        this._ensureLayoutBeforeDraw();
-        const transform = this._getMethod('transform');
-        transform(a, b, c, d, e, f);
+        this.context.transform(a, b, c, d, e, f);
     }
     translate(x, y) {
-        this._ensureLayoutBeforeDraw();
-        const translate = this._getMethod('translate');
-        translate(x, y);
-    }
-    _ensureLayoutBeforeDraw() {
-        if (this.canvas !== undefined) {
-            this.canvas._layoutNative();
-        }
+        this.context.translate(x, y);
     }
 }
-CanvasRenderingContext2D.isDebug = false;
+CanvasRenderingContext2D.isDebug = true;
 (() => {
     Helpers.initialize();
     //ctor = global.CanvasJSIModule.create2DContext;
-    ctor = global.CanvasJSIModule.create2DContextWithPointer;
+    ctor = global.CanvasModule.create2DContextWithPointer;
 })();
 //# sourceMappingURL=index.js.map