Documentation

[nikkolai14]

Any documentation on how to use this plugin?

[triniwiz]

Docs coming soon but you can get started with the canvas with the following

ns plugin add @nativescript/canvas

IMPORTANT: ensure you include xmlns:canvas="@nativescript/canvas" on the Page element for core {N}

Using Core {N}

<canvas:Canvas id="canvas" width="100%" height="100%" ready="canvasReady"/>

For all the other flavors you need to register the element

Angular

import { CanvasModule } from '@nativescript/canvas/angular';

@NgModule({
    imports: [
    CanvasModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

Vue

import { Vue } from 'nativescript-vue';
import Canvas from '@nativescript/canvas/vue';
Vue.use(Canvas);

Then you can use either the 2D or WebGL APIs

2D

let ctx;
let canvas;
export function canvasReady(args) {
    console.log('canvas ready');
    canvas = args.object;
    console.log(canvas);
    ctx = canvas.getContext('2d');
    ctx.fillStyle = 'green';
    ctx.fillRect(10, 10, 150, 100);
}

WebGL

let gl;
let canvas;
export function canvasReady(args) {
    console.log('canvas ready');
    canvas = args.object;
    gl = canvas.getContext('webgl'); // 'webgl' || 'webgl2'
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    // Set the clear color to darkish green.
    gl.clearColor(0.0, 0.5, 0.0, 1.0);
    // Clear the context with the newly set color. This is
    // the function call that actually does the drawing.
    gl.clear(gl.COLOR_BUFFER_BIT);
}

Using other libs is possible with the @nativescript/canvas-polyfill it helps fill in the missing pieces in the dom and {N} it's not perfect so feel free to open an issue if something is missing. When planning to use another canvas lib it always safe to require('@nativescript/canvas-polyfill') early in the app boot e.g app.ts/main.ts so it will setup the the needed APIs also some of those libs usually do some checks early API checks.

So one could get let's say babylonjs working by installing the @nativescript/canvas , @nativescript/canvas-polyfill and the babylonjs package an simply using require('@nativescript/canvas-polyfill') in the app.ts then pass the gl context to the constructor.

Another example one could using Chartjs similar to the babylonjs setup but instead of passing a gl context to the construtor you would pass the 2d context

There are a few libs that have been updated to help make thing much easier

@nativescript/canvas-phaser-ce .. phaser-ce examples @nativescript/canvas-phaser .. phaser examples @nativescript/canvas-three .. three examples @nativescript/canvas-pixi .. examples

[nikkolai14]

@triniwiz thanks for the effort team!

[cgo123]

in Angular there is no Page-Element? What's with Angular?

IMPORTANT: ensure you include xmlns:canvas="@nativescript/canvas" on the Page element for core {N}

[triniwiz]

For angular it would be as follow

import { CanvasModule } from '@nativescript/canvas/angular';

@NgModule({
    imports: [
    CanvasModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

<Canvas #canvas width="100%" height="100%" (ready)="canvasReady($event)"/>

[Kurikania]

There are a few libs that have been updated to help make thing much easier

@nativescript/canvas-phaser-ce .. phaser-ce examples @nativescript/canvas-phaser .. phaser examples @nativescript/canvas-three .. three examples @nativescript/canvas-pixi .. examples

I've tried to start a canvas-phaser and a canvas-phaser-ce demo but I couldn't get what steps I have to perform in order to do that. I hope it will be clarified in the docs.