Canvas

Appearance

Quick Start ​

This page shows minimal setup for each supported rendering mode.

2D example ​

ts
let canvas;
let ctx;

export function canvasReady(args) {
  canvas = args.object;
  ctx = canvas.getContext('2d');

  ctx.fillStyle = '#22c55e';
  ctx.fillRect(10, 10, 150, 100);
}

WebGL example ​

ts
let canvas;
let gl;

export function canvasReady(args) {
  canvas = args.object;
  gl = canvas.getContext('webgl');

  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0.0, 0.5, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
}

WebGPU example ​

WebGPU needs navigator.gpu, which @nativescript/canvas-polyfill provides. On Android it needs API 27 or later. See Platform support.

ts
import type { GPUAdapter, GPUDevice } from '@nativescript/canvas';
import { Screen } from '@nativescript/core';

let canvas;
let device: GPUDevice;

export async function canvasReady(args) {
  canvas = args.object;

  const adapter: GPUAdapter = (await navigator.gpu.requestAdapter()) as never;
  device = (await adapter.requestDevice()) as never;

  const devicePixelRatio = Screen.mainScreen.scale;
  canvas.width = canvas.clientWidth * devicePixelRatio;
  canvas.height = canvas.clientHeight * devicePixelRatio;

  const context = canvas.getContext('webgpu');

  // presentationFormat should be chosen based on your pipeline setup.
  context.configure({
    device,
    format: presentationFormat,
  });
}

Continue ​