@nativescript-community/ui-htmlcanvasapi NPM

@nativescript-community/ui-htmlcanvasapi

An HTML Canvas implementation on top of @nativescript-community/ui-canvas.

Supported classes:

OffscreenCanvas
CanvasRenderingContext2D
HTMLCanvasElement
ImageBitmapRenderingContext
OffscreenCanvasRenderingContext2D
CanvasGradient
CanvasPattern
DOMMatrix
DOMPoint (not used yet)
Path2D
TextMetrics

Installation

npm install @nativescript-community/ui-htmlcanvasapi

Usage

Install polyfills (optional)

import { Application } from '@nativescript/core';
import { installPolyfills } from '@nativescript-community/ui-htmlcanvasapi';

installPolyfills();

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

Then, set up your view

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:canvas="@nativescript-community/ui-htmlcanvasapi">
  <Page.actionBar>
    <ActionBar title="ui-htmlcanvasapi" icon="" class="action-bar">
    </ActionBar>
  </Page.actionBar>
  <StackLayout class="p-20">
    <canvas:HTMLCanvasView width="400" height="400" hardwareAccelerated="true" draw="onDraw"/>
  </StackLayout>
</Page>

import { Canvas } from '@nativescript-community/ui-canvas';
import { HTMLCanvasView } from '@nativescript-community/ui-htmlcanvasapi';

export function onDraw(args: { object: HTMLCanvasView; canvas: Canvas }) {
	const ctx = args.object.getContext('2d');

	ctx.save();

	ctx.fillStyle = 'yellow';
	ctx.fillRect(10, 10, 200, 100);

	ctx.transform(1, 0.5, -0.5, 1, 30, 10);

	ctx.fillStyle = 'red';
	ctx.fillRect(10, 10, 200, 100);

	ctx.transform(1, 0.5, -0.5, 1, 30, 10);

	ctx.fillStyle = 'blue';
	ctx.fillRect(10, 10, 200, 100);

	ctx.restore();
}

Sometimes, there might be the need to draw things offscreen but keep reference to the view and eventually draw everything there.
An offscreen buffer can be enabled by setting isOffscreenBufferEnabled to true.
Note: Everything will be drawn onto view canvas once app calls view invalidate() method.

<canvas:HTMLCanvasView id="canvasView" width="100%" height="300" hardwareAccelerated="true" isOffscreenBufferEnabled="true"/>

import { HTMLCanvasView } from '@nativescript-community/ui-htmlcanvasapi';
import { EventData, Page } from '@nativescript/core';

function onNavigatedTo(args: EventData): void {
	const page = <Page>args.object;
	const canvasView = page.getViewById<HTMLCanvasView>("canvasView");
	const ctx = canvasView.getContext('2d');

	ctx.save();
	ctx.fillStyle = 'yellow';
	ctx.fillRect(10, 10, 200, 100);
	ctx.transform(1, 0.5, -0.5, 1, 30, 10);
	ctx.fillStyle = 'red';
	ctx.fillRect(10, 10, 200, 100);
	ctx.transform(1, 0.5, -0.5, 1, 30, 10);
	ctx.fillStyle = 'blue';
	ctx.fillRect(10, 10, 200, 100);
	ctx.restore();

	// Draw everything to view
	canvasView.invalidate();
}