nativescript / canvas Goto Github PK

License: Apache License 2.0

Ruby 0.04% Swift 0.86% TypeScript 11.49% HTML 0.02% JavaScript 28.26% SCSS 0.03% Vue 0.08% Kotlin 1.20% Objective-C 0.59% C 6.86% Rust 12.92% PLSQL 0.11% Shell 0.19% Java 0.22% Objective-C++ 0.02% C++ 37.03% CMake 0.07% Python 0.01% CSS 0.01%

canvas's Introduction

@nativescript/canvas* plugins

npm run setup
npm start

How to use?

This workspace manages the suite of plugins listed above.

In general, when in doubt with what to do, just npm start.

npm run setup
npm start

// Ensure all plugins build properly first
> type "build-all" (and hit ENTER)

If you don't build all the plugins, you will at least need to build localize to run the demos because it contains hooks that need to be built first.

If building only localize, type: npm start > localize (this will narrow down menu to @nativescript.localize.build) and then hit 'enter'. You can now run the demo apps.

In general, when in doubt with what to do, just npm start.

How to add a new package to workspace?

npm run add

At the prompt, enter the name of the new package.

This adds a plugin harness in packages with the necessary boilerplate to just start developing
Updates all demo app flavors to support demoing the new package
Adds shared code in tools/demo where you can write demo code once and share across all demo flavors
Updates build tooling to support the new package
Updates the npm start interactive display
Updates the README here to list the new package

How to add Angular compatibility to a package

npm run add-angular

At the prompt, enter the name of the package to add an angular folder to it with the necessary boilerplate to provide Angular support to the package.

How to focus on just 1 package to develop in isolation

npm start

Choose the focus commands for the package you wish to focus on and hit enter.
All the demo app's will be updated to isolate that 1 package and for supported IDE's (currently VS Code), the source code will also become isolated in the workspace.

Note: good to always clean the demo you plan to run after focusing. (You can clean any demo from npm start as well)

How to publish packages?

npm run publish-packages

You will be prompted for the package names to publish. Leaving blank and hitting enter will publish them all.
You will then be prompted for the version to use. Leaving blank will auto bump the patch version (it also handles prerelease types like alpha, beta, rc, etc. - It even auto tags the corresponding prelease type on npm).
You will then be given a brief sanity check 🧠😊

Made with ❤️

canvas's People

Contributors

Stargazers

Watchers

Forkers

kbryan lostation farfromrefug implicit-invocation brianrclow facetious fredlim catchabus global-localhost global19 global19-atlassian-net lhongjum ombuweb nativescript-community cjohn001 ammarahm-ed herefishyfish vallemar

canvas's Issues

Swipe jesture after unlocking iPhone leads to crash Cannot read property '8' of null

  "dependencies": {
    "@nativescript/canvas": "1.0.0-alpha.2",
    "@nativescript/canvas-phaser": "^1.0.0-beta.0",
    "@nativescript/canvas-polyfill": "^1.0.0-beta.0",
    "@nativescript/core": "~8.1.1",
    "@nativescript/theme": "~3.0.1",
    "phaser": "3.55.2"
  },

app.ts

import { Application } from '@nativescript/core'
import '@nativescript/canvas-polyfill';

main-page.xml

<Page xmlns:canvas="@nativescript/canvas">
    <GridLayout width="100%" height="100%">
        <canvas:Canvas width="100%" height="100%" id="canvas" ready="onCanvasReady"/>
    </GridLayout>
</Page>

STR:
after the app launches, lock iPhone
unlock iPhone
swipe up on the canvas

AR:

***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught TypeError: Cannot read property '8' of null
at
emitEvent(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript-community/gesturehandler/gestures_override.js:95:0)
at (file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript-community/gesturehandler/gestures_override.js:121:0)
at _handleEvent(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/data/observable/index.js:230:0)
at notify(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/data/observable/index.js:216:0)
at HandlerDelegate.gestureHandlerDidChangeStatePrevStateExtraDataView(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript-community/gesturehandler/gesturehandler.ios.js:107:0)
*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught TypeError: Cannot read property '8' of null
at
emitEvent(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript-community/gesturehandler/gestures_override.js:95:0)
at (file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript-community/gesturehandler/gestures_override.js:121:0)
at _handleEvent(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/data/observable/index.js:230:0)
at notify(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/data/observable/index.js:216:0)
at HandlerDelegate.gestureHandlerDidChangeStatePrevStateExtraDataView(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript-community/gesturehandler/gesturehandler.ios.js:107:0)
', reason: '(null)'
*** First throw call stack:
(0x1a9efb25c 0x1bdc90480 0x1010460b8 0x1013c26e4 0x1013c2550 0x1013032b8 0x10125baa4 0x10125b058 0x1010ae50c 0x100f88794 0x10107b974 0x10107c1b4 0x1005ef40c 0x1005ef268 0x1ac31f93c 0x1ac328e78 0x1ac325ae8 0x1ac3250b0 0x1ac319718 0x1ac318aa8 0x1ac7e2d90 0x1ac7be9d8 0x1ac841db4 0x1ac8465d8 0x1ac83d8c4 0x1a9e7a8a8 0x1a9e7a7a8 0x1a9e79afc 0x1a9e74018 0x1a9e737d0 0x1c05b5570 0x1ac7a02d0 0x1ac7a584c 0x10107c044 0x10107b1d8 0x10101d854 0x100fdfb9c 0x101040e68 0x10103b088 0x1005ead50 0x1a9b52140)

nativescript-vue with canvas-three

Hi ^^
Is there any roadmap for the THREE plugin development ?
I'd like to use it in a nativescript-vue js project.

Thx !

Error when trying to draw pattern

I want to draw a pattern on canvas. Using following code:

ImageSource.fromUrl('https://mdn.mozillademos.org/files/222/Canvas_createpattern.png')
  .then(function (img) {
    ctx.fillStyle = ctx.createPattern(img, 'repeat');
    ctx.fillRect(0, 0, 300, 300);
  });

Got an error:

JS: ERROR Error: Uncaught (in promise): Error: java.lang.NullPointerException: Parameter specified as non-null is null: method kotlin.jvm.internal.Intrinsics.checkNotNullParameter, parameter value
JS: set fillStyle(file: src/webpack:/diamonds/node_modules/@nativescript/canvas/Canvas2D/CanvasRenderingContext2D/index.android.js:413:0)
JS:     at (file: src/webpack:/diamonds/src/app/app.component.ts:110:0)
JS:     at invoke(file: src/webpack:/diamonds/node_modules/zone.js/fesm2015/zone.js:372:0)
JS:     at onInvoke(file: src/webpack:/diamonds/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:28673:0)
JS:     at invoke(file: src/webpack:/diamonds/node_modules/zone.js/fesm2015/zone.js:371:0)
JS:     at run(file: src/webpack:/diamonds/node_modules/zone.js/fesm2015/zone.js:134:0)
JS:     at (file: src/webpack:/diamonds/node_modules/zone.js/fesm2015/zone.js:1276:0)
JS:     at invokeTask(file: src/webpack:/diamonds/node_modules/zone.js/fesm2015/zone.js:406:0)
JS:     at onInvokeTask(file: src/webpack:/diamonds/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:28660:0)
JS:     at invokeTask(file:///data/dat...

NativeScript: 8.1.3
Angular: 12.2.0
@nativescript/canvas: 1.0.0-alpha.2

What is wrong?

Phaser-ce loader stuck with any type of asset

First of all, nice job on the plugins. I was trying to setup a phaser game running on nativescript but I've stumbled upon a problem. While I did get the canvas running well (I tested out the draw functions and they worked flawlessly) and the phaser game object, I can't seem to get the loader to work properly. I've setup all of the loading events to try and debug the situation but the loader seems to be getting stuck without any errors or logs. Here's my code:

import TNSPhaser from "@nativescript/canvas-phaser-ce";

class State extends Phaser.State {
    preload() {
        console.log("Preload");
        this.game.load.onLoadStart.add(this.loadStart, this);
        this.game.load.onFileError.add(this.loadError, this);
        this.game.load.onFileComplete.add(this.fileComplete, this);
        this.game.load.onLoadComplete.add(this.loadComplete, this);
        this.game.load.onFileStart.add(this.fileStart, this);
        this.game.load.image('test', 'test.jpg');
    }

    fileStart(id) {
        console.log("fileStart", id);
    }

    loadError(err) {
        console.log("loadError");
        console.log(err);
    }

    loadStart() {
        console.log("loadStart");
    }

    fileComplete(result) {
        console.log("fileComplete", result);
    }

    loadComplete() {
        console.log("loadComplete");
    }

    create() {
        console.log("create");
        this.game.add.sprite(0, 0, 'test');
    }
}

export function canvasReady(args) {
    console.log('canvas ready');
    let canvas = args.object;
    let state = new State();
    TNSPhaser.Game({
        canvas,
        renderer: 1,
        state: state
    });
}

The output I'm getting is :
JS: Preload
JS: loadStart
JS: fileStart 0

So the events indicate that the loader actually started but it's not indicating whether the asset has failed to load or has finished loading. Under normal circumstances it should have either loaded the image or thrown an error saying the path is wrong or the file couldn't be found. I've tried giving it a random path string (this.game.load.image('test', 'sdggsdg');) hoping that it would throw an error indicating that the loader is working properly, but it got stuck again without any errors. Is this is a known problem or am I doing something wrong ?

This was tested on a real device:
Model: Blackview A20 Pro.
Android version: 8.1.0

Tab navigation breaks canvas on Android

Home.vue.zip
CanvasTest.vue.zip

In this simple test, Android graphics BufferQueue is lost after switching pages/tabs. It's not a full working demo but should be very easy to repro with what I've provided.

After timeout, orange draws over blue as expected (both platforms).
Page is unloaded and reloaded via tab navigation (BottomNavigation & TabContentItem)...
iOS: Canvas appears the same, orange rectangle in blue.
Android: Canvas has reverted to all blue (background color), and when 'fillRect' is called again I get errors...

06-23 15:42:01.878 15438 15438 I JS : 'draw canvas: Canvas 960x1563'
06-23 15:42:01.884 15438 15752 E BufferQueueProducer: SurfaceTexture-0-15438-0 dequeueBuffer: BufferQueue has been abandoned
06-23 15:42:01.884 15438 15752 E BufferQueueProducer: SurfaceTexture-0-15438-0 dequeueBuffer: BufferQueue has been abandoned
06-23 15:42:01.884 15438 15752 E GLContext: Cannot swap buffers!

NS 6 + Vue
tns version 8.0.2
Dependencies:

┌──────────────────────────────┬────────────┐
│ Plugin                       │ Version    │
│ @nativescript/canvas         │ ^0.9.22-v6 │
│ @nativescript/email          │ ^2.0.4     │
│ crypto-js                    │ ^3.3.0     │
│ lodash.clonedeep             │ ^4.5.0     │
│ lodash.debounce              │ ^4.0.8     │
│ lodash.merge                 │ ^4.6.2     │
│ nativescript-in-app-purchase │ ^1.0.1     │
│ nativescript-plugin-firebase │ ^10.6.3    │
│ nativescript-shadowed-label  │ ^1.0.0     │
│ nativescript-theme-core      │ ~1.0.6     │
│ nativescript-vue             │ ~2.4.0     │
│ tns-core-modules             │ ^6.5.27    │
│ uglifyjs-webpack-plugin      │ ^2.2.0     │
└──────────────────────────────┴────────────┘

Dev Dependencies:

┌────────────────────────────────────┬─────────┐
│ Plugin                             │ Version │
│ @babel/core                        │ ~7.1.0  │
│ @babel/preset-env                  │ ~7.1.0  │
│ atob                               │ ^2.1.2  │
│ babel-loader                       │ ~8.0.0  │
│ nativescript-dev-webpack           │ ^1.5.1  │
│ nativescript-vue-template-compiler │ ~2.4.0  │
│ node-sass                          │ ^4.14.1 │
│ serialize-javascript               │ ^5.0.1  │
│ tns-android                        │ 6.5.3   │
│ tns-ios                            │ 6.5.3   │
│ typescript                         │ ^3.8.3  │
│ vue-loader                         │ ~15.4.0 │
└────────────────────────────────────┴─────────┘

Okhttp needs update for Android 11

As mentionned on this nativescript issue I reported, I had a crash while testing my app on Android 11 API 30 :

StackTrace:
java.lang.ExceptionInInitializerError
	at okhttp3.internal.platform.Platform.get(Platform.java:85)
	at okhttp3.OkHttpClient.newSslSocketFactory(OkHttpClient.java:263)
	at okhttp3.OkHttpClient.<init>(OkHttpClient.java:229)
	at okhttp3.OkHttpClient.<init>(OkHttpClient.java:202)
	at io.socket.engineio.client.Socket.<init>(Socket.java:215)
	at io.socket.engineio.client.Socket.<init>(Socket.java:174)
	at io.socket.client.Manager$Engine.<init>(Manager.java:638)
	at io.socket.client.Manager$1.run(Manager.java:277)
	at io.socket.thread.EventThread.exec(EventThread.java:55)
	at io.socket.client.Manager.open(Manager.java:266)
	at io.socket.client.Manager.open(Manager.java:256)
	at io.socket.client.Socket$3.run(Socket.java:142)
	at io.socket.thread.EventThread$2.run(EventThread.java:80)
	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
	at java.lang.Thread.run(Thread.java:923)
Caused by: java.lang.IllegalStateException: Expected Android API level 21+ but was 30
	at okhttp3.internal.platform.AndroidPlatform.buildIfSupported(AndroidPlatform.java:238)
	at okhttp3.internal.platform.Platform.findPlatform(Platform.java:202)
	at okhttp3.internal.platform.Platform.<clinit>(Platform.java:79)
	... 16 more

Managed to fix it by adding dependencies { implementation 'com.squareup.okhttp3:okhttp:4.9.0' } to the app.gradle,

Apparently the plug-in canvas-three is causing the crash.

Android font issues

✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.0.2 version and is up to date.
⚠ Update available for component @nativescript/core. Your current version is 8.0.7 and the latest available version is 8.0.8.
✖ Component @nativescript/ios is not installed.
✔ Component @nativescript/android has 8.0.0 version and is up to date.

First, setting more than one family in font spec makes canvas ignore the whole spec. So there's no way to specify fallback family.

Second, there doesn't seem to be a way to use custom fonts. Whether I'm specifying family name or file name, it always displays Roboto. If I specify "serif", that works, but being limited to 2 fonts is not exactly ideal.

Also, accepting Android native font instances would be a huge improvement, as it would allow to easily dynamically load fonts.
That, of course, would be a deviation from canvas spec, but drawImage() already accepts android Bitmaps, so it's not that far-fetched.

WebXR Support

Vulkan Support

Documentation

Any documentation on how to use this plugin?

Module not found: Error: Can't resolve 'xmldom-qsa' in .../node_modules/@nativescript/canvas-polyfill

Module not found: Error: Can't resolve 'xmldom-qsa' in '.../node_modules/@nativescript/canvas-polyfill'
resolve 'xmldom-qsa' in '.../node_modules/@nativescript/canvas-polyfill'
Parsed request is a module
using description file: .../node_modules/@nativescript/canvas-polyfill/package.json (relative path: .)
resolve as module
looking for modules in .../node_modules
single file module
using description file: .../package.json (relative path: ./node_modules/xmldom-qsa)
no extension

I installed xmldom-qsa via npm i xmldom-qsa and error was gone. I think it should be in the canvas-polyfill dependencies or peerDependencies

Not working on NSVue

<template lang="pug">
Page(
  actionBarHidden="true"
)
  GridLayout(
    rows="*",
    columns="*"
  )
    Canvas(
      id="canvas"
      width="100%"
      height="100%"
      ready="doCanvasStart"
    )
</template>

<script>
import Vue from 'nativescript-vue'

Vue.registerElement(
  'Canvas',
  () => require('@nativescript/canvas')
    .Canvas
)

export default {
  name: 'DesignSandbox',
  components: {},
  data: () => ({
    canvas: null,
    ctx: null
  }),
  methods: {
    doCanvasStart (args) {
      console.log('canvas ready')
      this.canvas = args.object
      console.log(this.canvas)
      this.ctx = this.canvas.getContext('2d')
      this.ctx.fillStyle = 'green'
      this.ctx.fillRect(10, 10, 150, 100)
    }
  }
}
</script>

{NSVue (Vue: 2.6.11 | NSVue: 2.7.1)} -> CreateElement(canvas)
JS: TypeError: Could not load view for: nativecanvas. TypeError: Object(...) is not a function TypeError: Object(...) is not a function
JS:     at Module.../node_modules/@nativescript/canvas/Canvas/common.js (file: src\packages\canvas\Canvas\common.ts:9:9)

Metal Support

Can't resolve 'Canvas'

I'm trying to get a simple example working. But I got the error in the screenshot.

I import like this, according to the document for Angular.
import { CanvasModule } from '@nativescript/canvas/angular';
When running, I get error below.

Nothing drawn on canvas

What could be the cause for the canvas remaining blank after calling draw functions? The setup is the core example given in the readme.

xmlns:canvas set on page tag
canvas is there, its bounds push other content lower
ready event fires and the canvas aswell as the ctx of the event are present

This is on Android emulator, I will try iOS tomorrow.

Drawing canvas on canvas doesn't work

If I create a second canvas with createCustomView(), draw something on them, and then try to draw them into the first canvas with ctx.drawImage(innerCanvas, 0, 0) nothing is drawn.
There are no errors, simply the image doesn't appear.

*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught SyntaxError: Unexpected token '!' at

Device: iPhone11, iOS 13.6.1 I tried to run iOS demo on
Darwin Aerosol.local 19.6.0 Darwin Kernel Version 19.6.0: Mon Aug 31 22:12:52 PDT 2020; root:xnu-6153.141.2~1/RELEASE_X86_64 x86_64
see log below

➜  canvas git:(master) ✗ npm start  

> [email protected] start /Users/misiak/Desktop/2020/canvas
> nps

nps is executing `default` : nps-i
? NativeScript Plugins ~ made with ❤️  Choose a command to start... apps.demo.ios                             ⚆  Run iOS  
nps is executing `apps.demo.ios` : nx run demo:ios

> nx run demo:ios 
Searching for devices...
Copying template files...
Platform ios successfully added. v7.0.0
Preparing project...
File change detected. Starting incremental webpack compilation...

webpack is watching the files…

Hash: 900580cce13874f50dcf
Version: webpack 4.44.2
Time: 16166ms
Built at: 10/21/2020 23:40:06
                                                                            Asset       Size   Chunks             Chunk Names
                                                   assets/babylon/images/sand.jpg    495 KiB           [emitted]  
            assets/babylon/images/skybox/TropicalSunnyDay/TropicalSunnyDay_nx.jpg    642 KiB           [emitted]  
            assets/babylon/images/skybox/TropicalSunnyDay/TropicalSunnyDay_ny.jpg    223 KiB           [emitted]  
            assets/babylon/images/skybox/TropicalSunnyDay/TropicalSunnyDay_nz.jpg    741 KiB           [emitted]  
            assets/babylon/images/skybox/TropicalSunnyDay/TropicalSunnyDay_px.jpg    615 KiB           [emitted]  
            assets/babylon/images/skybox/TropicalSunnyDay/TropicalSunnyDay_py.jpg    641 KiB           [emitted]  
            assets/babylon/images/skybox/TropicalSunnyDay/TropicalSunnyDay_pz.jpg    662 KiB           [emitted]  
                                              assets/babylon/images/waterbump.png   67.5 KiB           [emitted]  
                                                   assets/babylon/images/wood.jpg   10.4 KiB           [emitted]  
                                           assets/babylon/scenes/Alien/Alien.gltf   26.5 KiB           [emitted]  
                                              assets/babylon/scenes/skull.babylon   3.94 MiB           [emitted]  
                                                   assets/babylon/textures/co.png  694 bytes           [emitted]  
                                                assets/babylon/textures/flare.png   14.4 KiB           [emitted]  
                                               assets/babylon/textures/ground.jpg    461 KiB           [emitted]  
                                            assets/babylon/textures/heightMap.png   25.7 KiB           [emitted]  
                                      assets/file-assets/webgl/background-day.png   7.38 KiB           [emitted]  
                                         assets/file-assets/webgl/cubetexture.png   93.1 KiB           [emitted]  
                assets/file-assets/webgl/rick-and-morty-by-sawuinhaff-da64e7y.png   2.16 MiB           [emitted]  
                                           assets/file-assets/webgl/starfield.png    301 KiB           [emitted]  
                                                assets/file-assets/webgl/svh.jpeg   76.9 KiB           [emitted]  
                                              assets/file-assets/webgl2/Di-3d.png    238 KiB           [emitted]  
               assets/file-assets/webgl2/images/computer-history-museum/neg-x.jpg   70.3 KiB           [emitted]  
               assets/file-assets/webgl2/images/computer-history-museum/neg-y.jpg     52 KiB           [emitted]  
               assets/file-assets/webgl2/images/computer-history-museum/neg-z.jpg   58.1 KiB           [emitted]  
               assets/file-assets/webgl2/images/computer-history-museum/pos-x.jpg     63 KiB           [emitted]  
               assets/file-assets/webgl2/images/computer-history-museum/pos-y.jpg   58.6 KiB           [emitted]  
               assets/file-assets/webgl2/images/computer-history-museum/pos-z.jpg     78 KiB           [emitted]  
                                        assets/file-assets/zen3d/Bridge2/negx.jpg    117 KiB           [emitted]  
                                        assets/file-assets/zen3d/Bridge2/negy.jpg    137 KiB           [emitted]  
                                        assets/file-assets/zen3d/Bridge2/negz.jpg    154 KiB           [emitted]  
                                        assets/file-assets/zen3d/Bridge2/posx.jpg    131 KiB           [emitted]  
                                        assets/file-assets/zen3d/Bridge2/posy.jpg    103 KiB           [emitted]  
                                        assets/file-assets/zen3d/Bridge2/posz.jpg    159 KiB           [emitted]  
                                      assets/file-assets/zen3d/Bridge2/readme.txt  558 bytes           [emitted]  
                              assets/phaser-ce/monster-wants-candy/background.png   77.8 KiB           [emitted]  
                            assets/phaser-ce/monster-wants-candy/button-pause.png  970 bytes           [emitted]  
                            assets/phaser-ce/monster-wants-candy/button-start.png   14.1 KiB           [emitted]  
                                   assets/phaser-ce/monster-wants-candy/candy.png   7.65 KiB           [emitted]  
                                   assets/phaser-ce/monster-wants-candy/floor.png   14.5 KiB           [emitted]  
                                assets/phaser-ce/monster-wants-candy/gameover.png   15.1 KiB           [emitted]  
                             assets/phaser-ce/monster-wants-candy/loading-bar.png  214 bytes           [emitted]  
                           assets/phaser-ce/monster-wants-candy/monster-cover.png     16 KiB           [emitted]  
                            assets/phaser-ce/monster-wants-candy/monster-idle.png   33.2 KiB           [emitted]  
                                assets/phaser-ce/monster-wants-candy/score-bg.png   2.37 KiB           [emitted]  
                                   assets/phaser-ce/monster-wants-candy/title.png   11.4 KiB           [emitted]  
                                             assets/phaser-ce/si/files/bullet.png  136 bytes           [emitted]  
                                       assets/phaser-ce/si/files/enemy-bullet.png  116 bytes           [emitted]  
                                            assets/phaser-ce/si/files/explode.png   14.3 KiB           [emitted]  
                                     assets/phaser-ce/si/files/invader32x32x4.png  675 bytes           [emitted]  
                                             assets/phaser-ce/si/files/player.png  424 bytes           [emitted]  
                                          assets/phaser-ce/si/files/starfield.png    301 KiB           [emitted]  
                                                assets/phaser-ce/si/files/svh.jpg   76.9 KiB           [emitted]  
                                                     assets/phaser-ce/si/icon.png   26.5 KiB           [emitted]  
                                               assets/phaser-ce/si/mask-test2.png    5.3 KiB           [emitted]  
                                                  assets/phaser-ce/si/questar.png   45.2 KiB           [emitted]  
                                                   assets/phaser-ce/si/splash.png    501 KiB           [emitted]  
                                                 assets/phaser/breakout/ball1.png  643 bytes           [emitted]  
                                                 assets/phaser/breakout/ball2.png  583 bytes           [emitted]  
                                                 assets/phaser/breakout/blue1.png  369 bytes           [emitted]  
                                                 assets/phaser/breakout/blue2.png  583 bytes           [emitted]  
                                             assets/phaser/breakout/breakout.json   3.95 KiB           [emitted]  
                                              assets/phaser/breakout/breakout.png    8.4 KiB           [emitted]  
                                              assets/phaser/breakout/breakout.tps   12.3 KiB           [emitted]  
                                                assets/phaser/breakout/button.png   3.11 KiB           [emitted]  
                                            assets/phaser/breakout/buttonOver.png   3.12 KiB           [emitted]  
                                                assets/phaser/breakout/green1.png  372 bytes           [emitted]  
                                                assets/phaser/breakout/green2.png  602 bytes           [emitted]  
                                               assets/phaser/breakout/license.txt   71 bytes           [emitted]  
                                               assets/phaser/breakout/paddle1.png  994 bytes           [emitted]  
                                               assets/phaser/breakout/paddle2.png  799 bytes           [emitted]  
                                             assets/phaser/breakout/particle1.png  231 bytes           [emitted]  
                                             assets/phaser/breakout/particle2.png  195 bytes           [emitted]  
                                             assets/phaser/breakout/particle3.png  391 bytes           [emitted]  
                                               assets/phaser/breakout/purple1.png  370 bytes           [emitted]  
                                               assets/phaser/breakout/purple2.png  575 bytes           [emitted]  
                                                  assets/phaser/breakout/red1.png  365 bytes           [emitted]  
                                                  assets/phaser/breakout/red2.png  604 bytes           [emitted]  
                                               assets/phaser/breakout/silver1.png  353 bytes           [emitted]  
                                               assets/phaser/breakout/silver2.png  500 bytes           [emitted]  
                                               assets/phaser/breakout/yellow1.png  363 bytes           [emitted]  
                                               assets/phaser/breakout/yellow2.png  621 bytes           [emitted]  
                                      assets/phaser/flappybird/background-day.png   7.38 KiB           [emitted]  
                                    assets/phaser/flappybird/background-night.png   2.96 KiB           [emitted]  
                                    assets/phaser/flappybird/bird-blue-sprite.png  585 bytes           [emitted]  
                                     assets/phaser/flappybird/bird-red-sprite.png  570 bytes           [emitted]  
                                  assets/phaser/flappybird/bird-yellow-sprite.png  566 bytes           [emitted]  
                                            assets/phaser/flappybird/gameover.png    3.4 KiB           [emitted]  
                                       assets/phaser/flappybird/ground-sprite.png  976 bytes           [emitted]  
                                     assets/phaser/flappybird/message-initial.png   4.74 KiB           [emitted]  
                                             assets/phaser/flappybird/number0.png   2.81 KiB           [emitted]  
                                             assets/phaser/flappybird/number1.png    2.8 KiB           [emitted]  
                                             assets/phaser/flappybird/number2.png   2.82 KiB           [emitted]  
                                             assets/phaser/flappybird/number3.png   2.81 KiB           [emitted]  
                                             assets/phaser/flappybird/number4.png   2.83 KiB           [emitted]  
                                             assets/phaser/flappybird/number5.png   2.82 KiB           [emitted]  
                                             assets/phaser/flappybird/number6.png   2.82 KiB           [emitted]  
                                             assets/phaser/flappybird/number7.png   2.83 KiB           [emitted]  
                                             assets/phaser/flappybird/number8.png   2.81 KiB           [emitted]  
                                             assets/phaser/flappybird/number9.png   2.82 KiB           [emitted]  
                                   assets/phaser/flappybird/pipe-green-bottom.png   4.92 KiB           [emitted]  
                                      assets/phaser/flappybird/pipe-green-top.png   4.23 KiB           [emitted]  
                                     assets/phaser/flappybird/pipe-red-bottom.png   5.18 KiB           [emitted]  
                                        assets/phaser/flappybird/pipe-red-top.png   4.59 KiB           [emitted]  
                                      assets/phaser/flappybird/restart-button.png   4.01 KiB           [emitted]  
                                          assets/phaser/muybridge/muybridge01.png    537 KiB           [emitted]  
                                              assets/pixi/bitmap-font/desyrel.png    303 KiB           [emitted]  
                                              assets/pixi/bitmap-font/desyrel.xml    110 KiB           [emitted]  
                                           assets/pixi/images/bg_displacement.jpg   60.4 KiB           [emitted]  
                                                  assets/pixi/images/bg_grass.jpg    118 KiB           [emitted]  
                                                 assets/pixi/images/bg_rotate.jpg    136 KiB           [emitted]  
                                           assets/pixi/images/bg_scene_rotate.jpg    111 KiB           [emitted]  
                                                     assets/pixi/images/bunny.png  449 bytes           [emitted]  
                                                   assets/pixi/images/eggHead.png   35.2 KiB           [emitted]  
                                                 assets/pixi/images/flowerTop.png   34.7 KiB           [emitted]  
                                                   assets/pixi/images/helmlok.png   40.4 KiB           [emitted]  
                                               assets/pixi/images/maggot_tiny.png    5.2 KiB           [emitted]  
                                                    assets/pixi/images/perlin.jpg   31.3 KiB           [emitted]  
                                              assets/pixi/images/rt_object_01.png     35 KiB           [emitted]  
                                              assets/pixi/images/rt_object_02.png   36.9 KiB           [emitted]  
                                              assets/pixi/images/rt_object_03.png   36.4 KiB           [emitted]  
                                              assets/pixi/images/rt_object_04.png   34.3 KiB           [emitted]  
                                              assets/pixi/images/rt_object_05.png   35.3 KiB           [emitted]  
                                              assets/pixi/images/rt_object_06.png   35.9 KiB           [emitted]  
                                              assets/pixi/images/rt_object_07.png   34.6 KiB           [emitted]  
                                              assets/pixi/images/rt_object_08.png   32.7 KiB           [emitted]  
                                                    assets/pixi/images/skully.png   45.1 KiB           [emitted]  
                                                     assets/pixi/images/snake.png     19 KiB           [emitted]  
                                                      assets/pixi/images/star.png   5.31 KiB           [emitted]  
                                             assets/pixi/spritesheet/fighter.json   7.65 KiB           [emitted]  
                                              assets/pixi/spritesheet/fighter.png    1.1 MiB           [emitted]  
                                                  assets/pixi/spritesheet/mc.json    6.9 KiB           [emitted]  
                                                   assets/pixi/spritesheet/mc.png    899 KiB           [emitted]  
                                            assets/pixi/spritesheet/monsters.json   1.23 KiB           [emitted]  
                                             assets/pixi/spritesheet/monsters.png    142 KiB           [emitted]  
                              assets/three/fonts/helvetiker_regular.typeface.json   61.7 KiB           [emitted]  
                                                     assets/three/js/libs/ammo.js   1.65 MiB           [emitted]  
                                             assets/three/js/libs/basis/README.md   1.23 KiB           [emitted]  
                                   assets/three/js/libs/basis/basis_transcoder.js     61 KiB           [emitted]  
                                 assets/three/js/libs/basis/basis_transcoder.wasm    437 KiB           [emitted]  
                                                   assets/three/js/libs/cannon.js    384 KiB           [emitted]  
                                           assets/three/js/libs/chevrotain.min.js    148 KiB           [emitted]  
                                              assets/three/js/libs/dat.gui.min.js     56 KiB           [emitted]  
                                             assets/three/js/libs/draco/README.md   1.47 KiB           [emitted]  
                                      assets/three/js/libs/draco/draco_decoder.js    791 KiB           [emitted]  
                                    assets/three/js/libs/draco/draco_decoder.wasm    323 KiB           [emitted]  
                                      assets/three/js/libs/draco/draco_encoder.js    907 KiB           [emitted]  
                                 assets/three/js/libs/draco/draco_wasm_wrapper.js   64.3 KiB           [emitted]  
                                 assets/three/js/libs/draco/gltf/draco_decoder.js    570 KiB           [emitted]  
                               assets/three/js/libs/draco/gltf/draco_decoder.wasm    224 KiB           [emitted]  
                                 assets/three/js/libs/draco/gltf/draco_encoder.js    932 KiB           [emitted]  
                            assets/three/js/libs/draco/gltf/draco_wasm_wrapper.js   59.8 KiB           [emitted]  
                                              assets/three/js/libs/inflate.min.js   6.82 KiB           [emitted]  
                                                assets/three/js/libs/jszip.min.js   73.7 KiB           [emitted]  
                                             assets/three/js/libs/opentype.min.js    124 KiB           [emitted]  
                                                assets/three/js/libs/stats.min.js   1.81 KiB           [emitted]  
                                        assets/three/js/libs/timeliner_gui.min.js   48.6 KiB           [emitted]  
                                 assets/three/jsm/controls/FirstPersonControls.js   7.08 KiB           [emitted]  
                                       assets/three/jsm/controls/OrbitControls.js   23.7 KiB           [emitted]  
                                         assets/three/jsm/curves/CurveExtras.d.ts   1.52 KiB           [emitted]  
                                           assets/three/jsm/curves/CurveExtras.js   9.86 KiB           [emitted]  
                                          assets/three/jsm/curves/NURBSCurve.d.ts  264 bytes           [emitted]  
                                            assets/three/jsm/curves/NURBSCurve.js    2.1 KiB           [emitted]  
                                        assets/three/jsm/curves/NURBSSurface.d.ts  303 bytes           [emitted]  
                                          assets/three/jsm/curves/NURBSSurface.js   1.46 KiB           [emitted]  
                                          assets/three/jsm/curves/NURBSUtils.d.ts  992 bytes           [emitted]  
                                            assets/three/jsm/curves/NURBSUtils.js    7.8 KiB           [emitted]  
                                  assets/three/jsm/helpers/FaceNormalsHelper.d.ts  486 bytes           [emitted]  
                                    assets/three/jsm/helpers/FaceNormalsHelper.js   2.28 KiB           [emitted]  
                                   assets/three/jsm/helpers/LightProbeHelper.d.ts  221 bytes           [emitted]  
                                     assets/three/jsm/helpers/LightProbeHelper.js   2.95 KiB           [emitted]  
                              assets/three/jsm/helpers/PositionalAudioHelper.d.ts  371 bytes           [emitted]  
                                assets/three/jsm/helpers/PositionalAudioHelper.js   2.83 KiB           [emitted]  
                                assets/three/jsm/helpers/RectAreaLightHelper.d.ts  297 bytes           [emitted]  
                                  assets/three/jsm/helpers/RectAreaLightHelper.js    2.1 KiB           [emitted]  
                                assets/three/jsm/helpers/VertexNormalsHelper.d.ts  247 bytes           [emitted]  
                                  assets/three/jsm/helpers/VertexNormalsHelper.js      3 KiB           [emitted]  
                               assets/three/jsm/helpers/VertexTangentsHelper.d.ts  248 bytes           [emitted]  
                                 assets/three/jsm/helpers/VertexTangentsHelper.js   2.08 KiB           [emitted]  
                                   assets/three/jsm/libs/chevrotain.module.min.js    148 KiB           [emitted]  
                                          assets/three/jsm/libs/dat.gui.module.js   83.5 KiB           [emitted]  
                                       assets/three/jsm/libs/gunzip.module.min.js     12 KiB           [emitted]  
                                      assets/three/jsm/libs/inflate.module.min.js   6.82 KiB           [emitted]  
                                        assets/three/jsm/libs/jszip.module.min.js   78.2 KiB           [emitted]  
                                        assets/three/jsm/libs/mmdparser.module.js    174 KiB           [emitted]  
                               assets/three/jsm/libs/motion-controllers.module.js   13.2 KiB           [emitted]  
                                     assets/three/jsm/libs/opentype.module.min.js    124 KiB           [emitted]  
                                          assets/three/jsm/libs/stats.module.d.ts  465 bytes           [emitted]  
                                            assets/three/jsm/libs/stats.module.js   3.48 KiB           [emitted]  
                                        assets/three/jsm/libs/tween.module.min.js    8.2 KiB           [emitted]  
                                            assets/three/jsm/loaders/3MFLoader.js   33.2 KiB           [emitted]  
                                          assets/three/jsm/loaders/DRACOLoader.js   14.9 KiB           [emitted]  
                                            assets/three/jsm/loaders/FBXLoader.js   98.5 KiB           [emitted]  
                                           assets/three/jsm/loaders/GLTFLoader.js   81.7 KiB           [emitted]  
                                           assets/three/jsm/loaders/RGBELoader.js   13.9 KiB           [emitted]  
                                            assets/three/jsm/loaders/TDSLoader.js   24.3 KiB           [emitted]  
                                       assets/three/jsm/loaders/TNSDracoLoader.ts   48 bytes           [emitted]  
                                                  assets/three/jsm/objects/Sky.js    7.5 KiB           [emitted]  
                                                assets/three/jsm/objects/Water.js   11.2 KiB           [emitted]  
                                    assets/three/jsm/utils/BufferGeometryUtils.js   18.8 KiB           [emitted]  
                                     assets/three/jsm/utils/RoughnessMipmapper.js    6.4 KiB           [emitted]  
                                        assets/three/jsm/utils/TypedArrayUtils.js   12.2 KiB           [emitted]  
                                  assets/three/models/3ds/portalgun/portalgun.3ds    116 KiB           [emitted]  
                             assets/three/models/3ds/portalgun/textures/color.jpg    136 KiB           [emitted]  
                            assets/three/models/3ds/portalgun/textures/normal.jpg    139 KiB           [emitted]  
                                                 assets/three/models/3mf/Zoom.pkg   19.6 MiB           [emitted]  
                                                assets/three/models/3mf/truck.3mf   2.53 MiB           [emitted]  
                                         assets/three/models/fbx/SambaDancing.fbx   3.51 MiB           [emitted]  
                    assets/three/models/gltf/DamagedHelmet/glTF/DamagedHelmet.bin    545 KiB           [emitted]  
                   assets/three/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf   4.43 KiB           [emitted]  
                       assets/three/models/gltf/DamagedHelmet/glTF/Default_AO.jpg    353 KiB           [emitted]  
                   assets/three/models/gltf/DamagedHelmet/glTF/Default_albedo.jpg    914 KiB           [emitted]  
                 assets/three/models/gltf/DamagedHelmet/glTF/Default_emissive.jpg   95.2 KiB           [emitted]  
           assets/three/models/gltf/DamagedHelmet/glTF/Default_metalRoughness.jpg   1.24 MiB           [emitted]  
                   assets/three/models/gltf/DamagedHelmet/glTF/Default_normal.jpg    506 KiB           [emitted]  
assets/three/models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg    735 KiB           [emitted]  
    assets/three/models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg    143 KiB           [emitted]  
                         assets/three/models/gltf/LeePerrySmith/LeePerrySmith.glb    395 KiB           [emitted]  
                 assets/three/models/gltf/LeePerrySmith/LeePerrySmith_License.txt  364 bytes           [emitted]  
                               assets/three/models/gltf/LeePerrySmith/Map-COL.jpg    145 KiB           [emitted]  
                              assets/three/models/gltf/LeePerrySmith/Map-SPEC.jpg    666 KiB           [emitted]  
                     assets/three/models/gltf/RobotExpressive/RobotExpressive.glb    453 KiB           [emitted]  
                                             assets/three/models/gltf/ferrari.glb    1.6 MiB           [emitted]  
                                          assets/three/models/gltf/ferrari_ao.png   40.2 KiB           [emitted]  
                                                  assets/three/textures/crate.gif     66 KiB           [emitted]  
                                 assets/three/textures/cube/skyboxsun25deg/nx.jpg   62.7 KiB           [emitted]  
                                 assets/three/textures/cube/skyboxsun25deg/ny.jpg   17.6 KiB           [emitted]  
                                 assets/three/textures/cube/skyboxsun25deg/nz.jpg   66.8 KiB           [emitted]  
                                 assets/three/textures/cube/skyboxsun25deg/px.jpg   65.8 KiB           [emitted]  
                                 assets/three/textures/cube/skyboxsun25deg/py.jpg    119 KiB           [emitted]  
                                 assets/three/textures/cube/skyboxsun25deg/pz.jpg   77.6 KiB           [emitted]  
                 assets/three/textures/cube/skyboxsun25deg/skyboxsun25degtest.txt   41 bytes           [emitted]  
                 assets/three/textures/equirectangular/pedestrian_overpass_1k.hdr   1.44 MiB           [emitted]  
                           assets/three/textures/equirectangular/quarry_01_1k.hdr   1.41 MiB           [emitted]  
                     assets/three/textures/equirectangular/royal_esplanade_1k.hdr   1.59 MiB           [emitted]  
                               assets/three/textures/equirectangular/spot1Lux.hdr   38.1 KiB           [emitted]  
                       assets/three/textures/equirectangular/venice_sunset_1k.hdr   1.33 MiB           [emitted]  
                                                  assets/three/textures/r-y-m.png   2.16 MiB           [emitted]  
                                           assets/three/textures/waternormals.jpg    243 KiB           [emitted]  
                                                                        bundle.js    202 KiB   bundle  [emitted]  bundle
                                                                     package.json   1.29 KiB           [emitted]  
                                                                       runtime.js   13.9 KiB  runtime  [emitted]  runtime
                                                                        vendor.js   10.5 MiB   vendor  [emitted]  vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
[../../../packages/canvas-pixi/index.ts] /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/index.ts 757 bytes {bundle} [built]
[../../../tools/demo/canvas-pixi/index.ts] /Users/misiak/Desktop/2020/canvas/tools/demo/canvas-pixi/index.ts 51.9 KiB {bundle} [built]
[../../../tools/demo/index.ts] /Users/misiak/Desktop/2020/canvas/tools/demo/index.ts 378 bytes {bundle} [built]
[../../../tools/demo/utils/index.ts] /Users/misiak/Desktop/2020/canvas/tools/demo/utils/index.ts 363 bytes {bundle} [built]
[./ sync ^\.\/app\.(css|scss|less|sass)$] . sync nonrecursive ^\.\/app\.(css|scss|less|sass)$ 174 bytes {bundle} [built]
[./ sync recursive (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$] . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$ 339 bytes {bundle} [built]
[./app-root.xml] 309 bytes {bundle} [optional] [built]
[./app.css] 651 bytes {bundle} [optional] [built]
[./app.ts] 1.63 KiB {bundle} [built]
[./main-page.ts] 411 bytes {bundle} [optional] [built]
[./main-page.xml] 735 bytes {bundle} [optional] [built]
[./main-view-model.ts] 496 bytes {bundle} [built]
[./plugin-demos/canvas-pixi.ts] 495 bytes {bundle} [optional] [built]
[./plugin-demos/canvas-pixi.xml] 1020 bytes {bundle} [optional] [built]
[~/package.json] external "~/package.json" 42 bytes {bundle} [optional] [built]
    + 397 hidden modules

ERROR in ./plugin-demos/canvas-pixi.xml
Module not found: Error: Can't resolve '@nativescript/canvas' in '/Users/misiak/Desktop/2020/canvas/apps/demo/src/plugin-demos'
 @ ./plugin-demos/canvas-pixi.xml 1:66-97 2:73-104
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/index.js
Module not found: Error: Can't resolve '@nativescript/canvas' in '/Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill'
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/index.js 6:0-64 23:36-47 25:15-26 30:36-47 32:15-26
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/index.ts
 @ /Users/misiak/Desktop/2020/canvas/tools/demo/canvas-pixi/index.ts
 @ /Users/misiak/Desktop/2020/canvas/tools/demo/index.ts
 @ ./plugin-demos/canvas-pixi.ts
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/window.js
Module not found: Error: Can't resolve '@nativescript/canvas' in '/Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill'
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/window.js 7:0-111 32:39-63 34:36-57 36:37-59
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/index.js
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/index.ts
 @ /Users/misiak/Desktop/2020/canvas/tools/demo/canvas-pixi/index.ts
 @ /Users/misiak/Desktop/2020/canvas/tools/demo/index.ts
 @ ./plugin-demos/canvas-pixi.ts
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/DOM/Document.js
Module not found: Error: Can't resolve '@nativescript/canvas' in '/Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/DOM'
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/DOM/Document.js 6:0-46 25:33-39
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/index.js
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/index.ts
 @ /Users/misiak/Desktop/2020/canvas/tools/demo/canvas-pixi/index.ts
 @ /Users/misiak/Desktop/2020/canvas/tools/demo/index.ts
 @ ./plugin-demos/canvas-pixi.ts
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/DOM/HTMLImageElement.js
Module not found: Error: Can't resolve '@nativescript/canvas' in '/Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/DOM'
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/DOM/HTMLImageElement.js 3:0-50 36:26-36
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/window.js
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/index.js
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/index.ts
 @ /Users/misiak/Desktop/2020/canvas/tools/demo/canvas-pixi/index.ts
 @ /Users/misiak/Desktop/2020/canvas/tools/demo/index.ts
 @ ./plugin-demos/canvas-pixi.ts
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/DOM/Element.js
Module not found: Error: Can't resolve '@nativescript/canvas' in '/Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/DOM'
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/DOM/Element.js 2:0-46 13:27-33
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/DOM/Document.js
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/node_modules/@nativescript/canvas-polyfill/index.js
 @ /Users/misiak/Desktop/2020/canvas/packages/canvas-pixi/index.ts
 @ /Users/misiak/Desktop/2020/canvas/tools/demo/canvas-pixi/index.ts
 @ /Users/misiak/Desktop/2020/canvas/tools/demo/index.ts
 @ ./plugin-demos/canvas-pixi.ts
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts
Webpack compilation complete. Watching for file changes.
Webpack build done!
Installing pods...
Analyzing dependencies
Downloading dependencies
Installing MDFInternationalization (2.0.0)
Installing MaterialComponents (94.5.0)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `demo.xcworkspace` for this project from now on.
Pod installation complete! There is 1 dependency from the Podfile and 2 total pods installed.

[!] Smart quotes were detected and ignored in your Podfile. To avoid issues in the future, you should not use TextEdit for editing it. If you are not using TextEdit, you should turn off smart quotes in your editor of choice.
Updating runtime package.json with configuration values...
Project successfully prepared (ios)
Building project...
Xcode requires a team id to be specified when building for device.
You can specify the team id by setting the DEVELOPMENT_TEAM setting in build.xcconfig file located in App_Resources folder of your app, or by using the --teamId option when calling run, debug or livesync commands.
Found and using the following development team installed on your system: S Mielniczuk (5P9V78UZAC)
Xcode build...
2020-10-21 23:40:24.667 xcodebuild[3919:58359]  DTDeviceKit: deviceType from 00008030-001575E43C38402E was NULL
./.build_env_vars.sh: line 461: declare: UID: readonly variable
Generating metadata...~/Desktop/2020/canvas/apps/demo/platforms/ios/internal/metadata-generator/bin ~/Desktop/2020/canvas/apps/demo/platforms/ios
Python version: 2.7.16 (default, Jun  5 2020, 22:59:21) 
[GCC 4.2.1 Compatible Apple LLVM 11.0.3 (clang-1103.0.29.20) (-macos10.15-objc-
Generating metadata for arm64
Metadata Generator Arguments: 
./objc-metadata-generator -verbose -output-bin /Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/metadata-arm64.bin -output-umbrella /Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/umbrella-arm64.h -docset-path /Users/misiak/Library/Developer/Shared/Documentation/DocSets/com.apple.adc.documentation.iOS.docset Xclang -isysroot /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS14.1.sdk -miphoneos-version-min=9.0 -std=gnu99 -target arm64-apple-ios13.0-macabi -I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/include -I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/MDFInternationalization/MDFInternationalization.framework/Headers -I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/MaterialComponents/MaterialComponents.framework/Headers -I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/internal/Swift-Modules -I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/internal -I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/../../../../tools/assets/App_Resources/iOS/src -I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/../../node_modules/@nativescript/core/platforms/ios/src -F/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos -F/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/internal/ -F/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos -F/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/MDFInternationalization -F/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/MaterialComponents -F/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/../../node_modules/@nativescript/core/platforms/ios -DCOCOAPODS=1 -DDEBUG=1 
Clang Arguments: 
"-v", "-x", "objective-c", "-fno-objc-arc", "-fmodule-maps", "-ferror-limit=0", "-Wno-unknown-pragmas", "-Wno-ignored-attributes", "-Wno-nullability-completeness", "-Wno-expansion-to-defined", "-D__NATIVESCRIPT_METADATA_GENERATOR=1", "-isysroot", "/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS14.1.sdk", "-miphoneos-version-min=9.0", "-std=gnu99", "-target", "arm64-apple-ios13.0-macabi", "-I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/include", "-I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/MDFInternationalization/MDFInternationalization.framework/Headers", "-I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/MaterialComponents/MaterialComponents.framework/Headers", "-I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/internal/Swift-Modules", "-I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/internal", "-I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/../../../../tools/assets/App_Resources/iOS/src", "-I/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/../../node_modules/@nativescript/core/platforms/ios/src", "-F/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos", "-F/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/internal/", "-F/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos", "-F/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/MDFInternationalization", "-F/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/MaterialComponents", "-F/Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/../../node_modules/@nativescript/core/platforms/ios", "-DCOCOAPODS=1", "-DDEBUG=1", 
Merged 826 categories.
Result: 45953 declarations from 155 top level modules
Done! Running time: 8.91252 sec 
Saving metadata generation's stderr stream to: /Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/metadata-generation-stderr-arm64.txt
~/Desktop/2020/canvas/apps/demo/platforms/ios
ld: warning: dylib (/Users/misiak/Desktop/2020/canvas/node_modules/@nativescript/core/platforms/ios/TNSWidgets.framework/TNSWidgets) was built for newer iOS version (9.2) than being linked (9.0)
note: Using new build system
note: Building targets in parallel
note: Planning build
note: Constructing build description
Xcode build...
2020-10-21 23:41:23.135 xcodebuild[4376:60751] [MT] IDEDistribution: -[IDEDistributionLogging _createLoggingBundleAtPath:]: Created bundle at path '/var/folders/m6/3gy_fdtx795fbqn26p8mc3z40000gn/T/demo_2020-10-21_23-41-23.134.xcdistributionlogs'.
Exported demo to: /Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos
** EXPORT SUCCEEDED **

Project successfully built.
The build result is located at: /Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/demo.ipa
Installing on device 00008030-001575E43C38402E...
Successfully installed on device with identifier '00008030-001575E43C38402E'.
Restarting application on device 00008030-001575E43C38402E...
Unzipping LiveSync folder. This could take a while...
Unzipped 242 entries in 551.313043ms.
tns_modules folder not livesynced. Using tns_modules from the already deployed bundle...
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught SyntaxError: Unexpected token '!'
at
require(:1:137)
at (file:///app/bundle.js:1:86)
at require(:1:137)
*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught SyntaxError: Unexpected token '!'
at
require(:1:137)
at (file:///app/bundle.js:1:86)
at require(:1:137)
', reason: '(null)'
*** First throw call stack:
(0x1b0801344 0x1b0516cc0 0x104ec5428 0x1052764f0 0x105276354 0x10518b08c 0x1050c0828 0x1050bfe60 0x104f3ae18 0x104e79df0 0x104e74ab0 0x104eba508 0x1044862f4 0x1b05f3384)
'--chrome' is the default behavior. Use --inspector to debug iOS applications using the Safari Web Inspector.

Setting up debugger proxy...
Press Ctrl + C to terminate, or disconnect.

Opened localhost 41000
To start debugging, open the following URL in Chrome:
devtools://devtools/bundled/inspector.html?ws=localhost:41000

Successfully synced application org.nativescript.plugindemo on device 00008030-001575E43C38402E.
tns_modules folder not livesynced. Using tns_modules from the already deployed bundle...
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught SyntaxError: Unexpected token '!'
at
require(:1:137)
at (file:///app/bundle.js:1:86)
at require(:1:137)
*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught SyntaxError: Unexpected token '!'
at
require(:1:137)
at (file:///app/bundle.js:1:86)
at require(:1:137)
', reason: '(null)'
*** First throw call stack:
(0x1b0801344 0x1b0516cc0 0x1032a9428 0x10365a4f0 0x10365a354 0x10356f08c 0x1034a4828 0x1034a3e60 0x10331ee18 0x10325ddf0 0x103258ab0 0x10329e508 0x1026a22f4 0x1b05f3384)

Module 'Canvas' not found for element 'Canvas'.

package.json

  "dependencies": {
    "@nativescript/canvas": "^1.0.0-alpha.2",
    "@nativescript/canvas-pixi": "beta",
    "@nativescript/canvas-polyfill": "beta",
    "@nativescript/core": "~8.0.0",
    "@nativescript/theme": "~3.0.1",
    "pixi.js": "^5.3.3",
    "three": "^0.132.2"
  },

app.ts

import "@nativescript/canvas-polyfill";
import { Application } from '@nativescript/core'

Application.run({ moduleName: 'app-root' })

app-root.xml

<GridLayout width="100%" height="100%">
    <Canvas width="100%" height="100%" id="canvas" ready="onReady"/>
</GridLayout>

produces error

*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught Error: Building UI from XML. @app-root.xml:2:5
> Module 'Canvas' not found for element 'Canvas'.
> instanceType is not a constructor
at
ScopeError(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/utils/debug.js:51:0)
at SourceError(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/utils/debug.js:58:0)
at (file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/ui/builder/index.js:228:0)
at (file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/ui/builder/index.js:207:0)
at (file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/xml/index.js:412:0)
at EasySAXParser.parse(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/js-libs/easysax/easysax.js:751:0)
at parse(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/xml/index.js:455:0)
at parse(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/ui/builder/index.js:216:0)
at parseInternal(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/ui/builder/index.js:181:0)
at loadInternal(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/ui/builder/index.js:94:0)
at createViewFromEntry(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/ui/builder/index.js:36:0)
at createRootView(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/application/index.ios.js:317:23)
at setWindowContent(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/application/index.ios.js:258:0)
at notifyAppStarted(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/application/index.ios.js:169:0)
at didFinishLaunchingWithOptions(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/application/index.ios.js:152:0)
at NotificationObserver.onReceive(file:///app/vendor.js:1<\M-b\M^@\M-&>

Elements not rendering in Android TV

I am trying to use the canvas + canvas-pixi on an app running on Android TV. When run on an android phone device (Pixel 5 running latest Android) it works as expected. When the same code is run on an Android TV Device (Google Chromecast with TV - Android TV OS 10) the canvas is drawn and the background colour set is shown but no elements are drawn to screen.

For sake of a simple test I have used the sample code provided by @triniwiz in the issue below and have the same results. Works fine on an Android Phone but not on Android TV. I have done some quick checking and cannot see anything that says Android TV should handle openGL ES any differently, I have also confirmed that my Android TV device is capable of OpenGL ES 3.1.

-------------------------------------- Testing App -----------------------
testCanvasApp.zip
Originally posted by @triniwiz in #52 (comment)

createImageData silently crashes app

✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.0.2 version and is up to date.
✔ Component @nativescript/core has 8.0.7 version and is up to date.
✖ Component @nativescript/ios is not installed.
✔ Component @nativescript/android has 8.0.0 version and is up to date.

A new project, created with ns create canvas-bug --ng.
In the app.component.ts ngOnInit method add

const canvas = Canvas.createCustomView();
const context = <CanvasRenderingContext2D> canvas.getContext('2d');
console.log(context.createImageData(16, 16));

This crashes the app on startup. Nothing is printed to console.
Here's the logcat:

06-15 07:17:55.647  7130  7130 I TNS.Runtime: NativeScript Runtime Version 7.0.1, commit no commit sha was provided by build.gradle build
06-15 07:17:55.692  7130  7130 D TNS.Runtime: V8 version 8.3.110.9
06-15 07:17:57.227  7130  7130 I canvasnative::android: Canvas Native library loaded
06-15 07:17:57.239  7130  7130 E libEGL  : call to OpenGL ES API with no current context (logged once per thread)
06-15 07:17:57.253  7130  7167 I AdrenoGLES: QUALCOMM build                   : b7a53ba, I65c4755304
06-15 07:17:57.253  7130  7167 I AdrenoGLES: Build Date                       : 09/11/19
06-15 07:17:57.253  7130  7167 I AdrenoGLES: OpenGL ES Shader Compiler Version: EV031.27.05.01
06-15 07:17:57.253  7130  7167 I AdrenoGLES: Local Branch                     : mybranche9d496a3-67c3-f1d6-9f04-1458d0b52ae8
06-15 07:17:57.253  7130  7167 I AdrenoGLES: Remote Branch                    : quic/gfx-adreno.lnx.1.0.r84-rel
06-15 07:17:57.253  7130  7167 I AdrenoGLES: Remote Branch                    : NONE
06-15 07:17:57.253  7130  7167 I AdrenoGLES: Reconstruct Branch               : NOTHING
06-15 07:17:57.253  7130  7167 I AdrenoGLES: Build Config                     : S P 8.0.11 AArch64
06-15 07:17:57.256  7130  7167 I AdrenoGLES: PFP: 0x016ee183, ME: 0x00000000
06-15 07:17:57.266   474   474 I hwservicemanager: getTransport: Cannot find entry [email protected]::IMapper/default in either framework or device manifest.
06-15 07:17:57.266  7130  7167 W Gralloc3: mapper 3.x is not supported
06-15 07:17:57.269   474   474 I hwservicemanager: getTransport: Cannot find entry [email protected]::IAllocator/default in either framework or device manifest.
06-15 07:17:57.269  7130  7167 W Gralloc3: allocator 3.x is not supported
06-15 07:17:57.270  7130  7167 I Gralloc2: Adding additional valid usage bits: 0x8202400
06-15 07:17:57.290  7130  7130 W libc    : malloc(18446744072678350848) failed: returning null pointer
06-15 07:17:57.319  1441  2407 I ActivityManager: Process org.nativescript.canvasbug (pid 7130) has died: fore TOP
06-15 07:17:57.320  1441  1607 I libprocessgroup: Successfully killed process cgroup uid 10521 pid 7130 in 0ms
06-15 07:17:57.320   638   638 I Zygote  : Process 7130 exited due to signal 6 (Aborted)
06-15 07:17:57.348   638   638 D Zygote  : Forked child process 7168
06-15 07:17:57.351  7168  7168 I Zygote  : seccomp disabled by setenforce 0
06-15 07:17:57.354  1441  1605 I ActivityManager: Start proc 7168:org.nativescript.canvasbug/u0a521 for activity {org.nativescript.canvasbug/com.tns.NativeScriptActivity}
06-15 07:17:57.355  7168  7168 I cript.canvasbu: Late-enabling -Xcheck:jni
06-15 07:17:57.375  7168  7168 E cript.canvasbu: Unknown bits set in runtime_flags: 0x8000

If my assumption is correct that logcat shows malloc args, that's never gonna succeed in allocating that much memory.
I tried various sizes passed to createImageData(), but the logcat is always the same and it always crashes. I also thought maybe it's because canvas size is not set, but setting canvas to various sizes does not seem to affect the outcome.

Crash and/or very slow gl.readPixels()

Calling gl.readPixels generally crashes on iOS (segfault, bad memory access).
There is an exception and that is when only reading like one pixel at a time, presumably because that just does not trip over any boundaries, even for misallocated pointers. However even just reading one pixel has a significant hit on the performance. Frames begin to stutter. I know that calling readPixels stalls the whole pipeline because the CPU has to wait, but this is not comparable to what you get with WebGL in browser.

Are there ways to fix and improve this?

SVG support

Apply CSS in SVG

I want to do something like this: https://codepen.io/shahbokhari/pen/oBbmXG
the svg loads smoothly but the CSS animation doesn't catch it. how could i do it?

floating point textures are pixel slurry on iOS

When trying to sample from a floating point texture (RGBA32F/FLOAT), you get random pixels. See attached screenshot below

The texture has been cleared with color (0, 0, 0, 0), so unfortunately, as shown above, this is not just a matter of floats being interpreted as ints. Sadly I cannot confirm that the texture is actually filled with (0, 0, 0, 0), since gl.readPixels() does not write anything.

Is there some maybe flag missing that tells the backend "this is a float texture"?

Path2 constructor doesn't work in Android

There is an error in when I try to use Path2D in Android, it throws:

JS: ERROR Error: Uncaught (in promise): Error: java.lang.UnsatisfiedLinkError: No implementation found for long com.github.triniwiz.canvas.TNSPath2D.nativeCreateWithString(java.lang.String) (tried Java_com_github_triniwiz_canvas_TNSPath2D_nativeCreateWithString and Java_com_github_triniwiz_canvas_TNSPath2D_nativeCreateWithString__Ljava_lang_String_2)
JS: Path2D(file: node_modules/@nativescript/canvas/Canvas2D/Path2D/Path2D.android.js:6:0)

It happens when I try to use it with:

private wavePath = new Path2D('m 529.60955,97.99314 c 0.6063,-1.333289 1.37676,-3.807172 1.98742,-5.736518 1.43782,-4.542735 2.3486,-9.24988 3.94428,-13.739595 1.22843,-3.456349 2.1906,-7.134241 4.31994,-10.121089 2.50635,-3.515675 5.39013,-7.750928 9.60411,-8.691194 3.50651,-0.782406 7.08821,1.554836 10.30798,3.148839 2.05932,1.019506 3.67272,2.768704 5.59886,4.021772 2.77486,1.805203 5.49277,3.794271 8.56554,5.025813 3.86089,1.547416 7.99792,2.541823 12.1447,2.866163 5.35707,0.419004 10.80774,-0.151465 16.0742,-1.218311 3.78969,-0.767692 7.37664,-2.333646 10.99612,-3.693975 2.07082,-0.778288 3.94835,-2.163077 6.1259,-2.553359 2.18054,-0.390818 4.58096,-0.548775 6.64047,0.267237 1.54229,0.611079 2.85859,1.86767 3.76038,3.260092 2.96224,4.573869 3.08537,10.453394 4.72009,15.651745 1.96892,6.26112 3.2268,12.824907 6.12763,18.71247 2.07408,4.20957 4.22612,8.75648 7.93915,11.62625 2.96238,2.28961 6.83183,3.94093 10.57291,3.7915 3.38524,-0.13522 6.91738,-1.73851 9.26315,-4.183 6.08045,-6.33638 6.87768,-16.17172 9.84421,-24.437391 1.74002,-4.848251 1.96996,-10.340419 4.6583,-14.734284 1.81524,-2.966851 3.97766,-6.878408 7.42637,-7.32971 2.82851,-0.370141 5.36921,2.272137 7.43261,4.241871 3.26721,3.118901 3.77533,8.565327 7.25572,11.444398 2.55835,2.116335 6.02236,2.939886 9.26309,3.662177 7.03313,1.567536 14.37402,1.093223 21.57544,1.341481 13.90882,0.479484 22.43939,0.306472 41.75025,0.284877 M 336.35167,63.253613 c 0.4411,-0.480066 2.6942,-4.737301 3.69252,-7.263121 1.38582,-3.506239 2.03102,-7.262789 3.15246,-10.862316 0.81118,-2.603683 1.50765,-5.257031 2.58585,-7.761959 1.10053,-2.556813 1.89254,-5.477095 3.94002,-7.36291 1.54183,-1.42009 3.68274,-2.702045 5.76933,-2.50197 1.83387,0.175843 3.38948,1.700041 4.56032,3.122407 1.67506,2.0349 2.34755,4.744226 3.12997,7.261062 0.83847,2.697134 1.20783,5.521593 1.64858,8.31145 0.48039,3.040814 0.71359,6.11558 1.08328,9.171828 0.48534,4.012315 0.85663,8.041159 1.48989,12.032802 1.02788,6.479093 2.38773,12.902586 3.74537,19.320687 0.97041,4.58754 1.97728,9.169751 3.14452,13.711197 1.54768,6.02166 3.02249,12.08229 5.11351,17.93749 1.22331,3.42546 2.63743,6.79686 4.33265,10.01501 0.62418,1.18492 1.11098,2.5426 2.13883,3.40118 1.02188,0.85359 2.38531,1.65984 3.70598,1.49045 1.64091,-0.21047 2.93409,-1.67896 3.98819,-2.954 1.05816,-1.27994 1.57901,-2.9338 2.15973,-4.48967 1.04059,-2.78799 1.56485,-5.74232 2.34762,-8.61338 0.86232,-3.16279 1.84575,-6.295 2.58772,-9.48817 1.03846,-4.46918 1.75302,-9.007538 2.6045,-13.516081 0.97933,-5.185468 1.9794,-10.367519 2.88037,-15.567174 1.58134,-9.126174 2.66075,-18.339531 4.43192,-27.43077 0.96129,-4.934193 1.76093,-9.9359 3.35935,-14.701965 0.76401,-2.278066 1.49693,-4.665267 2.95594,-6.57435 1.03208,-1.350466 2.24329,-3.363364 3.93841,-3.238753 2.66618,0.195994 4.10523,3.596977 5.38305,5.945191 1.2209,2.243587 1.51277,4.891678 1.9766,7.403475 0.75269,4.076094 0.81811,8.249922 1.29474,12.367434 1.07304,9.269735 1.72725,18.615122 3.523,27.772343 0.81198,4.140616 1.85281,8.25423 3.26782,12.229373 0.61514,1.728087 1.40802,3.392846 2.25818,5.018242 0.69141,1.321881 1.30717,2.727075 2.3047,3.836285 1.23148,1.36935 2.71732,2.60127 4.40868,3.32996 1.98171,0.85378 4.22826,1.17543 6.38369,1.07415 2.09018,-0.0982 4.2056,-0.65869 6.06549,-1.6175 1.67083,-0.86135 3.04486,-2.23739 4.34443,-3.59559 0.82902,-0.866414 1.50439,-1.871865 2.16922,-2.869831 1.32172,-1.983999 2.66551,-3.98597 3.60374,-6.177524 1.43963,-3.362723 2.01783,-7.032101 3.04229,-10.543639 0.81117,-2.780403 1.42306,-5.628936 2.4581,-8.333992 0.92578,-2.419523 1.39347,-5.307294 3.3389,-7.017992 1.09564,-0.963445 2.71155,-1.530767 4.16046,-1.359573 1.57989,0.186669 2.98807,1.329012 4.06614,2.498906 1.48338,1.609721 2.08218,3.856042 2.97063,5.856611 1.22605,2.760774 2.17463,5.636632 3.24711,8.46061 1.18281,3.114484 2.19355,6.29788 3.51567,9.355828 1.01114,2.338671 2.26716,4.563833 3.37092,6.860241 0.92959,1.934036 1.72136,3.936535 2.73834,5.826085 0.94371,1.75343 1.95519,3.47849 3.11285,5.09866 1.18913,1.66421 2.21611,3.58839 3.91868,4.72191 1.90349,1.26728 4.27744,2.13398 6.56058,2.00553 2.90255,-0.1633 5.72084,-1.66663 8.0018,-3.46903 1.45788,-1.15202 2.36695,-2.87998 3.33968,-4.46313 0.6996,-1.13862 1.22966,-2.37461 1.77813,-3.59326 0.78706,-1.74877 1.38197,-3.555127 2.16755,-5.32922 m -450.234701,5.59531 c 1.164518,-1.36948 2.009543,-4.527868 3.071482,-6.76526 0.977074,-2.058591 1.785392,-4.220027 3.035578,-6.125153 1.312243,-1.999693 2.596626,-4.222347 4.62999,-5.481786 2.242815,-1.38917 5.075752,-2.245435 7.688329,-1.878755 2.122491,0.297894 3.959822,1.788995 5.584602,3.186781 1.64162,1.412271 2.92144,3.235927 4.02643,5.098291 1.53831,2.592675 2.55078,5.474474 3.54303,8.321192 1.31733,3.77936 2.4011,6.71809 3.39338,8.85251 1.32696,2.85431 2.49029,5.7442 3.82977,8.49417 0.94515,1.94041 1.97799,3.81116 3.21789,5.55059 1.91116,2.46526 4.78163,5.03939 7.95328,5.26771 1.59297,0.11468 3.06283,-1.07722 4.33233,-2.04628 1.47516,-1.12605 2.5156,-2.73838 3.621,-4.22908 0.78022,-1.05219 1.4461,-2.18581 2.11405,-3.31261 1.09694,-1.85049 2.21709,-3.69799 3.10626,-5.6568 1.83601,-4.04464 3.21845,-8.28617 4.57026,-12.51732 0.99729,-3.121515 1.56806,-6.371004 2.60707,-9.478877 1.88343,-5.633658 3.26833,-12.202956 6.55811,-16.569848 1.86546,-2.476232 4.59367,-5.047532 7.68833,-5.234 2.88241,-0.173679 5.84196,1.764897 7.69458,3.979906 3.70664,4.431704 4.54825,10.81069 5.11591,16.560212 0.8709,8.820905 1.26843,14.397657 2.68481,21.469427 1.78896,8.93205 3.14694,18.23091 7.31391,26.33142 1.93033,3.75253 3.7338,9.78872 7.95328,9.8496 4.34406,0.0627 6.3134,-6.13266 8.47725,-9.89995 2.09446,-3.64649 2.94629,-7.88457 4.14282,-11.91594 1.50599,-5.07397 2.78799,-10.22112 3.81208,-15.41385 0.85443,-4.33248 1.39301,-8.72304 1.9402,-13.104938 0.67382,-5.395885 1.07726,-10.822187 1.65267,-16.229451 0.597,-5.610215 1.24357,-11.215045 1.86729,-16.822353 0.56559,-5.084749 0.96013,-10.191569 1.70027,-15.253856 0.5433,-3.715938 0.92346,-7.490733 2.00981,-11.085619 0.79093,-2.617277 1.23503,-5.683998 3.25143,-7.530572 1.79751,-1.646118 4.53274,-2.670202 6.94154,-2.298182 2.20335,0.340289 3.9325,2.258581 5.41944,3.919775 1.98191,2.214171 3.15847,5.054019 4.39545,7.755947 1.41536,3.091578 2.25318,6.416519 3.4313,9.606058 0.69045,1.869247 1.32522,3.76287 2.13152,5.585152 0.72199,1.631756 1.46833,3.265107 2.41744,4.776104 0.72614,1.156031 1.54455,2.2666 2.48877,3.252574 0.78447,0.819163 1.67037,1.547928 2.61035,2.182643 1.00294,0.677229 2.03424,1.391543 3.20089,1.713215 1.52045,0.419222 3.15558,0.361847 4.72643,0.220609 2.09313,-0.188198 4.25654,-0.489324 6.1444,-1.412662 1.69863,-0.830787 3.06096,-2.245971 4.39744,-3.583641 0.97992,-0.980792 1.35004,-1.803665 2.62462,-3.226571 0.47807,-0.519754 1.89572,-2.910413 2.69709,-4.448114 1.08425,-2.080497 1.87951,-4.29937 2.84264,-6.43863 1.74537,-3.876712 2.11785,-6.878947 4.27271,-10.543882 1.23064,-2.093038 3.44847,-5.418733 5.35533,-6.921789 1.60411,-1.26442 3.60873,-2.400477 5.65102,-2.36925 1.96064,0.02998 3.87475,1.151027 5.35303,2.439326 2.12166,1.848995 3.51132,4.358159 4.78026,6.870135 1.70769,3.380535 2.73345,7.234449 3.8555,10.851802 0.96193,3.101155 1.09094,6.441153 2.22755,9.482633 0.73372,1.963378 1.73971,3.838227 2.92895,5.564171 0.76007,1.103081 1.58722,2.208506 2.65631,3.015681 0.9673,0.730322 2.15058,1.130743 3.28241,1.564309 0.64978,0.248909 1.31722,0.468065 2.00214,0.590743 1.20559,0.215936 2.44118,0.252484 3.66595,0.248014 1.25401,-0.0046 2.51998,-0.04487 3.75153,-0.281185 0.82318,-0.157955 1.68135,-0.320511 2.39901,-0.753541 1.66374,-1.003882 4.1382,-4.105792 4.1382,-4.105792 0,0 -1.02543,1.146129 0,0 M 6.5284134,107.41105 c 0,0 5.0359116,-0.64841 7.0970996,-2.73752 2.152985,-2.18215 3.217302,-5.221537 4.944598,-7.754041 1.428459,-2.094359 2.479108,-4.58776 4.477518,-6.147628 2.044767,-1.596051 4.620451,-2.92026 7.214375,-2.916996 2.562832,0.0032 5.135503,1.279033 7.120623,2.899964 1.726218,1.409527 2.57939,3.641534 3.708891,5.562684 0.976069,1.660181 1.670777,3.475075 2.641977,5.138107 1.489563,2.55066 2.952971,5.15637 4.872438,7.40142 1.690781,1.97758 3.488778,4.00796 5.773373,5.25302 2.672206,1.45631 5.786303,2.53509 8.823614,2.34467 3.479654,-0.21815 6.859016,-1.89827 9.694009,-3.92765 1.845268,-1.3209 3.169338,-3.27809 4.454142,-5.14868 0.810839,-1.18052 1.547876,-2.67076 2.023898,-3.78995')

Seems like Android doesn't have the code for SVG logic

OffScreenCanvas

@nativescript/canvas-pixi

I've tried the simple usage example in: https://github.com/NativeScript/canvas/tree/master/packages/canvas-pixi

I get this error: Error: com.tns.NativeScriptException: Failed to find module: "url", relative to: app/tns_modules/ which doesn't really help me identity the issue.

I'm doing this in NS Vue (latest). The Canvas element loads fine and I can draw to it on canvasReady. I've tried adding:

import '@nativescript/canvas-polyfill'

early on in case that was the issue but didn't help.

I've just tried just rendering a rectangle with simplified code and get same error:

const canvas = args.object;
const app = new TNSPIXIApplication({
    canvas,
    backgroundColor: 0x1099bb,
});
var graphics = new PIXI.Graphics();
graphics.beginFill(0xFFFF00);
graphics.lineStyle(5, 0xFF0000);
graphics.drawRect(0, 0, 300, 200);
app.stage.addChild(graphics);

Any suggestions on other things I could try?

Thanks.

nx run demo:ios - *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught SyntaxError: Unexpected token '!'

➜ canvas git:(master) npm start

> [email protected] start /Users/misiak/Desktop/2020/canvas
> nps

nps is executing `default` : nps-i
? NativeScript Plugins ~ made with ❤️  Choose a command to start... default                                   
nps is executing `default` : nps-i
? NativeScript Plugins ~ made with ❤️  Choose a command to start... (Use arrow k                      ^[[B^[[A^[[B
eys or type to search)
❯ default                                    
  nx                                        Execute any command with the @nrwl/c
^C 
➜  canvas git:(master) npm start

> [email protected] start /Users/misiak/Desktop/2020/canvas
> nps

nps is executing `default` : nps-i
? NativeScript Plugins ~ made with ❤️  Choose a command to start... apps.demo.ios                             ⚆  Run iOS  
nps is executing `apps.demo.ios` : nx run demo:ios

> nx run demo:ios 
Searching for devices...
Preparing project...
File change detected. Starting incremental webpack compilation...

webpack is watching the files…

Hash: d3fca0a87c7cca1006e3
Version: webpack 4.44.2
Time: 21077ms
Built at: 09/21/2020 22:34:49
       Asset      Size   Chunks             Chunk Names
   bundle.js   823 KiB   bundle  [emitted]  bundle
package.json  1.73 KiB           [emitted]  
  runtime.js  13.9 KiB  runtime  [emitted]  runtime
   vendor.js  6.12 MiB   vendor  [emitted]  vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
[./ sync ^\.\/app\.(css|scss|less|sass)$] . sync nonrecursive ^\.\/app\.(css|scss|less|sass)$ 174 bytes {bundle} [built]
[./ sync recursive (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$] . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$ 773 bytes {bundle} [built]
[./app-root.xml] 309 bytes {bundle} [optional] [built]
[./app.css] 651 bytes {bundle} [optional] [built]
[./app.ts] 1.63 KiB {bundle} [built]
[./main-page.ts] 411 bytes {bundle} [optional] [built]
[./main-page.xml] 1.36 KiB {bundle} [optional] [built]
[./main-view-model.ts] 496 bytes {bundle} [built]
[./plugin-demos/canvas-babylon.ts] 507 bytes {bundle} [optional] [built]
[./plugin-demos/canvas-babylon.xml] 1.01 KiB {bundle} [optional] [built]
[./plugin-demos/canvas-phaser-ce.ts] 853 bytes {bundle} [optional] [built]
[./plugin-demos/canvas-phaser-ce.xml] 1.66 KiB {bundle} [optional] [built]
[./plugin-demos/canvas-phaser.ts] 503 bytes {bundle} [optional] [built]
[./plugin-demos/canvas-phaser.xml] 943 bytes {bundle} [optional] [built]
[./plugin-demos/canvas-pixi.ts] 495 bytes {bundle} [optional] [built]
    + 385 hidden modules

WARNING in /Users/misiak/Desktop/2020/canvas/packages/canvas/index.ts 2:0-34
"export 'CanvasRenderingContext' was not found in './common'
 @ ./plugin-demos/canvas-babylon.xml
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./plugin-demos/canvas-babylon.ts
Module not found: Error: Can't resolve '@demo/shared' in '/Users/misiak/Desktop/2020/canvas/apps/demo/src/plugin-demos'
 @ ./plugin-demos/canvas-babylon.ts 1:0-55 6:31-54
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./plugin-demos/canvas-phaser.ts
Module not found: Error: Can't resolve '@demo/shared' in '/Users/misiak/Desktop/2020/canvas/apps/demo/src/plugin-demos'
 @ ./plugin-demos/canvas-phaser.ts 1:0-54 6:31-53
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./plugin-demos/canvas-phaser-ce.ts
Module not found: Error: Can't resolve '@demo/shared' in '/Users/misiak/Desktop/2020/canvas/apps/demo/src/plugin-demos'
 @ ./plugin-demos/canvas-phaser-ce.ts 1:0-56 20:31-55
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./plugin-demos/canvas-pixi.ts
Module not found: Error: Can't resolve '@demo/shared' in '/Users/misiak/Desktop/2020/canvas/apps/demo/src/plugin-demos'
 @ ./plugin-demos/canvas-pixi.ts 1:0-52 6:31-51
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./plugin-demos/canvas-polyfill.ts
Module not found: Error: Can't resolve '@demo/shared' in '/Users/misiak/Desktop/2020/canvas/apps/demo/src/plugin-demos'
 @ ./plugin-demos/canvas-polyfill.ts 1:0-56 6:31-55
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./plugin-demos/canvas-three.ts
Module not found: Error: Can't resolve '@demo/shared' in '/Users/misiak/Desktop/2020/canvas/apps/demo/src/plugin-demos'
 @ ./plugin-demos/canvas-three.ts 1:0-53 6:31-52
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./plugin-demos/canvas.ts
Module not found: Error: Can't resolve '@demo/shared' in '/Users/misiak/Desktop/2020/canvas/apps/demo/src/plugin-demos'
 @ ./plugin-demos/canvas.ts 1:0-48 6:31-47
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts
Webpack compilation complete. Watching for file changes.
Webpack build done!
Installing pods...
Analyzing dependencies
Downloading dependencies
Installing CanvasNative (0.9.0)
Installing MDFInternationalization (2.0.0)
Installing MaterialComponents (94.5.0)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `demo.xcworkspace` for this project from now on.
Pod installation complete! There are 2 dependencies from the Podfile and 3 total pods installed.

[!] Smart quotes were detected and ignored in your Podfile. To avoid issues in the future, you should not use TextEdit for editing it. If you are not using TextEdit, you should turn off smart quotes in your editor of choice.
Updating runtime package.json with configuration values...
Project successfully prepared (ios)
Building project...
Xcode requires a team id to be specified when building for device.
You can specify the team id by setting the DEVELOPMENT_TEAM setting in build.xcconfig file located in App_Resources folder of your app, or by using the --teamId option when calling run, debug or livesync commands.
Found and using the following development team installed on your system: S Mielniczuk (5P9V78UZAC)
Xcode build...
2020-09-21 22:35:21.556 xcodebuild[3232:27368]  DTDeviceKit: deviceType from 67aa538833c1a210861c965520352375116d4678 was NULL
Xcode build...
2020-09-21 22:36:31.731 xcodebuild[3739:29848] [MT] IDEDistribution: -[IDEDistributionLogging _createLoggingBundleAtPath:]: Created bundle at path '/var/folders/m6/3gy_fdtx795fbqn26p8mc3z40000gn/T/demo_2020-09-21_22-36-31.730.xcdistributionlogs'.
Exported demo to: /Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos
** EXPORT SUCCEEDED **

Project successfully built.
The build result is located at: /Users/misiak/Desktop/2020/canvas/apps/demo/platforms/ios/build/Debug-iphoneos/demo.ipa
Installing on device 67aa538833c1a210861c965520352375116d4678...
Successfully installed on device with identifier '67aa538833c1a210861c965520352375116d4678'.
Restarting application on device 67aa538833c1a210861c965520352375116d4678...
Unzipping LiveSync folder. This could take a while...
Unzipped 4 entries in 688.670039ms.
tns_modules folder not livesynced. Using tns_modules from the already deployed bundle...
'--chrome' is the default behavior. Use --inspector to debug iOS applications using the Safari Web Inspector.

Setting up debugger proxy...
Press Ctrl + C to terminate, or disconnect.

Opened localhost 41000
To start debugging, open the following URL in Chrome:
devtools://devtools/bundled/inspector.html?ws=localhost:41000

Successfully synced application org.nativescript.plugindemo on device 67aa538833c1a210861c965520352375116d4678.
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught SyntaxError: Unexpected token '!'
at
require(:1:137)
*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught SyntaxError: Unexpected token '!'
at
require(:1:137)
', reason: '(null)'
*** First throw call stack:
(0x1afe32180 0x1af00a9f8 0x100875428 0x100c264f0 0x100c26354 0x100b3b08c 0x100a70828 0x100a6fe60 0x1008eae18 0x100829df0 0x100824ab0 0x10086a508 0x100097338 0x1af8818e0)

NSVue - Unknown custom element: <canvas>

Hi!

I followed the documentation and it seems that docs are incomplete.

According to my personal experience with your other plugins, I have to do this in my main.js file:

import Vue from 'nativescript-vue'
import CanvasPlugin from '@nativescript/canvas/vue'

Vue.use(CanvasPlugin)

The fact is that there is no vue folder with version 0.9.9 installed with npm (ns plugin add @nativescript/canvas). So I ended up doing:

import Vue from 'nativescript-vue'

Vue.registerElement('Canvas', () => require('@nativescript/canvas').Canvas)

I wanted to make a PR to update the docs, but maybe you'll want to fix the missing vue folder before.

Improve 2D textdrawing

Currently 2D text is drawn with the basic draw_text switching to what textlayout provides offers better support for styling

Canvas globalCompositeOperation = source-in not working with gradients on Android

Hi, always here testing this super awesome library (for me a game changer in NS like RootLayout) now I have this issue when using gradients and trying to mask for create an icon that crops and has the color of the gradient. What I'm trying to do is to create a Font Awesome icon with a gradient pattern so I tried as follows:

const canvasContext = canvas.getContext('2d') as unknown as CanvasRenderingContext2D

const { width, height } = getViewConstraints(canvas as any)

const itemsWidth = width / this.items.length

canvasContext.clearRect(0, 0, width, height)
canvasContext.setTransform(1, 0, 0, 1, 0, 0)

canvasContext.save()


this.items.forEach((item, index) => {
  const leftOffset = itemsWidth * index

  const gradient = canvasContext.createLinearGradient(leftOffset, 0, leftOffset + itemsWidth, height)
  gradient.addColorStop(0, 'red')
  gradient.addColorStop(1, 'yellow')
  gradient.addColorStop(2, 'green')


  const font = Font.default.withFontFamily('fa-regular-400')
  const imageSource = ImageSource.fromResourceSync('splash_image')
  const iconImageSource = ImageSource.fromFontIconCodeSync(String.fromCharCode(0xf0c0), font, new Color('white'))

  canvasContext.fillStyle = 'black'
  canvasContext.drawImage(iconImageSource as any, 50,0, 150, 150)
  // canvasContext.fillRect(50, 0, 150, 150)

  canvasContext.globalCompositeOperation = 'source-in'

  canvasContext.fillStyle = gradient
  canvasContext.fillRect(leftOffset, 0, itemsWidth, height)
  // canvasContext.drawImage(imageSource as any, 0,0, itemsWidth, height)

})

canvasContext.restore()

The icon remains white and no gradient is shown, also I tried using a simple rectangle instead of the icon and the gradient is not shown at all, I sometimes gets a solid color into my rectangle. The solution for now is to use an image as gradient instead of a gradient.

My environment:

@nativescript/canvas: 1.0.0-alpha.2
@nativescript/core: 8.1.0-alpha.7
@nativescript/android: 8.0.0
cli: 8.0.2

Missing flush call

Fix missing flush call after .clear 😅

Is there a way to use canvas libraries like Canvg?

I tried using it with the NodeJS way it offers in its README but with no luck, the app closes without any error output on iOS, I was trying to use it because I wanted to resize an SVG to the canvas viewport, dunno how to do it with canvas normal API

apps.demo | Failed to build plugin @nativescript/canvas-media

I was trying to run the demos app (apps.demo.android, apps.demo-angular.android) but it fail with the following error:

BUILD FAILED in 1s
Failed to build plugin @nativescript/canvas-media : 
Error: Command gradlew.bat failed with exit code 1
Done.

———————————————————————————————————————————————

>  NX   ERROR  Running target "demo-angular:android" failed

Is it a dependency conflict or something wrong in my environment?

Video Support

Method	iOS	Android
texImage2D	✅	✅
texSubImage2D	❌	❌
texImage3D	❌	❌
texSubImage3D	❌	❌

WebGPU Support

Module not found: Error: Can't resolve 'tns-core-modules/debugger'

WARNING in ./node_modules/@nativescript/canvas-polyfill/vendor/http-async/http/http.ios.js 350:37-73
Module not found: Error: Can't resolve 'tns-core-modules/debugger'

temporary fix: go to
node_modules/@nativescript/canvas-polyfill/vendor/http-async/http/http.ios.js:350
and replace tns-core-modules/debugger -> @nativescript/core/debugger

WebGL2 context causes black textures (on iOS)

When switching from webgl to webgl2 context, previously working textures become black.

Textures are being loaded using

let img = new ImageAsset()
img.loadFile(path)

Closes without error on Android

When I create a simple view where I try to draw it closes the app unexpectedly with no error, when the app doesn't close the canvas draws nothing, on iOS works perfectly.

NativeScript Core: 7.2.1
NativeScript Android: 7.0.1
@nativescript-community/ui-canvas: 0.9.9

ImageBitmap Support

xmldom should be listed as a Peer Dependency

My Environment:
OS: Windows 10
Cli-Version: Nativescript v8.0.1
Flavor: Nativescript-Vue
Android Runtime: v8.0.0
IOS Runtime: v8.0.0

The Problem

Installing @nativescript/canvas in my Nativescript-Vue app produces the following error:

[2] ERROR in ./node_modules/@nativescript/canvas/SVG/SVG.js 48:0-35
[2] Module not found: Error: Can't resolve 'xmldom' in 'C:\Users\joshm\Documents\Modii\Clients\Adviise\adviise\projects\main-nativescript\node_modules\@nativescript\canvas\SVG'

Running npm i --save xmldom fixes the error. So it seems like this plugin expects xmldom to be present in the project.

Solution

xmldom should be added as a peer dependency or as a regular dependency to prevent confusion.

Received status code 401 from server: Unauthorized

Environment:

OS: Windows 10
Nativescript CLI: v8.0.1
Android Runtime: v8.0.0
Ios Runtime: v8.0.0

Issue

I installed the following plugins in my project to give it a go @nativescript/canvas,
@nativescript/canvas-polyfill, @nativescript/canvas-three however when I run ns run I get the following error.

Build file 'C:\Users\joshm\Documents\Modii\Projects\hiit-workout-app\hiitman\projects\hiitman-nativescript\platforms\android\app\build.gradle' line: 633
A problem occurred configuring project ':app'.
Could not GET 'https://jitpack.io/com/github/triniwiz/canvas/0.9.11/canvas-0.9.11.pom'. Received status code 401 from server: 
Unauthorized

For some reason there's an http request going to a private repo. (https://jitpack.io/com/github/triniwiz/canvas/0.9.11/canvas-0.9.11.pom) It's preventing my app from building.

I also tried removing @nativescript/canvas-three and got the same error

App Crashes or self is not defined | Pixi, Canvas, Polyfill

Hi!

Hope you're well.

I am trying to integrate pixijs on nativescript so I can utilize, but I'm facing an issue which unfortunately does crash the app at any case when I integrate the @nativescript/canvas, @nativescript/canvas-polyfill, @nativescript/canvas-pixi.

Platform: Android

NS version: 8.0.2
Npm version: 6.14.13
Node version: v14.17.0
Packages versions:

"@nativescript/canvas": "^1.0.0-alpha.2",
"@nativescript/canvas-pixi": "^1.0.0-alpha6",
"@nativescript/canvas-polyfill": "1.0.0-alpha24",
"pixi.js": "^6.1.2",
"three": "^0.132.2"

What have I tried so far?

I've tried through new app
Tried different demos, but ideally to make it work for nativescript-vue
Switching imports to require
Switching imports order, for example polyfill to be at the earliest stage on app.ts, while requiring the @nativescript/canvas/vue to register the Canvas and afterwards on a page component requreing @nativescript/canvas-pixi
Did i install pixi? Yes
Did I try different versions of plugin, other then alpha? Yes
Did I try externalsPresets -> node: false on webpack? Yes
Read endless of other issues to see if may I am writing something wrong, or perhaps this issue was known already. None found that is diff from the demo
Checked for sdk min requirements and such

I've added an example of this
testCanvasApp.zip

Few issues I've faced so far

self.is not defined which is coming from polyfill. In fact I did try to add global.self = null to initialize but didn't work either
App crashes without logging, even when using adb logcat

Looking forward to hearing from you, and hopefully I can be assisted and fixed if there is any issue.

Best regards,
Cheers

Cannot read property 'loaded' of undefined

Good day!

I am attempting to create a game using NativeScript and its plugins.
A few days ago I found this repo and since that I am excited to try it in my game. (phaser)

Today I tried to make it work and I get this error.

System.err: TypeError: Cannot read property 'loaded' of undefined
System.err: File: (file: app/webpack:/org.akarda.quest/node_modules/@nativescript/canvas-media/video/common.js:133:0)

NativeScript: 8.0.1
Platform: Android (6.0.1)

package.json:

{
  "name": "org.akarda.quest",
  "main": "app/app.js",
  "scripts": {
    "start": "ns run android --no-hmr"
  },
  "dependencies": {
    "@nativescript/canvas": "^0.9.21",
    "@nativescript/canvas-phaser": "^1.0.0-alpha6",
    "@nativescript/canvas-polyfill": "^1.0.0-alpha24",
    "@nativescript/core": "~8.0.0",
    "@nativescript/theme": "~3.0.1",
    "nativescript-vue": "~2.9.0",
    "phaser": "^3.54.0"
  },
  "devDependencies": {
    "@nativescript/android": "8.0.0",
    "@nativescript/webpack": "5.0.0-beta.2",
    "nativescript-vue-template-compiler": "~2.9.0",
    "sass": "^1.32.8"
  },
  "private": "true"
}

app.js:

require('@nativescript/canvas-polyfill');

import Vue from 'nativescript-vue'
import Canvas from '@nativescript/canvas/vue';

Vue.use(Canvas);

import Game from './components/Game';

new Vue({
  render: (h) => h('frame', [h(Game)]),
}).$start()

Game.vue:

<template>
  <Page actionBarHidden="true">
    <GridLayout rows="*, auto, *">
      <Canvas row="1" class="canvas" @ready="onCanvasReady" />
    </GridLayout>
  </Page>
</template>

<script>
import * as TNSPhaser from "@nativescript/canvas-phaser";

export default {
  methods: {
    onCanvasReady(args) {
      const canvas = args.object;

      /* const game = TNSPhaser.Game({ canvas }); */
    },
  },
}
</script>

<style>
.canvas {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}
</style>

There is no error when I remove import * as TNSPhaser from "@nativescript/canvas-phaser"; statement from Game.vue.

NativeScript encountered a fatal error: Uncaught ReferenceError: TouchEvent is not defined

When I tap on the canvas I receive the next fatal error:

NativeScript encountered a fatal error: Uncaught ReferenceError: TouchEvent is not defined
at
_getTouchEvent(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/canvas/Canvas/common.js:278:0)
at _emitEvent(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/canvas/Canvas/common.js:281:0)
at _touchEvent(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/canvas/Canvas/common.js:115:0)
at _executeCallback(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/ui/gestures/index.ios.js:197:0)
at TouchGestureRecognizer.executeCallback(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/ui/gestures/index.ios.js:403:0)
at TouchGestureRecognizer.touchesBeganWithEvent(file: app/webpack:/@nativescript/template-hello-world-ts/node_modules/@nativescript/core/ui/gestures/index.ios.js:375:0)

package.json

  "dependencies": {
    "@nativescript/canvas": "^1.0.0-alpha.2",
    "@nativescript/canvas-phaser": "^1.0.0-beta.0",
    "@nativescript/core": "~8.1.1",
    "@nativescript/theme": "~3.0.1",
    "phaser": "3.55.2",
    "xmldom-qsa": "^1.0.3"
  },

main-page.xml

<Page xmlns:canvas="@nativescript/canvas">
    <GridLayout width="100%" height="100%">
        <canvas:Canvas width="100%" height="100%" id="canvas" ready="onCanvasReady"/>
    </GridLayout>
</Page>

main-page.ts

export function onCanvasReady(args: EventData) {
  const canvas = <any>args.object;
  const config: Phaser.Types.Core.GameConfig = {
    canvas,
    type: Phaser.CANVAS,
    customEnvironment: true,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
  };
  // @ts-ignore
  const game = new TNSPhaser.Game(config);
}

Canvas will not render on Android when app is coming from background

Im trying to create a new iOS type "squircle"-shaped buttons in one project and came up with the idea to draw the the curves using some kind of custom paint and found this plugin. I managed to create a custom layout using a flexbox as base and then the canvas for the left/right side of the button. I also use the canvas to draw the icon based on the SVG-path since I would like to change color programmatically. Here is a version of my template:

<StackLayout padding="100 50">
  <FlexboxLayout>
    <Canvas ref="left" width="22" height="44" @ready="renderLeft"></Canvas>
    <FlexboxLayout
      ref="center"
      alignSelf="stretch"
      flexGrow="2"
      alignItems="center"
      justifyContent="center"
      @loaded="renderCenter"
    >
      <Canvas
        id="icon"
        width="24"
        height="24"
        marginRight="8"
        @ready="renderIcon"
      ></Canvas>
      <Label text="Label" textAlignment="center" color="#ffffff"></Label>
    </FlexboxLayout>
    <Canvas id="right" width="22" height="44" @ready="renderRight"></Canvas>
  </FlexboxLayout>
</StackLayout>

Everything is working fine on iOS. The button render like it's supposed to:

On my real Android device the button render the first time you launch the app, but if you suspend it and then open it from running in the background the canvas will not render. It works on my Android emulator it renders but with a small delay but on my real device it will not render at all.

On first launch of app:

When coming back from background:

I have tried to generate both a angular and a vue project and have got the same result on both.

Here are my dependencies in the vue project:

"dependencies": {
    "@nativescript/canvas": "1.0.0-alpha.2",
    "@nativescript/core": "~8.0.0",
    "@nativescript/theme": "~3.0.1",
    "nativescript-vue": "~2.9.0"
  },
  "devDependencies": {
    "@nativescript/android": "8.0.0",
    "@nativescript/ios": "8.0.0",
    "@nativescript/webpack": "beta",
    "nativescript-vue-template-compiler": "~2.9.0",
    "sass": "^1.32.8"
  },

Here are my dependencies in the angular project:

"dependencies": {
    "@angular/animations": "~12.0.0",
    "@angular/common": "~12.0.0",
    "@angular/compiler": "~12.0.0",
    "@angular/core": "~12.0.0",
    "@angular/forms": "~12.0.0",
    "@angular/platform-browser": "~12.0.0",
    "@angular/platform-browser-dynamic": "~12.0.0",
    "@angular/router": "~12.0.0",
    "@nativescript/angular": "~12.0.0",
    "@nativescript/canvas": "^1.0.0-alpha.2",
    "@nativescript/core": "~8.0.0",
    "@nativescript/theme": "~3.0.1",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~12.0.0",
    "@nativescript/android": "8.0.0",
    "@nativescript/ios": "8.0.0",
    "@nativescript/types": "~8.0.0",
    "@nativescript/webpack": "beta",
    "@ngtools/webpack": "~12.0.0",
    "typescript": "~4.2.0"
  },

I don't know why it stops working when coming from the background. It feels like the UI re-renders but that the "ready" event stops firing or something. It's the same behaviour on both angular and vue. It's only on real device also a OnePlus Nord2 5G running Android 11.

Bintray is being deprecated

Therefore cfg files like https://dl.bintray.com/triniwiz/maven/com/github/triniwiz/canvas/0.9.15/canvas-0.9.15.pom cannot be loaded in newest version of the plugin

Performance!!!!!!

Rewrite handling GL in rust
use rust bindings in v8 *bye bye bridge

Empty textures are not empty (on iOS)

When creating an empty texture using gl.texImage2D(), where the passed data is null, you get a texture that is prefilled with color (1, 1, 1, 0.5), while on browser you get (0, 0, 0, 0). Is this intended?

Typical performance using webgl with this plugin.

I made a simple bunny-mark test using WebGL API, ran the app on an iPhone X, and only got stable 60fps at ~800-900 bunnies.
The same source code can easily run 60fps on safari with more than 10000 bunnies.

Is that the typical performance we can get? Or am I doing something wrong?
My example is using an in-house rendering engine. It can be the problem. But did anyone run pixijs bunny-mark using this plugin?