@nativescript/canvas 1.1.0 → 2.0.0-alpha.0

package/Canvas2D/CanvasRenderingContext2D/index.android.js

@@ -7,84 +7,24 @@ import { ImageSource } from '@nativescript/core';
 import { ImageAsset } from '../../ImageAsset';
 import { CanvasPattern } from '../CanvasPattern';
 import { Canvas } from '../../Canvas';
-import lazy from '@nativescript/core/utils/lazy';
-const FillRule = {
-    EvenOdd: lazy(() => org.nativescript.canvas.TNSFillRule.EvenOdd),
-    NonZero: lazy(() => org.nativescript.canvas.TNSFillRule.NonZero),
-};
-const TextDirection = {
-    Ltr: lazy(() => org.nativescript.canvas.TNSTextDirection.Ltr),
-    Rtl: lazy(() => org.nativescript.canvas.TNSTextDirection.Rtl),
-};
-const ImageSmoothingQuality = {
-    Low: lazy(() => org.nativescript.canvas.TNSImageSmoothingQuality.Low),
-    Medium: lazy(() => org.nativescript.canvas.TNSImageSmoothingQuality.Medium),
-    High: lazy(() => org.nativescript.canvas.TNSImageSmoothingQuality.High),
-};
-const LineJoin = {
-    Bevel: lazy(() => org.nativescript.canvas.TNSLineJoin.Bevel),
-    Miter: lazy(() => org.nativescript.canvas.TNSLineJoin.Miter),
-    Round: lazy(() => org.nativescript.canvas.TNSLineJoin.Round),
-};
-const LineCap = {
-    Round: lazy(() => org.nativescript.canvas.TNSLineCap.Round),
-    Butt: lazy(() => org.nativescript.canvas.TNSLineCap.Butt),
-    Square: lazy(() => org.nativescript.canvas.TNSLineCap.Square),
-};
-const TextAlignment = {
-    Start: lazy(() => org.nativescript.canvas.TNSTextAlignment.Start),
-    Left: lazy(() => org.nativescript.canvas.TNSTextAlignment.Left),
-    Center: lazy(() => org.nativescript.canvas.TNSTextAlignment.Center),
-    Right: lazy(() => org.nativescript.canvas.TNSTextAlignment.Right),
-    End: lazy(() => org.nativescript.canvas.TNSTextAlignment.End),
-};
-const CompositeOperationType = {
-    SourceOver: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.SourceOver),
-    SourceIn: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.SourceIn),
-    SourceOut: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.SourceOut),
-    SourceAtop: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.SourceAtop),
-    DestinationOver: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.DestinationOver),
-    DestinationIn: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.DestinationIn),
-    DestinationOut: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.DestinationOut),
-    DestinationAtop: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.DestinationAtop),
-    Lighter: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Lighter),
-    Copy: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Copy),
-    Xor: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Xor),
-    Multiply: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Multiply),
-    Screen: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Screen),
-    Overlay: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Overlay),
-    Darken: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Darken),
-    Lighten: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Lighten),
-    ColorDodge: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.ColorDodge),
-    ColorBurn: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.ColorBurn),
-    HardLight: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.HardLight),
-    SoftLight: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.SoftLight),
-    Difference: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Difference),
-    Exclusion: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Exclusion),
-    Hue: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Hue),
-    Saturation: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Saturation),
-    Color: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Color),
-    Luminosity: lazy(() => org.nativescript.canvas.TNSCompositeOperationType.Luminosity),
-};
-const PatternRepetition = {
-    NoRepeat: lazy(() => org.nativescript.canvas.TNSPatternRepetition.NoRepeat),
-    Repeat: lazy(() => org.nativescript.canvas.TNSPatternRepetition.Repeat),
-    RepeatX: lazy(() => org.nativescript.canvas.TNSPatternRepetition.RepeatX),
-    RepeatY: lazy(() => org.nativescript.canvas.TNSPatternRepetition.RepeatY),
-};
+import { Helpers } from '../../helpers';
+let ctor;
 export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
-    constructor(context) {
+    constructor(context, contextOptions) {
         super();
-        this.context = context;
-    }
-    _fillRuleFromString(string) {
-        if (string === 'evenodd') {
-            return FillRule.EvenOdd();
-        }
-        else if (string === 'nonzero') {
-            return FillRule.NonZero();
-        }
-        return null;
+        this._methodCache = new Map();
+        /*const width = context.getDrawingBufferWidth(); // can use  getMeasuredWidth / getMeasuredHeight
+        const height = context.getDrawingBufferHeight();
+
+        const ctxPtr = BigInt(context.getNativeContext().toString());
+        let direction = 0;
+        if (androidx.core.text.TextUtilsCompat.getLayoutDirectionFromLocale(java.util.Locale.getDefault()) === androidx.core.view.ViewCompat.LAYOUT_DIRECTION_RTL) {
+            direction = 1;
+        }
+        this.context = ctor(ctxPtr, width, height, Screen.mainScreen.scale, contextOptions.antialias ? 4 : 0, contextOptions.alpha, contextOptions.fontColor, 1, direction);
+        */
+        const ctxPtr = BigInt(context.toString());
+        this.context = ctor(ctxPtr);
     }
     get native() {
         return this.context;
@@ -94,309 +34,157 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
     }
     get shadowColor() {
         this.log('shadowColor');
-        return this.context.getShadowColor();
+        return this.context.shadowColor;
     }
     set shadowColor(color) {
         this.log('shadowColor value:', color);
         this._ensureLayoutBeforeDraw();
         if (this.context) {
-            this.context.setShadowColor(color);
+            this.context.shadowColor = color;
         }
     }
     get font() {
         this.log('get font');
-        return this.context.getFont();
+        return this.context.font;
     }
     set font(value) {
         this.log('set font value:', value);
         if (this.context) {
-            this.context.setFont(value);
+            this.context.font = value;
         }
     }
     get direction() {
         this.log('direction');
-        return this.context.getDirection() === TextDirection.Ltr() ? 'ltr' : 'rtl';
+        return this.context.direction;
     }
     set direction(value) {
         this.log('direction value:', value);
         this._ensureLayoutBeforeDraw();
         if (this.context) {
-            this.context.setDirection(value === 'rtl' ? TextDirection.Rtl() : TextDirection.Ltr());
+            this.context.direction = value;
         }
     }
     get globalAlpha() {
         this.log('globalAlpha');
-        return this.context.getGlobalAlpha();
+        return this.context.globalAlpha;
     }
     set globalAlpha(alpha) {
         this.log('globalAlpha value:', alpha);
         this._ensureLayoutBeforeDraw();
         if (this.context) {
-            this.context.setGlobalAlpha(alpha);
+            this.context.globalAlpha = alpha;
         }
     }
     get imageSmoothingEnabled() {
         this.log('imageSmoothingEnabled');
-        return this.context.getImageSmoothingEnabled();
+        return this.context.imageSmoothingEnabled;
     }
     set imageSmoothingEnabled(enabled) {
         this.log('imageSmoothingEnabled value:', enabled);
         this._ensureLayoutBeforeDraw();
         if (this.context) {
-            this.context.setImageSmoothingEnabled(enabled);
+            this.context.imageSmoothingEnabled = enabled;
         }
     }
     get imageSmoothingQuality() {
         this.log('imageSmoothingQuality');
-        return this.context.getImageSmoothingQuality().toString();
+        return this.context.imageSmoothingQuality;
     }
     set imageSmoothingQuality(quality) {
         this.log('imageSmoothingQuality value:', quality);
         this._ensureLayoutBeforeDraw();
-        if (this.context) {
-            switch (quality) {
-                case 'high':
-                    this.context.setImageSmoothingQuality(ImageSmoothingQuality.High());
-                    break;
-                case 'medium':
-                    this.context.setImageSmoothingQuality(ImageSmoothingQuality.Medium());
-                    break;
-                default:
-                    this.context.setImageSmoothingQuality(ImageSmoothingQuality.Low());
-                    break;
-            }
-        }
+        this.context.imageSmoothingQuality = quality;
     }
     get lineDashOffset() {
         this.log('lineDashOffset');
-        return this.context.getLineDashOffset();
+        return this.context.lineDashOffset;
     }
     set lineDashOffset(offset) {
         this.log('lineDashOffset value:', offset);
         this._ensureLayoutBeforeDraw();
         if (this.context) {
-            this.context.setLineDashOffset(offset);
+            this.context.lineDashOffset = offset;
         }
     }
     get lineJoin() {
         this.log('lineJoin');
-        return this.context.getLineJoin().toString();
+        return this.context.lineJoin;
     }
     set lineJoin(join) {
         this.log('lineJoin value:', join);
         this._ensureLayoutBeforeDraw();
-        if (this.context) {
-            switch (join) {
-                case 'bevel':
-                    this.context.setLineJoin(LineJoin.Bevel());
-                    break;
-                case 'round':
-                    this.context.setLineJoin(LineJoin.Round());
-                    break;
-                default:
-                    this.context.setLineJoin(LineJoin.Miter());
-                    break;
-            }
-        }
+        this.context.lineJoin = join;
     }
     get lineCap() {
         this.log('lineCap');
-        return this.context.getLineCap().toString();
+        return this.context.lineCap;
     }
     set lineCap(cap) {
         this.log('lineCap value:', cap);
         this._ensureLayoutBeforeDraw();
-        if (this.context) {
-            switch (cap) {
-                case 'round':
-                    this.context.setLineCap(LineCap.Round());
-                    break;
-                case 'square':
-                    this.context.setLineCap(LineCap.Square());
-                    break;
-                default:
-                    this.context.setLineCap(LineCap.Butt());
-            }
-        }
+        this.context.lineCap = cap;
     }
     get miterLimit() {
         this.log('miterLimit value:');
-        return this.context.getMiterLimit();
+        return this.context.miterLimit;
     }
     set miterLimit(limit) {
         this.log('miterLimit value:', limit);
         this._ensureLayoutBeforeDraw();
-        if (this.context) {
-            this.context.setMiterLimit(limit);
-        }
+        this.context.miterLimit = limit;
     }
     get shadowBlur() {
         this.log('shadowBlur');
-        return this.context.getShadowBlur();
+        return this.context.shadowBlur;
     }
     set shadowBlur(blur) {
         this.log('shadowBlur value:', blur);
         this._ensureLayoutBeforeDraw();
-        if (this.context) {
-            this.context.setShadowBlur(blur);
-        }
+        this.context.shadowBlur = blur;
     }
     get shadowOffsetX() {
         this.log('shadowOffsetX');
-        return this.context.getShadowOffsetX();
+        return this.context.shadowOffsetX;
     }
     set shadowOffsetX(x) {
         this.log('shadowOffsetX value:', x);
         this._ensureLayoutBeforeDraw();
         if (this.context) {
-            this.context.setShadowOffsetX(x);
+            this.context.shadowOffsetX = x;
         }
     }
     get shadowOffsetY() {
         this.log('shadowOffsetY');
-        return this.context.getShadowOffsetY();
+        return this.context.shadowOffsetY;
     }
     set shadowOffsetY(y) {
         this.log('shadowOffsetY value:', y);
         this._ensureLayoutBeforeDraw();
         if (this.context) {
-            this.context.setShadowOffsetY(y);
+            this.context.shadowOffsetY = y;
         }
     }
     get textAlign() {
         this.log('textAlign');
-        return this.context.getTextAlign().toString();
+        return this.context.textAlign;
     }
     set textAlign(alignment) {
         this.log('textAlign value:', alignment);
         this._ensureLayoutBeforeDraw();
-        if (this.context) {
-            switch (alignment) {
-                case 'start':
-                    this.context.setTextAlign(TextAlignment.Start());
-                    break;
-                case 'center':
-                    this.context.setTextAlign(TextAlignment.Center());
-                    break;
-                case 'end':
-                    this.context.setTextAlign(TextAlignment.End());
-                    break;
-                case 'right':
-                    this.context.setTextAlign(TextAlignment.Right());
-                    break;
-                default:
-                    this.context.setTextAlign(TextAlignment.Left());
-                    break;
-            }
-        }
+        this.context.setTextAlign = alignment;
     }
     get globalCompositeOperation() {
         this.log('globalCompositeOperation');
-        return this.context.getGlobalCompositeOperation().toString();
+        return this.context.globalCompositeOperation;
     }
     set globalCompositeOperation(composite) {
         this.log('globalCompositeOperation value:', composite);
         this._ensureLayoutBeforeDraw();
-        if (this.context) {
-            let operation;
-            switch (composite.toLowerCase()) {
-                case 'source-over':
-                    operation = CompositeOperationType.SourceOver();
-                    break;
-                case 'source-in':
-                    operation = CompositeOperationType.SourceIn();
-                    break;
-                case 'source-out':
-                    operation = CompositeOperationType.SourceOut();
-                    break;
-                case 'source-atop':
-                    operation = CompositeOperationType.SourceAtop();
-                    break;
-                case 'destination-over':
-                    operation = CompositeOperationType.DestinationOver();
-                    break;
-                case 'destination-in':
-                    operation = CompositeOperationType.DestinationIn();
-                    break;
-                case 'destination-out':
-                    operation = CompositeOperationType.DestinationOut();
-                    break;
-                case 'destination-atop':
-                    operation = CompositeOperationType.DestinationAtop();
-                    break;
-                case 'lighter':
-                    operation = CompositeOperationType.Lighter();
-                    break;
-                case 'copy':
-                    operation = CompositeOperationType.Copy();
-                    break;
-                case 'xor':
-                    operation = CompositeOperationType.Xor();
-                    break;
-                case 'multiply':
-                    operation = CompositeOperationType.Multiply();
-                    break;
-                case 'screen':
-                    operation = CompositeOperationType.Screen();
-                    break;
-                case 'overlay':
-                    operation = CompositeOperationType.Overlay();
-                    break;
-                case 'darken':
-                    operation = CompositeOperationType.Darken();
-                    break;
-                case 'lighten':
-                    operation = CompositeOperationType.Lighten();
-                    break;
-                case 'color-dodge':
-                    operation = CompositeOperationType.ColorDodge();
-                    break;
-                case 'color-burn':
-                    operation = CompositeOperationType.ColorBurn();
-                    break;
-                case 'hard-light':
-                    operation = CompositeOperationType.HardLight();
-                    break;
-                case 'soft-light':
-                    operation = CompositeOperationType.SoftLight();
-                    break;
-                case 'difference':
-                    operation = CompositeOperationType.Difference();
-                    break;
-                case 'exclusion':
-                    operation = CompositeOperationType.Exclusion();
-                    break;
-                case 'hue':
-                    operation = CompositeOperationType.Hue();
-                    break;
-                case 'saturation':
-                    operation = CompositeOperationType.Saturation();
-                    break;
-                case 'color':
-                    operation = CompositeOperationType.Color();
-                    break;
-                case 'luminosity':
-                    operation = CompositeOperationType.Luminosity();
-                    break;
-            }
-            this.context.setGlobalCompositeOperation(operation);
-        }
+        this.context.globalCompositeOperation = composite;
     }
     get fillStyle() {
         this.log('fillStyle');
-        if (this.context) {
-            const style = this.context.getFillStyle();
-            switch (style.getStyleType()) {
-                case org.nativescript.canvas.TNSColorStyleType.Color:
-                    const color = style;
-                    return color.getColor();
-                case org.nativescript.canvas.TNSColorStyleType.Gradient:
-                    return CanvasGradient.fromNative(style);
-                case org.nativescript.canvas.TNSColorStyleType.Pattern:
-                    return new CanvasPattern(style);
-            }
-        }
-        return 'black';
+        return this.context.fillStyle;
     }
     set fillStyle(color) {
         this.log('fillStyle:', color);
@@ -404,38 +192,24 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
             return;
         }
         this._ensureLayoutBeforeDraw();
-        if (typeof color === 'string') {
-            this.context.setFillStyleWithString(color);
+        if (color instanceof CanvasGradient || color instanceof CanvasPattern) {
+            this.context.fillStyle = color.native;
         }
-        else if (color instanceof CanvasGradient) {
-            this.context.setFillStyle(color.native);
-        }
-        else if (color instanceof CanvasPattern) {
-            this.context.setFillStyle(color.native);
+        else {
+            this.context.fillStyle = color;
         }
     }
     get filter() {
         this.log('get filter');
-        return this.context.getFilter();
+        return this.context.filter;
     }
     set filter(value) {
         this.log('set filter', value);
-        if (this.context) {
-            this.context.setFilter(value);
-        }
+        this.context.filter = value;
     }
     get strokeStyle() {
         this.log('strokeStyle');
-        const style = this.context.getStrokeStyle();
-        switch (style.getStyleType()) {
-            case 0 /* CanvasColorStyleType.Color */:
-                const color = style;
-                return color.getColor();
-            case 1 /* CanvasColorStyleType.Gradient */:
-                return CanvasGradient.fromNative(style);
-            case 2 /* CanvasColorStyleType.Pattern */:
-                return new CanvasPattern(style);
-        }
+        return this.context.strokeStyle;
     }
     set strokeStyle(color) {
         this.log('strokeStyle:', color);
@@ -443,92 +217,107 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
             return;
         }
         this._ensureLayoutBeforeDraw();
-        if (typeof color === 'string') {
-            this.context.setStrokeStyleWithString(color);
+        if (color instanceof CanvasGradient || color instanceof CanvasPattern) {
+            this.context.strokeStyle = color.native;
         }
-        else if (color instanceof CanvasGradient) {
-            this.context.setStrokeStyle(color.native);
-        }
-        else if (color instanceof CanvasPattern) {
-            this.context.setStrokeStyle(color.native);
+        else {
+            this.context.strokeStyle = color;
         }
     }
     get lineWidth() {
         this.log('lineWidth');
-        return this.context.getLineWidth();
+        return this.context.lineWidth;
     }
     set lineWidth(width) {
         this.log('lineWidth value:', width);
         this._ensureLayoutBeforeDraw();
-        if (this.context) {
-            this.context.setLineWidth(width);
+        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;
+    }
+    __toDataURL() {
+        const __toDataURL = this._getMethod('__toDataURL');
+        return __toDataURL(arguments[0], arguments[1]);
     }
     addHitRegion(region) { }
     arc(x, y, radius, startAngle, endAngle, anticlockwise = false) {
         this.log('arc value:', x, y, radius, startAngle, endAngle, anticlockwise);
         this._ensureLayoutBeforeDraw();
-        this.context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+        const arc = this._getMethod('arc');
+        arc(x, y, radius, startAngle, endAngle, anticlockwise);
     }
     arcTo(x1, y1, x2, y2, radius) {
         this.log('arcTo value:', x1, y1, x2, y2, radius);
         this._ensureLayoutBeforeDraw();
-        this.context.arcTo(x1, y1, x2, y2, radius);
+        const arcTo = this._getMethod('arcTo');
+        arcTo(x1, y1, x2, y2, radius);
     }
     beginPath() {
         this.log('beginPath');
         this._ensureLayoutBeforeDraw();
-        this.context.beginPath();
+        const beginPath = this._getMethod('beginPath');
+        beginPath();
     }
     bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
         this.log('bezierCurveTo value:', cp1x, cp1y, cp2x, cp2y, x, y);
         this._ensureLayoutBeforeDraw();
-        this.context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+        const bezierCurveTo = this._getMethod('bezierCurveTo');
+        bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
     }
     clearHitRegions() { }
     clearRect(x, y, width, height) {
         this.log('clearRect value:', x, y, width, height);
         this._ensureLayoutBeforeDraw();
-        this.context.clearRect(x, y, width, height);
+        const clearRect = this._getMethod('clearRect');
+        clearRect(x, y, width, height);
     }
     clip(...args) {
         this.log('clip value:', ...args);
         this._ensureLayoutBeforeDraw();
+        const clip = this._getMethod('clip');
         if (typeof args[0] === 'string') {
-            const rule = this._fillRuleFromString(args[0]);
-            this.context.clip(rule);
+            clip(args[0]);
         }
         else if (args[0] instanceof Path2D && typeof args[1] === 'string') {
-            const rule = this._fillRuleFromString(args[1]);
-            this.context.clip(args[0].native, rule);
+            clip(args[0].native, args[1]);
         }
         else if (args[0] instanceof Path2D) {
-            this.context.clip(args[0].native);
+            clip(args[0].native);
         }
         else {
-            this.context.clip();
+            clip();
         }
     }
     closePath() {
         this.log('closePath');
         this._ensureLayoutBeforeDraw();
-        this.context.closePath();
+        const closePath = this._getMethod('closePath');
+        closePath();
     }
     createImageData(width, height) {
         this.log('createImageData value:', arguments);
         if (width instanceof ImageData) {
-            return ImageData.fromNative(this.context.createImageData(width.native));
+            return new ImageData(width.width, width.height);
         }
         else {
-            return ImageData.fromNative(this.context.createImageData(width, height));
+            return new ImageData(width, height);
         }
     }
     createLinearGradient(x0, y0, x1, y1) {
         this.log('createLinearGradient value:', x0, y0, x1, y1);
         this._ensureLayoutBeforeDraw();
-        return CanvasGradient.fromNative(this.context.createLinearGradient(x0, y0, x1, y1));
+        const createLinearGradient = this._getMethod('createLinearGradient');
+        return CanvasGradient.fromNative(createLinearGradient(x0, y0, x1, y1));
     }
     createPattern(image, repetition) {
+        var _a;
         this.log('createPattern value:', image, repetition);
         this._ensureLayoutBeforeDraw();
         if (repetition === undefined || typeof repetition !== 'string') {
@@ -536,24 +325,28 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
             e.name = 'SyntaxError';
             throw e;
         }
+        const createPattern = this._getMethod('createPattern');
         let img;
-        if (image instanceof ImageSource) {
+        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) {
+            img = image.native;
+        }
+        else if (image instanceof ImageSource) {
             img = image.android;
         }
         else if (image instanceof android.graphics.Bitmap) {
-            img = image;
+            const ptr = this._getMethod('__getPointer');
+            const createPattern = this._getMethod('__createPatternWithNative');
+            const pattern = org.nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(ptr), image, repetition);
+            return new CanvasPattern(createPattern(pattern));
         }
         else if (image instanceof ImageAsset) {
             img = image.native;
         }
         else if (image instanceof Canvas) {
-            img = image.android;
+            img = image.native;
         }
         else if (image && typeof image.tagName === 'string' && (image.tagName === 'IMG' || image.tagName === 'IMAGE')) {
-            if (image._imageSource instanceof ImageSource) {
-                img = image._imageSource.android;
-            }
-            else if (image._image instanceof android.graphics.Bitmap) {
+            if (image._image instanceof android.graphics.Bitmap) {
                 img = image._image;
             }
             else if (image._asset instanceof ImageAsset) {
@@ -564,47 +357,33 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
             }
         }
         else if (image && typeof image.tagName === 'string' && image.tagName === 'CANVAS' && image._canvas instanceof Canvas) {
-            img = image._canvas.android;
+            img = image._canvas.native;
         }
-        else if (image instanceof ImageBitmap || image?.nativeInstance instanceof org.nativescript.canvas.TNSImageBitmap) {
+        else if (image instanceof ImageBitmap) {
             img = image.native;
         }
         if (!img) {
             return null;
         }
-        let rep;
-        switch (repetition) {
-            case 'no-repeat':
-                rep = PatternRepetition.NoRepeat();
-                break;
-            case 'repeat-x':
-                rep = PatternRepetition.RepeatX();
-                break;
-            case 'repeat-y':
-                rep = PatternRepetition.RepeatY();
-                break;
-            default:
-                rep = PatternRepetition.Repeat();
-                break;
-        }
-        return new CanvasPattern(this.context.createPattern(img, rep));
+        return new CanvasPattern(createPattern(img, repetition));
     }
     createRadialGradient(x0, y0, r0, x1, y1, r1) {
         this.log('createRadialGradient value:', x0, y0, r0, x1, y1, r1);
         this._ensureLayoutBeforeDraw();
-        return CanvasGradient.fromNative(this.context.createRadialGradient(x0, y0, r0, x1, y1, r1));
-    }
-    createConicGradient(startAngle, x, y) {
-        this.log('createConicGradient value:', startAngle, x, y);
-        this._ensureLayoutBeforeDraw();
-        return CanvasGradient.fromNative(this.context.createConicGradient(startAngle, x, y));
+        const createRadialGradient = this._getMethod('createRadialGradient');
+        return CanvasGradient.fromNative(createRadialGradient(x0, y0, r0, x1, y1, r1));
     }
     drawFocusIfNeeded(...args) { }
     drawImage(...args) {
+        var _a;
         this.log('drawImage value:', ...args);
         this._ensureLayoutBeforeDraw();
+        const drawImage = this._getMethod('drawImage');
         let image = args[0];
-        if (image instanceof ImageAsset) {
+        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) {
+            image = image.native;
+        }
+        else if (image instanceof ImageAsset) {
             image = image.native;
         }
         else if (image instanceof ImageSource) {
@@ -614,7 +393,7 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
             image = image;
         }
         else if (image instanceof Canvas) {
-            image = image.android;
+            image = image.native;
         }
         else if (image && typeof image.tagName === 'string' && (image.tagName === 'IMG' || image.tagName === 'IMAGE')) {
             if (image._imageSource instanceof ImageSource) {
@@ -633,110 +412,115 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         else if (image && typeof image.tagName === 'string' && image.tagName === 'CANVAS' && image._canvas instanceof Canvas) {
             image = image._canvas.android;
         }
-        else if (image instanceof ImageBitmap || image?.nativeInstance instanceof org.nativescript.canvas.TNSImageBitmap) {
+        else if (image instanceof ImageBitmap) {
             image = image.native;
         }
         if (args.length === 3) {
-            this.context.drawImage(image, args[1], args[2]);
+            drawImage(image, args[1], args[2]);
         }
         else if (args.length === 5) {
-            this.context.drawImage(image, args[1], args[2], args[3], args[4]);
+            drawImage(image, args[1], args[2], args[3], args[4]);
         }
         else if (args.length === 9) {
-            this.context.drawImage(image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
+            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.log('ellipse value:', x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
         this._ensureLayoutBeforeDraw();
-        this.context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+        const ellipse = this._getMethod('ellipse');
+        ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
     }
     fill(...args) {
         this.log('fill value:', ...args);
         this._ensureLayoutBeforeDraw();
-        if (arguments.length === 0) {
-            this.context.fill();
-            return;
-        }
+        const fill = this._getMethod('fill');
         if (typeof args[0] === 'string') {
-            const rule = this._fillRuleFromString(args[0]);
-            this.context.fill(rule);
+            fill(args[0]);
         }
         else if (args[0] instanceof Path2D && typeof args[1] === 'string') {
-            const rule = this._fillRuleFromString(args[1]);
-            this.context.fill(args[0].native, rule);
+            fill(args[0].native, args[1]);
         }
         else if (args[0] instanceof Path2D) {
-            this.context.fill(args[0].native);
+            fill(args[0].native);
         }
         else {
-            this.context.fill();
+            fill();
         }
     }
     fillRect(x, y, width, height) {
         this.log('fillRect value:', x, y, width, height);
         this._ensureLayoutBeforeDraw();
-        this.context.fillRect(x, y, width, height);
+        const fillRect = this._getMethod('fillRect');
+        fillRect(x, y, width, height);
     }
     fillText(text, x, y, maxWidth) {
         this.log('fillText value:', text, x, y, maxWidth);
         this._ensureLayoutBeforeDraw();
+        const fillText = this._getMethod('fillText');
         if (typeof maxWidth === 'number') {
-            this.context.fillText(text + '', x, y, maxWidth);
+            fillText(text + '', x, y, maxWidth);
         }
         else {
-            this.context.fillText(text + '', x, y);
+            fillText(text + '', x, y);
         }
     }
     getImageData(sx, sy, sw, sh) {
         this.log('getImageData value:', sx, sy, sw, sh);
         this._ensureLayoutBeforeDraw();
-        return ImageData.fromNative(this.context.getImageData(sx, sy, sw, sh));
+        const getImageData = this._getMethod('getImageData');
+        return ImageData.fromNative(getImageData(sx, sy, sw, sh));
     }
     getLineDash() {
         this.log('getLineDash');
         this._ensureLayoutBeforeDraw();
-        return this.context.getLineDash();
+        const getLineDash = this._getMethod('getLineDash');
+        return getLineDash();
     }
     isPointInPath(...args) {
         this.log('isPointInPath value:', ...args);
         this._ensureLayoutBeforeDraw();
+        const isPointInPath = this._getMethod('isPointInPath');
         if (args.length === 2) {
-            return this.context.isPointInPath(args[0], args[1]);
+            return isPointInPath(args[0], args[1]);
         }
         else if (args.length === 3) {
-            return this.context.isPointInPath(args[0], args[1], args[2]);
+            return isPointInPath(args[0], args[1], args[2]);
         }
         else if (args.length === 4 && args[0] instanceof Path2D) {
-            return this.context.isPointInPath(args[0].native, args[1], args[2], args[3]);
+            return isPointInPath(args[0].native, args[1], args[2], args[3]);
         }
         return false;
     }
     isPointInStroke(...args) {
         this.log('isPointInStroke value:', ...args);
         this._ensureLayoutBeforeDraw();
+        const isPointInStroke = this._getMethod('isPointInStroke');
         if (args.length === 2) {
-            return this.context.isPointInStroke(args[0], args[1]);
+            return isPointInStroke(args[0], args[1]);
         }
         else if (args.length === 3 && args[0] instanceof Path2D) {
-            return this.context.isPointInStroke(args[0].native, args[1], args[2]);
+            return isPointInStroke(args[0].native, args[1], args[2]);
         }
         return false;
     }
     lineTo(x, y) {
         this.log('lineTo value:', x, y);
         this._ensureLayoutBeforeDraw();
-        this.context.lineTo(x, y);
+        const lineTo = this._getMethod('lineTo');
+        lineTo(x, y);
     }
     measureText(text) {
         this.log('measureText value:', text);
         this._ensureLayoutBeforeDraw();
-        return new TextMetrics(this.context.measureText(text));
+        const measureText = this._getMethod('measureText');
+        return new TextMetrics(measureText(text));
     }
     moveTo(x, y) {
         this.log('moveTo value:', x, y);
         this._ensureLayoutBeforeDraw();
-        this.context.moveTo(x, y);
+        const moveTo = this._getMethod('moveTo');
+        moveTo(x, y);
     }
     putImageData(...args) {
         this.log('putImageData value:', ...args);
@@ -744,105 +528,110 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
         if (!args) {
             return;
         }
+        const putImageData = this._getMethod('putImageData');
         let data = args[0];
         if (args.length === 3) {
-            this.context.putImageData(data.native, args[1], args[2]);
+            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]);
+            putImageData(data.native, args[1], args[2], args[3], args[4], args[5], args[6]);
         }
     }
     quadraticCurveTo(cpx, cpy, x, y) {
         this.log('quadraticCurveTo value:', cpx, cpy, x, y);
         this._ensureLayoutBeforeDraw();
-        this.context.quadraticCurveTo(cpx, cpy, x, y);
+        const quadraticCurveTo = this._getMethod('quadraticCurveTo');
+        quadraticCurveTo(cpx, cpy, x, y);
     }
     rect(x, y, width, height) {
         this.log('rect value:', x, y, width, height);
         this._ensureLayoutBeforeDraw();
-        this.context.rect(x, y, width, height);
-    }
-    roundRect(x, y, width, height, radii) {
-        this.log('roundRect value:', x, y, width, height, radii);
-        this._ensureLayoutBeforeDraw();
-        if (Array.isArray(radii)) {
-            this.context.roundRect(x, y, width, height, radii);
-        }
-        else if (typeof radii === 'number') {
-            this.context.roundRect(x, y, width, height, radii);
-        }
+        const rect = this._getMethod('rect');
+        rect(x, y, width, height);
     }
     removeHitRegion(id) { }
     resetTransform() {
         this.log('resetTransform value:');
         this._ensureLayoutBeforeDraw();
-        this.context.resetTransform();
+        const resetTransform = this._getMethod('resetTransform');
+        resetTransform();
     }
     restore() {
         this.log('restore');
         this._ensureLayoutBeforeDraw();
-        this.context.restore();
+        const restore = this._getMethod('restore');
+        restore();
     }
     rotate(angle) {
         this.log('rotate value:', angle);
         this._ensureLayoutBeforeDraw();
-        this.context.rotate(angle);
+        const rotate = this._getMethod('rotate');
+        rotate(angle);
     }
     save() {
         this.log('save');
         this._ensureLayoutBeforeDraw();
-        this.context.save();
+        const save = this._getMethod('save');
+        save();
     }
     scale(x, y) {
         this.log('scale value:', x, y);
         this._ensureLayoutBeforeDraw();
-        this.context.scale(x, y);
+        const scale = this._getMethod('scale');
+        scale(x, y);
     }
     scrollPathIntoView(path) { }
     setLineDash(segments) {
         this.log('setLineDash value:', segments);
         this._ensureLayoutBeforeDraw();
-        this.context.setLineDash(segments);
+        const setLineDash = this._getMethod('setLineDash');
+        setLineDash(segments);
     }
     setTransform(a, b, c, d, e, f) {
         this.log('setTransform value:', a, b, c, d, e, f);
         this._ensureLayoutBeforeDraw();
-        this.context.setTransform(a, b, c, d, e, f);
+        const setTransform = this._getMethod('setTransform');
+        setTransform(a, b, c, d, e, f);
     }
     stroke(path) {
         this.log('stroke value:', path);
         this._ensureLayoutBeforeDraw();
+        const stroke = this._getMethod('stroke');
         if (path) {
-            this.context.stroke(path.native);
+            stroke(path.native);
         }
         else {
-            this.context.stroke();
+            stroke();
         }
     }
     strokeRect(x, y, width, height) {
         this.log('strokeRect value:', x, y, width, height);
         this._ensureLayoutBeforeDraw();
-        this.context.strokeRect(x, y, width, height);
+        const strokeRect = this._getMethod('strokeRect');
+        strokeRect(x, y, width, height);
     }
     strokeText(text, x, y, maxWidth) {
         this.log('strokeText value:', text, x, y, maxWidth);
         this._ensureLayoutBeforeDraw();
+        const strokeText = this._getMethod('strokeText');
         if (typeof maxWidth === 'number') {
-            this.context.strokeText(text + '', x, y, maxWidth);
+            strokeText(text + '', x, y, maxWidth);
         }
         else {
-            this.context.strokeText(text + '', x, y);
+            strokeText(text + '', x, y);
         }
     }
     transform(a, b, c, d, e, f) {
         this.log('transform value:', a, b, c, d, e, f);
         this._ensureLayoutBeforeDraw();
-        this.context.transform(a, b, c, d, e, f);
+        const transform = this._getMethod('transform');
+        transform(a, b, c, d, e, f);
     }
     translate(x, y) {
         this.log('translate value:', x, y);
         this._ensureLayoutBeforeDraw();
-        this.context.translate(x, y);
+        const translate = this._getMethod('translate');
+        translate(x, y);
     }
     _ensureLayoutBeforeDraw() {
         if (this.canvas) {
@@ -857,4 +646,9 @@ export class CanvasRenderingContext2D extends CanvasRenderingContext2DBase {
     }
 }
 CanvasRenderingContext2D.isDebug = false;
+(() => {
+    Helpers.initialize();
+    //ctor = global.CanvasJSIModule.create2DContext;
+    ctor = global.CanvasJSIModule.create2DContextWithPointer;
+})();
 //# sourceMappingURL=index.android.js.map