Skip to content
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NativeScript Canvas

npm npm Build Status

Powered by

Installation

tns plugin add nativescript-canvas-plugin

Note min ios support atm 11 | min android support 17

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

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

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages