@nativescript-community/ui-htmlcanvasapi
An HTML Canvas API implementation on top of android and iOS native APIs
npm i --save @nativescript-community/ui-htmlcanvasapi
- Version: 1.2.0
- GitHub: https://github.com/CatchABus/nativescript-plugins
- NPM: https://www.npmjs.com/package/%40nativescript-community%2Fui-htmlcanvasapi
- Downloads:
- Last Day: 32
- Last Week: 95
- Last Month: 344
@nativescript-community/ui-htmlcanvasapi
An HTML Canvas implementation on top of @nativescript-community/ui-canvas.
Supported classes:
- OffscreenCanvas
- CanvasRenderingContext2D
- 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();
}
Note: If you wish to draw outside of draw listener context, you should call HTMLCanvasView
invalidate()
method in order to request view to redraw itself.
import { HTMLCanvasView } from '@nativescript-community/ui-htmlcanvasapi';
function updateGraph(canvasView: HTMLCanvasView) {
const ctx = canvasView.getContext('2d');
ctx.save();
ctx.fillStyle = 'yellow';
ctx.fillRect(10, 10, 200, 100);
ctx.restore();
canvasView.invalidate();
}
Sometimes, there might be a need to draw things offscreen but keep reference to the view and eventually want to draw everything there.
HTMLCanvasView
includes these custom methods:
- enableOffscreenBuffer
- disableOffscreenBuffer
- isOffscreenBufferEnabled
- drawOffscreenBuffer
const view = args.object;
const ctx = view.getContext('2d');
view.enableOffscreenBuffer();
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();
view.drawOffscreenBuffer();
// If buffer is no longer needed, just discard it
view.disableOffscreenBuffer();
Note: This state is required to perform actions like toDataURL
.
License
Apache License Version 2.0