feat: v8 refactor

apps/demo/src/app.ts

@@ -1,14 +1,38 @@
-//require('@nativescript/canvas-polyfill');
+import { Helpers } from '@nativescript/canvas/helpers';
+Helpers.initialize();
+require('@nativescript/canvas-polyfill');
 // import { CanvasRenderingContext2D } from '@nativescript/canvas';
 declare const jp, GDPerformanceMonitor;
 let monitor;
-
+import { Canvas } from '@nativescript/canvas';
 import { Application, path as filePath, knownFolders, Utils, path as nsPath, ImageSource, Trace } from '@nativescript/core';
 
 Application.on('discardedError', (args) => {
 	console.log(args.error);
 });
 
+// 0.253ms 1
+// 0.438ms 10
+// 17.375ms 100
+// 27.237ms 1000
+
+/// 35764.462ms 1_000_000
+
+/// 2.068ms 1
+// 0.354ms 10
+// 0.600ms 100
+// 3.155ms 1000
+
+// 4243.135ms 1_000_000
+// 3631.408ms 1_000_000 ... before ctor update
+
+/*
+JSI
+ JS: CONSOLE TIME: TextEncoder: 2.423ms
+  JS: CONSOLE TIME: TextDecoder: 0.646ms
+*/
+
+// : CONSOLE TIME: data: 4.250ms image data
 Application.on('launch', (args) => {
 	require('@nativescript/canvas-polyfill');
 	if (global.isAndroid) {
@@ -23,6 +47,83 @@ Application.on('launch', (args) => {
 		monitor.appVersionHidden = true;
 		monitor.deviceVersionHidden = true;
 	}
+
+	const paths = new Array(10);
+	const length = paths.length;
+	console.time('data');
+	for (let i = 0; i < length; i++) {
+		const id = new ImageData(1000, 1000);
+		const size = id.width + id.height;
+		const length = id.data.length;
+	}
+	console.timeEnd('data');
+});
+
+Application.android.on('activityCreated', (args) => {
+	const canvas = Canvas.createCustomView();
+	const context = canvas.getContext('2d');
+	console.log(canvas.width, canvas.height);
+
+	const ctx = canvas.getContext('2d') as never as CanvasRenderingContext2D;
+
+	console.time('fill');
+	const fill = ctx.fillStyle;
+	console.timeEnd('fill');
+
+	//console.log(context.measureText('Osei Fortune'));
+	//console.log(context.createImageData(100,100));
+
+	// Create path
+	let region = new Path2D() as any;
+	region.moveTo(30, 90);
+	region.lineTo(110, 20);
+	region.lineTo(240, 130);
+	region.lineTo(60, 130);
+	region.lineTo(190, 20);
+	region.lineTo(270, 90);
+	region.closePath();
+
+	let path = new Path2D() as any;
+	path.addPath(region);
+
+	console.log('new', path.__toSVG());
+
+	/*
+	  JS: CONSOLE LOG: M30 90L110 20L240 130L60 130L190 20L270 90L30 90Z
+  JS: CONSOLE TIME: svg: 1.376ms
+  */
+
+	/*
+    JS: CONSOLE LOG: 300 150
+  JS: CONSOLE LOG: M30 90L110 20L240 130L60 130L190 20L270 90L30 90Z
+  JS: CONSOLE TIME: svg: 0.819ms
+  JS: CONSOLE LOG: M30 90L110 20L240 130L60 130L190 20L270 90L30 90Z
+  JS: CONSOLE TIME: svg: 0.424ms
+  */
+
+	console.time('svg');
+	console.log(region.__toSVG());
+	console.timeEnd('svg');
+
+	setTimeout(() => {
+		const r = new Path2D(region) as any;
+		console.time('svg1');
+		console.log(r.__toSVG());
+		console.timeEnd('svg1');
+	}, 1000);
+
+	setTimeout(() => {
+		const r = new Path2D(region) as any;
+		console.time('svg2');
+		console.log(r.__toSVG());
+		console.timeEnd('svg2');
+	}, 1500);
+
+	// Fill path
+	ctx.fillStyle = 'green';
+	ctx.fill(region, 'evenodd');
+	//ctx.fillRect(0, 0, 100, 100);
+	android.util.Log.d('JS', canvas.toDataURL());
 });
 
 Application.run({ moduleName: 'app-root' });

packages/canvas/Canvas/index.android.ts

@@ -3,7 +3,7 @@ import { DOMMatrix } from '../Canvas2D';
 import { CanvasRenderingContext2D } from '../Canvas2D/CanvasRenderingContext2D';
 import { WebGLRenderingContext } from '../WebGL/WebGLRenderingContext';
 import { WebGL2RenderingContext } from '../WebGL2/WebGL2RenderingContext';
-import { Application, View, profile, Device, Screen, knownFolders, ImageSource } from '@nativescript/core';
+import { Application, View, profile, Device, Screen, knownFolders, ImageSource, Utils } from '@nativescript/core';
 export function createSVGMatrix(): DOMMatrix {
 	return new DOMMatrix();
 }
@@ -222,13 +222,13 @@ export class Canvas extends CanvasBase {
 	}
 
 	toDataURL(type = 'image/png', encoderOptions = 0.92) {
-		const toDataURL = this._getMethod('__toDataURL');
+		//const toDataURL = this._getMethod('__toDataURL');
 
-		if (toDataURL === undefined) {
-			return 'data:,';
-		}
+		// if (toDataURL === undefined) {
+		// 	return 'data:,';
+		// }
 
-		return toDataURL(type, encoderOptions);
+		return this.native.__toDataURL(type, encoderOptions);
 	}
 
 	snapshot(flip: boolean = false): ImageSource | null {
@@ -302,9 +302,7 @@ export class Canvas extends CanvasBase {
 					//	this._canvas.initContext(type, opts.alpha, opts.antialias, opts.depth, opts.failIfMajorPerformanceCaveat, opts.powerPreference, opts.premultipliedAlpha, opts.preserveDrawingBuffer, opts.desynchronized, opts.xrCompatible);
 
 					const ctx = this._canvas.create2DContext(opts.alpha, opts.antialias, opts.depth, opts.failIfMajorPerformanceCaveat, opts.powerPreference, opts.premultipliedAlpha, opts.preserveDrawingBuffer, opts.stencil, opts.desynchronized, opts.xrCompatible, opts.fontColor);
-
 					this._2dContext = new (CanvasRenderingContext2D as any)(ctx);
-
 					//this._2dContext = new (CanvasRenderingContext2D as any)(this._canvas, opts);
 
 					// // @ts-ignore

packages/canvas/Canvas/index.d.ts

@@ -40,6 +40,13 @@ export declare class Canvas extends CanvasBase {
 
 	toDataURL(type?: string, encoderOptions?: number): any;
 
+
+	getContext(type: '2d', options?: any): CanvasRenderingContext2D | null;
+
+	getContext(type: 'webgl', options?: any): WebGLRenderingContext | null;
+
+	getContext(type: 'webgl2', options?: any): WebGL2RenderingContext | null;
+
 	getContext(type: string, options?: any): CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext | null;
 
 	getBoundingClientRect(): {