@nativescript-community/ui-canvas

Implement Canvas into your NativeScript apps.

[](#table-of-contents)

Table of Contents

* Installation
* Usage
* Plain NativeScript
* XML
* NativeScript + Angular
* NativeScript + Vue
* NativeScript + Svelte
* Draw Method
* Examples:
* Demos and Development
* Repo Setup
* Build
* Demos
* Contributing
* Update repo
* Update readme
* Update doc
* Publish
* modifying submodules
* Questions

[](#installation)

Installation

Run the following command from the root of your project:

ns plugin add @nativescript-community/ui-canvas

$3

The nativescript Canvas is based on the Android Canvas class.
The android API is actually a direct subclass with some Additions

[](#plain-nativescript)

Plain NativeScript

IMPORTANT: _Make sure you include xmlns:cv="@nativescript-community/ui-canvas" on the Page element_

$3

``XML





`


[](#nativescript--angular)



NativeScript + Angular

`typescript
import { registerElement } from 'nativescript-angular/element-registry';
import { CanvasView } from '@nativescript-community/ui-canvas';
registerElement('CanvasView', () => CanvasView);
`

`html



[](#nativescript--vue)



NativeScript + Vue

`javascript
import Vue from 'nativescript-vue';
import CanvasPlugin from '@nativescript-community/ui-canvas/vue';

Vue.use(CanvasPlugin);
`

`html

`


[](#nativescript--svelte)



NativeScript + Svelte

`ts
// app/app.ts
import { registerNativeViewElement } from 'svelte-native/dom';
registerNativeViewElement('canvasView', () => require('@nativescript-community/ui-canvas').CanvasView);
`

`svelte




`


[](#draw-method-)



Draw Method

`ts
import type { Canvas } from '@nativescript-community/ui-canvas';
import { Paint, createRect } from '@nativescript-community/ui-canvas';
import { Color } from '@nativescript/core';

function draw(event: { canvas: Canvas }) {
const canvas = event.canvas;
const paint = new Paint();
paint.setColor(new Color('black'));
paint.strokeWidth = 10;
canvas.drawRect(createRect(0, 0, 200, 100), paint);
}
`

$3

- Simple
- A basic example
- Image
- An example drawing an image
- Shapes
- An example drawing shapes using template
- Animation
- An example of animating a shape
- Complex
- An example of animating a shape


[](#demos-and-development)



Demos and Development




$3

The repo uses submodules. If you did not clone with --recursive then you need to call
`
git submodule update --init
`

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

To develop and test:
if you use yarn then run yarn
if you use pnpm then run pnpm i

Interactive Menu:

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

$3

`bash
npm run build.all
`
WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

$3

`bash
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
`

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]
Instead you work in demo-snippets/[ng|react|svelte|vue]
You can start from the install.ts of each flavor to see how to register new demos


[](#contributing)



Contributing

$3

You can update the repo files quite easily

First update the submodules

`bash
npm run update
`

Then commit the changes
Then update common files

`bash
npm run sync
`
Then you can run yarn|pnpm, commit changed files if any

$3


`bash
npm run readme
`

$3

`bash
npm run doc
`

$3

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)
Simply run
`shell
npm run publish
`

$3

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
One easy solution is t modify ~/.gitconfig and add
`
[url "ssh://git@github.com/"]
pushInsteadOf = https://github.com/
``

[](#questions)

Questions

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.