chore: updates

packages/canvas-babylon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-babylon",
-  "version": "2.0.0-alpha.47",
+  "version": "2.0.0-alpha.48",
   "description": "",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-chartjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-chartjs",
-  "version": "2.0.0-alpha.47",
+  "version": "2.0.0-alpha.48",
   "description": "ChartJS",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-media/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-media",
-  "version": "2.0.0-alpha.47",
+  "version": "2.0.0-alpha.48",
   "description": "Canvas media",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-phaser-ce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-phaser-ce",
-  "version": "2.0.0-alpha.47",
+  "version": "2.0.0-alpha.48",
   "description": "Tools for using Phaser-ce to build native 2D games in NativeScript 👾",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-phaser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-phaser",
-  "version": "2.0.0-alpha.47",
+  "version": "2.0.0-alpha.48",
   "description": "Build awesome 2D games with Phaser.js and NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-pixi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-pixi",
-  "version": "2.0.0-alpha.47",
+  "version": "2.0.0-alpha.48",
   "description": "Plugin for using pixi.js in NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-polyfill/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-polyfill",
-  "version": "2.0.0-alpha.47",
+  "version": "2.0.0-alpha.48",
   "description": "Polyfill for making NativeScript compatible with web libs like pixi.js, three.js, phaser.js, babylon.js, etc....",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-three/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-three",
-  "version": "2.0.0-alpha.47",
+  "version": "2.0.0-alpha.48",
   "description": "Utilities for using THREE.js on NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas/Canvas/index.android.ts

@@ -41,23 +41,29 @@ export class Canvas extends CanvasBase {
 	private _contextType = ContextType.None;
 	private _is2D = false;
 	private _isBatch = false;
-	constructor() {
+	constructor(nativeInstance?) {
 		super();
-		const activity = Application.android.foregroundActivity || Application.android.startActivity || Utils.android.getApplicationContext();
-		this._canvas = new org.nativescript.canvas.NSCCanvas(activity);
-		(global as any).__canvasLoaded = true;
-		const ref = new WeakRef(this);
-		this._canvas.setTouchEventListener(
-			new org.nativescript.canvas.NSCCanvas.TouchEvents({
-				onEvent(event: string, nativeEvent: android.view.MotionEvent) {
-					const owner = ref.get();
-					if (!owner) {
-						return;
-					}
-					owner._handleEvents(event);
-				},
-			})
-		);
+		if (nativeInstance) {
+			// allows Worker usage
+			this._canvas = nativeInstance;
+			(global as any).__canvasLoaded = true;
+		} else {
+			const activity = Application.android.foregroundActivity || Application.android.startActivity || Utils.android.getApplicationContext();
+			this._canvas = new org.nativescript.canvas.NSCCanvas(activity);
+			(global as any).__canvasLoaded = true;
+			const ref = new WeakRef(this);
+			this._canvas.setTouchEventListener(
+				new org.nativescript.canvas.NSCCanvas.TouchEvents({
+					onEvent(event: string, nativeEvent: android.view.MotionEvent) {
+						const owner = ref.get();
+						if (!owner) {
+							return;
+						}
+						owner._handleEvents(event);
+					},
+				})
+			);
+		}
 	}
 
 	[upscaleProperty.setNative](value: boolean) {

packages/canvas/Canvas/index.ios.ts

@@ -46,46 +46,52 @@ export class Canvas extends CanvasBase {
 	private _isBatch = false;
 	_didLayout = false;
 
-	constructor() {
+	constructor(nativeInstance?) {
 		super();
-		this._canvas = NSCCanvas.alloc().initWithFrame(CGRectZero);
-		this._canvas.userInteractionEnabled = true;
-		const ref = new WeakRef(this);
-		const listener = (NSObject as any).extend(
-			{
-				contextReady() {
-					if (!this._isReady) {
-						const owner = ref.get();
-						if (owner) {
-							owner._readyEvent();
-							this._isReady = true;
+		if (nativeInstance) {
+			// allows Worker usage
+			this._canvas = nativeInstance;
+			(global as any).__canvasLoaded = true;
+		} else {
+			this._canvas = NSCCanvas.alloc().initWithFrame(CGRectZero);
+			this._canvas.userInteractionEnabled = true;
+			const ref = new WeakRef(this);
+			const listener = (NSObject as any).extend(
+				{
+					contextReady() {
+						if (!this._isReady) {
+							const owner = ref.get();
+							if (owner) {
+								owner._readyEvent();
+								this._isReady = true;
+							}
 						}
-					}
+					},
 				},
-			},
-			{
-				protocols: [NSCCanvasListener],
-			}
-		);
-		this._readyListener = listener.new();
-		this._canvas.setListener(this._readyListener);
-		this._canvas.enterBackgroundListener = () => {
-			if (!this.native) {
-				return;
-			}
-			this.native.__stopRaf();
-		};
+				{
+					protocols: [NSCCanvasListener],
+				}
+			);
+			this._readyListener = listener.new();
+			this._canvas.setListener(this._readyListener);
+			this._canvas.enterBackgroundListener = () => {
+				if (!this.native) {
+					return;
+				}
+				this.native.__stopRaf();
+			};
 
-		this._canvas.becomeActiveListener = () => {
-			if (!this.native) {
-				return;
-			}
-			this.native.__startRaf();
-		};
+			this._canvas.becomeActiveListener = () => {
+				if (!this.native) {
+					return;
+				}
+				this.native.__startRaf();
+			};
 
-		this._canvas.touchEventListener = (event, recognizer) => {
-			this._handleEvents(event);
-		};
+			this._canvas.touchEventListener = (event, recognizer) => {
+				this._handleEvents(event);
+			};
+		}
 	}
 
 	[ignorePixelScalingProperty.setNative](value: boolean) {
@@ -120,6 +126,9 @@ export class Canvas extends CanvasBase {
 	}
 
 	set width(value) {
+		if (value === this.style.width) {
+			return;
+		}
 		this.style.width = value;
 		this._didLayout = false;
 		this._layoutNative(true);
@@ -135,6 +144,9 @@ export class Canvas extends CanvasBase {
 	}
 
 	set height(value) {
+		if (value === this.style.height) {
+			return;
+		}
 		this.style.height = value;
 		this._didLayout = false;
 		this._layoutNative(true);

packages/canvas/Canvas2D/CanvasRenderingContext2D/index.ts

@@ -12,6 +12,17 @@ import { Helpers } from '../../helpers';
 let ctor;
 declare const NSCCanvasRenderingContext2D;
 
+function ruleToEnum(rule: string): number {
+	switch (rule) {
+		case 'nonzero':
+			return 0;
+		case 'evenodd':
+			return 1;
+		default:
+			return -1; // will be ignored
+	}
+}
+
 export class CanvasRenderingContext2D {
 	public static isDebug = true;
 	private context;
@@ -277,9 +288,9 @@ export class CanvasRenderingContext2D {
 
 	clip(...args: any): void {
 		if (typeof args[0] === 'string') {
-			this.context.clip(args[0]);
+			this.context.clip(ruleToEnum(args[0]));
 		} else if (args[0] instanceof Path2D && typeof args[1] === 'string') {
-			this.context.clip(args[0].native, args[1]);
+			this.context.clip(args[0].native, ruleToEnum(args[1]));
 		} else if (args[0] instanceof Path2D) {
 			this.context.clip(args[0].native);
 		} else {
@@ -525,7 +536,7 @@ export class CanvasRenderingContext2D {
 	}
 
 	ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: boolean = false): void {
-		this.context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+		this.context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise ?? false);
 	}
 
 	fill(): void;
@@ -536,9 +547,9 @@ export class CanvasRenderingContext2D {
 
 	fill(...args: any): void {
 		if (typeof args[0] === 'string') {
-			this.context.fill(args[0]);
+			this.context.fill(ruleToEnum(args[0]));
 		} else if (args[0] instanceof Path2D && typeof args[1] === 'string') {
-			this.context.fill(args[0].native, args[1]);
+			this.context.fill(args[0].native, ruleToEnum(args[1]));
 		} else if (args[0] instanceof Path2D) {
 			this.context.fill(args[0].native);
 		} else {
@@ -574,9 +585,9 @@ export class CanvasRenderingContext2D {
 		if (args.length === 2) {
 			return this.context.isPointInPath(args[0], args[1]);
 		} else if (args.length === 3) {
-			return this.context.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 this.context.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;
 	}
@@ -617,7 +628,7 @@ export class CanvasRenderingContext2D {
 			return;
 		}
 
-		let data = args[0] as any;
+		const data = args[0] as any;
 		if (args.length === 3) {
 			this.context.putImageData(data.native, args[1], args[2]);
 		} else if (args.length === 7) {

packages/canvas/Canvas2D/Path2D/index.ts

@@ -2,27 +2,24 @@ import { DOMMatrix } from '../DOMMatrix';
 
 import { Helpers } from '../../helpers';
 
-let ctor;
+
 export class Path2D {
 	static {
 		Helpers.initialize();
-		ctor = global.CanvasModule.Path2D;
 	}
 
 	_native;
 	constructor(instance?: any) {
 		let nativeInstance;
 		if (!instance) {
-			nativeInstance = new ctor();
+			nativeInstance = new global.CanvasModule.Path2D();
 			this._native = nativeInstance;
 			return this;
 		}
 		if (typeof instance === 'string') {
-			nativeInstance = new ctor(instance);
+			nativeInstance = new global.CanvasModule.Path2D(instance);
 		} else if (instance instanceof Path2D) {
-			nativeInstance = new ctor(instance.native);
-		} else {
-			nativeInstance = new ctor();
+			nativeInstance = new global.CanvasModule.Path2D(instance.native);
 		}
 		this._native = nativeInstance;
 	}
@@ -43,7 +40,7 @@ export class Path2D {
 
 	arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean = false): void {
 		//const arc = this._getMethod('arc');
-		this.native.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+		this.native.arc(x, y, radius, startAngle, endAngle, anticlockwise ?? false);
 	}
 
 	arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void {
@@ -63,7 +60,7 @@ export class Path2D {
 
 	ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: boolean = false): void {
 		//const ellipse = this._getMethod('ellipse');
-		this.native.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+		this.native.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise ?? false);
 	}
 
 	lineTo(x: number, y: number): void {

packages/canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas",
-  "version": "2.0.0-alpha.47",
+  "version": "2.0.0-alpha.48",
   "description": "DOM Canvas API for NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas/platforms/ios/src/cpp/canvas2d/CanvasPattern.cpp

@@ -66,8 +66,6 @@ void CanvasPattern::SetTransform(const v8::FunctionCallbackInfo<v8::Value> &args
         return;
     }
 
-    auto isolate = args.GetIsolate();
-
     auto value = args[0];
     auto type = GetNativeType( value);