NativeScript Canvas

Installation

tns plugin add nativescript-canvas-plugin

Usage

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

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);
 canvas.flush(); // must be called to draw on screen
}

API