From 657da57860faebe3fcda80b653ed9b5e9e860e07 Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Wed, 17 May 2023 19:35:41 +0200
Subject: [PATCH 1/3] docs(canvas): improving content

---
 packages/canvas/README.md | 91 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 87 insertions(+), 4 deletions(-)

diff --git a/packages/canvas/README.md b/packages/canvas/README.md
index a8e96d7c3..fdf8ff5e7 100644
--- a/packages/canvas/README.md
+++ b/packages/canvas/README.md
@@ -1,27 +1,66 @@
 # NativeScript Canvas
 
-**Powered by**
+## Introduction
+
+This plugin provides a canvas view for NativeScript applications. It is powered by the following libraries:
 
 - [CanvasNative](src-native/canvas-native) - Rust
 - [CanvasNative](src-native/canvas-ios) - IOS
 - [CanvasNative](src-native/canvas-android) - Android
 
+>**Minimum version supported:** <br> - `iOS`: `11` <br>  - `Android`: `API 17`
+
+
 ## Installation
 
+To install the plugin, run the following command from the root of your project:
+
 ```bash
 ns plugin add @nativescript/canvas
 ```
 
-_Note_ min ios support 11 | min android support 17
+You also need to install the following 2 plugins:
+
+- `ns plugin add @nativescript/canvas-polyfill`
+
+- `ns plugin add @nativescript/canvas-media`
+
+## How to use @nativescript/canvas 
+
+The following sections describe how to use the plugin in different frameworks.
+
+### Using @nativescript/canvas in NativeScript Core
+
+1. Register the plugin
+
+2. Add the Canvas view to your page
+
+### Using @nativescript/canvas in NativeScript Angular
+
+1. Register the plugin
+
+2. Add the Canvas view to your page
+### Using @nativescript/canvas in NativeScript Vue
+
+1. Register the plugin
+
+2. Add the Canvas view to your page
+
+### Using @nativescript/canvas in NativeScript Svelte
+
+1. Register the plugin
+
+2. Add the Canvas view to your page
+
 
 IMPORTANT: ensure you include xmlns:canvas="@nativescript/canvas" on the Page element for core {N}
 
-## Usage
+# Usage
 
 ```xml
 <canvas:Canvas id="canvas" width="100%" height="100%" ready="canvasReady"/>
 ```
-
+## Vanilla
 ### 2D
 
 ```typescript
@@ -54,9 +93,53 @@ export function canvasReady(args) {
 	gl.clear(gl.COLOR_BUFFER_BIT);
 }
 ```
+## Vue
+In `app.ts`, add:
+
+```
+Vue.registerElement("Canvas", ()=>require("@nativescript/canvas").Canvas)
+```
+Then in a `.vue` file:
+
+```xml
+<template>
+  <Page>
+    <ActionBar>
+      <Label text="Home" />
+    </ActionBar>
+
+    <GridLayout>
+      <Canvas id="canvas" width="100%" height="100%" @ready="canvasReady" />
+    </GridLayout>
+  </Page>
+</template>
+```
+```ts
+let ctx;
+let canvas;
+export default Vue.extend({
+  methods: {
+
+    canvasReady(args: EventData) {
+      console.log('canvas ready');
+      canvas = args.object as Canvas;
+      console.log(canvas);
+      ctx = (<any>canvas.getContext('2d')) as CanvasRenderingContext2D;
+
+      ctx.fillStyle = 'green';
+      ctx.fillRect(10, 10, 150, 100);
+    }
+  }
+```
 
 ## API
+### Canvas class
 
+|Method| Return Type| Description|
+|------|------------|------------|
+|`getContext(type: string, options?: any)`|`CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext | null`||
+|`toDataURL(type?: string, encoderOptions?: number)`| `any`||
+|`getBoundingClientRect()`| `{x: number; y: number;width: number;height: number;top: number;right: number;bottom: number;left: number;}`||
 - 2D Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
 - WebGL Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext)
 - WebGL2 Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext)

From 641b969147548f7b3a10163ebc96d160698acb0d Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Mon, 22 May 2023 16:12:53 +0200
Subject: [PATCH 2/3] chore: update

---
 packages/canvas/README.md | 149 ++++++++++++++++++++++++++++----------
 1 file changed, 110 insertions(+), 39 deletions(-)

diff --git a/packages/canvas/README.md b/packages/canvas/README.md
index fdf8ff5e7..acf8a7b56 100644
--- a/packages/canvas/README.md
+++ b/packages/canvas/README.md
@@ -19,11 +19,11 @@ To install the plugin, run the following command from the root of your project:
 ns plugin add @nativescript/canvas
 ```
 
-You also need to install the following 2 plugins:
+<!-- You also need to install the following 2 plugins:
 
 - `ns plugin add @nativescript/canvas-polyfill`
 
-- `ns plugin add @nativescript/canvas-media`
+- `ns plugin add @nativescript/canvas-media` -->
 
 ## How to use @nativescript/canvas 
 
@@ -33,35 +33,22 @@ The following sections describe how to use the plugin in different frameworks.
 
 1. Register the plugin
 
-2. Add the Canvas view to your page
+To register the plugin, use the Page view's `xmlns` attribute to declare the plugin namespace under a prefix, as follows:
 
-### Using @nativescript/canvas in NativeScript Angular
-
-1. Register the plugin
-
-2. Add the Canvas view to your page
-### Using @nativescript/canvas in NativeScript Vue
-
-1. Register the plugin
-
-2. Add the Canvas view to your page
-
-### Using @nativescript/canvas in NativeScript Svelte
-
-1. Register the plugin
-
-2. Add the Canvas view to your page
-
-
-IMPORTANT: ensure you include xmlns:canvas="@nativescript/canvas" on the Page element for core {N}
+```xml
+<Page xmlns:canvas="@nativescript/canvas">
+...
+</Page>
+```
 
-# Usage
+2. Use the Canvas view
 
+Next, use the prefix(`canvas`) to access the Canvas view in the page
 ```xml
 <canvas:Canvas id="canvas" width="100%" height="100%" ready="canvasReady"/>
 ```
-## Vanilla
-### 2D
+
+#### 2D rendering context
 
 ```typescript
 let ctx;
@@ -76,7 +63,7 @@ export function canvasReady(args) {
 }
 ```
 
-### WEBGL
+#### WEBGL rendering context
 
 ```typescript
 let gl;
@@ -93,11 +80,26 @@ export function canvasReady(args) {
 	gl.clear(gl.COLOR_BUFFER_BIT);
 }
 ```
-## Vue
-In `app.ts`, add:
 
-```
-Vue.registerElement("Canvas", ()=>require("@nativescript/canvas").Canvas)
+<!-- ### Using @nativescript/canvas in NativeScript Angular
+
+1. Register the plugin
+
+2. Add the Canvas view to your page -->
+### Using @nativescript/canvas in NativeScript Vue
+
+1. Register the plugin
+
+In the `app.ts` file, add the following code:
+
+```ts
+import { registerElement } from 'nativescript-vue'
+
+registerElement(
+  'Canvas',
+  () => require('@nativescript/canvas').Canvas
+)
+
 ```
 Then in a `.vue` file:
 
@@ -115,12 +117,13 @@ Then in a `.vue` file:
 </template>
 ```
 ```ts
+<script lang="ts" setup>
+import { Canvas } from '@nativescript/canvas';
+import { EventData } from '@nativescript/core';
 let ctx;
 let canvas;
-export default Vue.extend({
-  methods: {
 
-    canvasReady(args: EventData) {
+function canvasReady(args: EventData) {
       console.log('canvas ready');
       canvas = args.object as Canvas;
       console.log(canvas);
@@ -129,17 +132,85 @@ export default Vue.extend({
       ctx.fillStyle = 'green';
       ctx.fillRect(10, 10, 150, 100);
     }
-  }
+</script>
+```
+
+### Using @nativescript/canvas in NativeScript Svelte
+
+1. Register the plugin
+
+In the `app.ts` file, register the plugin as follows:
+
+```ts
+import { registerNativeViewElement } from 'svelte-native/dom'
+
+registerNativeViewElement('canvas', () => require('@nativescript/canvas').Canvas)
 ```
 
+2. Then, in a `.svelte` file, add use the Canvas view as follows:
+
+
+```svelte
+<script lang="ts">
+  let ctx;
+  let canvas;
+  function canvasReady(args: any) {
+    console.log("canvas ready");
+    canvas = args.object;
+    console.log(canvas);
+    ctx = canvas.getContext("2d");
+    ctx.fillStyle = "green";
+    ctx.fillRect(10, 10, 150, 100);
+    ctx.fillStyle = "red";
+    ctx.fillRect(200, 10, 150, 100);
+  }
+</script>
+
+<page>
+  <actionBar title="Canvas" />
+  <gridLayout rows="auto, *">
+    <canvas width="100%" height="100%" on:ready={canvasReady} />
+  </gridLayout>
+</page>
+```
 ## API
 ### Canvas class
 
-|Method| Return Type| Description|
-|------|------------|------------|
-|`getContext(type: string, options?: any)`|`CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext | null`||
-|`toDataURL(type?: string, encoderOptions?: number)`| `any`||
-|`getBoundingClientRect()`| `{x: number; y: number;width: number;height: number;top: number;right: number;bottom: number;left: number;}`||
+#### getContext()
+```ts
+context : CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext | null = canvas.getContext(type, options)
+```
+
+| Param | Type | Description |
+| --- | --- | --- |
+| `type` | `string` | The context type. Can be either `2d`, `webgl` or `webgl2` |
+| `options?` | `any` | The context options. |
+
+---
+#### toDataURL()
+```ts
+data : any = canvas.toDataURL(type, encoderOptions)
+```
+
+| Param | Type | Description |
+| --- | --- | --- |
+| `type?` | `string` | 
+| `encoderOptions?` | `number` |
+
+---
+#### getBoundingClientRect()
+```ts
+rect : {x: number; y: number;width: number;height: number;top: number;right: number;bottom: number;left: number;} = canvas.getBoundingClientRect()
+```
+
+---
+
+#### flush()
+```ts
+canvas.flush()
+```
+
+---
 - 2D Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
 - WebGL Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext)
 - WebGL2 Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext)

From 860047b54f6934a079b8cebaaa66060f5505ef80 Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Thu, 25 May 2023 17:07:13 +0200
Subject: [PATCH 3/3] chore: update

---
 packages/canvas/README.md | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/canvas/README.md b/packages/canvas/README.md
index acf8a7b56..35eea73e6 100644
--- a/packages/canvas/README.md
+++ b/packages/canvas/README.md
@@ -19,11 +19,15 @@ To install the plugin, run the following command from the root of your project:
 ns plugin add @nativescript/canvas
 ```
 
-<!-- You also need to install the following 2 plugins:
+The canvas plugin can be used with the following plugins:
 
-- `ns plugin add @nativescript/canvas-polyfill`
-
-- `ns plugin add @nativescript/canvas-media` -->
+- [@nativescript/babylon](https://www.npmjs.com/package/@nativescript/canvas-babylon): For rendering 3D graphics
+- [@nativescript/canvas-polyfill](https://github.com/NativeScript/canvas/tree/master/packages/canvas-polyfill): For polyfilling the canvas API
+- [@nativescript/canvas-media](https://github.com/NativeScript/canvas/tree/master/packages/canvas-media): For rendering video and audio
+- [@nativescript/canvas-three](https://www.npmjs.com/package/@nativescript/canvas-three): For rendering 3D graphics
+- [@nativescript/canvas-phaser](https://github.com/NativeScript/canvas/tree/master/packages/canvas-phaser): For rendering 2D graphics
+- [@nativescript/canvas-pixi](https://github.com/NativeScript/canvas/tree/master/packages/canvas-pixi): 
+- [@nativescript/canvas-phaser-ce](https://github.com/NativeScript/canvas/tree/master/packages/canvas-phaser-ce)
 
 ## How to use @nativescript/canvas 
 
@@ -80,6 +84,16 @@ export function canvasReady(args) {
 	gl.clear(gl.COLOR_BUFFER_BIT);
 }
 ```
+### Example: Create a swarm effect
+To use the canvas plugin to create a swarm effect, see the example at the following link:
+
+https://github.com/NativeScript/canvas/blob/cc723b4504a6878d8e25ec6b1fea22f5ca949f30/tools/demo/canvas/canvas2d/particles/swarm.ts
+
+### Example: solar system animation
+
+To use the canvas plugin to create a solar system animation, see the example at the following link:
+
+https://github.com/NativeScript/canvas/blob/cc723b4504a6878d8e25ec6b1fea22f5ca949f30/tools/demo/canvas/canvas2d/solarSystem.ts
 
 <!-- ### Using @nativescript/canvas in NativeScript Angular