# nativescript-community/ui-canvas architecture

> Architecture diagram of the GitHub repository nativescript-community/ui-canvas, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-03). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nativescript-community/ui-canvas
- Repository: https://github.com/nativescript-community/ui-canvas

## Overview

#### Purpose and package topology
This is a NativeScript plugin monorepo providing Android/iOS canvas rendering, canvas-based rich labels, interactive drawing, and SVG display. Published packages are defined under `packages/ui-canvas`, `packages/ui-canvaslabel`, `packages/ui-drawingcanvas`, and `packages/ui-svg`; their TypeScript implementations are centralized under `src/`.

#### Public entry points
Platform-specific NativeScript resolution selects Android/iOS implementations, while common files define shared API and behavior:
- Canvas: `src/ui-canvas/index.android.ts`, `src/ui-canvas/index.ios.ts`, `src/ui-canvas/index.common.ts`
- Canvas label: `src/ui-canvaslabel/canvaslabel.common.ts`, `src/ui-canvaslabel/canvaslabel.android.ts`, `src/ui-canvaslabel/canvaslabel.ios.ts`
- Drawing: `src/ui-drawingcanvas/index.ts`, `src/ui-drawingcanvas/DrawingCanvas.ts`
- SVG: `src/ui-svg/index.android.ts`, `src/ui-svg/index.ios.ts`, `src/ui-svg/index.common.ts`
Vue integration is a separate registration boundary in each package’s `src/*/vue/` directory.

#### Core canvas abstraction
`ui-canvas` exposes a NativeScript `CanvasView` and Canvas-like drawing API, including paints, paths, matrices, shaders, text layout, images, and primitives. App code receives a canvas through draw events and invokes drawing operations; platform adapters map the API to native graphics:
- `src/ui-canvas/canvas.common.ts`
- `src/ui-canvas/canvas.android.ts`
- `src/ui-canvas/canvas.ios.ts`

Reusable declarative shapes sit above this imperative layer in `src/ui-canvas/shapes/index.ts` and its shape classes.

#### Native rendering boundary
Android binds to Java canvas support, including the native view, matrix, path, layout, and path effects:
- `packages/ui-canvas/platforms/android/java/com/akylas/canvas/CanvasView.java`
- `packages/ui-canvas/platforms/android/java/com/akylas/canvas/CanvasPath.java`
- `packages/ui-canvas/platforms/android/java/com/akylas/canvas/StaticLayout.java`

iOS uses Objective-C/Swift helpers for Bezier geometry, drawing, gradients/shaders, text, and image utilities:
- `packages/ui-canvas/platforms/ios/src/Drawing-Util.m`
- `packages/ui-canvas/platforms/ios/src/BezierFunctions.m`
- `packages/ui-canvas/platforms/ios/src/Drawing-Text.m`

These are the principal JavaScript/TypeScript-to-native API boundaries.

#### CanvasLabel composition
`ui-canvaslabel` replaces many native text controls with one canvas-rendered view containing groups and spans. Its control flow is: NativeScript layout/properties → span/group model → platform text/canvas rendering. Android supplies a native `Span` implementation:
- `src/ui-canvaslabel/canvaslabel.common.ts`
- `src/ui-canvaslabel/canvaslabel.android.ts`
- `packages/ui-canvaslabel/platforms/android/java/com/nativescript/canvaslabel/Span.java`

This package is architected for high-density custom text rendering, especially list items, rather than automatic sizing or accessibility-first native labels.

#### Interactive drawing pipeline
`DrawingCanvas` is a higher-level editor built on `ui-canvas`. Touch input is delegated to the active mode; modes create or manipulate ordered drawable shapes; the canvas renders layers, tracks selection/history, emits events, and imports/exports JSON:
- Coordinator/state: `src/ui-drawingcanvas/DrawingCanvas.ts`
- Mode dispatch: `src/ui-drawingcanvas/modes/DrawingMode.ts`, `src/ui-drawingcanvas/modes/SelectMode.ts`
- Shape model/rendering: `src/ui-drawingcanvas/shapes/DrawableShape.ts`, `src/ui-drawingcanvas/shapes/PenShape.ts`

Pen input can be simplified and smoothed before becoming a shape through `src/ui-drawingcanvas/algorithms/douglasPeucker.ts` and `src/ui-drawingcanvas/algorithms/catmullRomSpline.ts`. Custom mode and shape-factory registration are explicit extension points needed for custom JSON round-tripping.

#### SVG and delivery infrastructure
`ui-svg` provides native `SVGView` plus canvas-oriented SVG components, with platform-specific adapters and native dependency declarations:
- `src/ui-svg/canvas.common.ts`
- `src/ui-svg/canvas.android.ts`
- `src/ui-svg/canvas.ios.ts`
- `packages/ui-svg/platforms/ios/Podfile`

The repository uses Node/TypeScript with pnpm/Yarn workspaces and Lerna publishing (`pnpm-workspace.yaml`, `lerna.json`). Native artifacts are built with Gradle on Android and Xcode/CocoaPods on iOS. The standalone native projects under `src-native/android` and `src-native/ios` support native canvas development/validation. Vue demo snippets exercise package registration and API usage under `demo-snippets/vue/`.

Main entry points: [`src/ui-canvas/canvas.common.ts`](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvas/canvas.common.ts) (CanvasView), [`src/ui-drawingcanvas/DrawingCanvas.ts`](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-drawingcanvas/DrawingCanvas.ts) (DrawingCanvas), [`src/ui-canvas/index.common.ts`](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvas/index.common.ts) (Canvas public entry), [`src/ui-drawingcanvas/shapes/DrawableShape.ts`](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-drawingcanvas/shapes/DrawableShape.ts) (Drawable shapes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_canvas["Canvas core"]
  node_canvas_entry["Canvas public entry<br/>NativeScript API<br/>[index.common.ts]"]
  node_canvas_view["CanvasView<br/>view API<br/>[canvas.common.ts]"]
  node_canvas_android["Android canvas adapter<br/>platform adapter<br/>[canvas.android.ts]"]
  node_canvas_ios["iOS canvas adapter<br/>platform adapter<br/>[canvas.ios.ts]"]
  node_declarative_shapes["Declarative shapes<br/>shape layer<br/>[index.ts]"]
end

subgraph group_label["Canvas label"]
  node_label_model["Label spans and groups<br/>text model"]
  node_label_android["Android label renderer<br/>platform adapter"]
end

subgraph group_drawing["Drawing editor"]
  node_drawing_editor["DrawingCanvas<br/>editor coordinator<br/>[DrawingCanvas.ts]"]
  node_drawing_modes["Drawing modes<br/>interaction dispatch<br/>[DrawingMode.ts]"]
  node_drawable_shapes["Drawable shapes<br/>editor model<br/>[DrawableShape.ts]"]
  node_pen_processing["Pen smoothing<br/>geometry pipeline<br/>[douglasPeucker.ts]"]
end

subgraph group_svg["SVG"]
  node_svg_entry["SVG canvas API<br/>NativeScript API<br/>[canvas.common.ts]"]
  node_svg_android["Android SVG adapter<br/>platform adapter<br/>[canvas.android.ts]"]
  node_svg_ios["iOS SVG adapter<br/>platform adapter<br/>[canvas.ios.ts]"]
end

subgraph group_native["Native rendering"]
  node_android_canvas_native{{"Android CanvasView<br/>Java native view<br/>[CanvasView.java]"}}
  node_android_span_native{{"Android Span<br/>Java text primitive<br/>[Span.java]"}}
  node_ios_drawing_native{{"iOS drawing utilities<br/>Objective-C native helper<br/>[Drawing-Util.m]"}}
end

node_workspace_publish["Workspace publishing<br/>monorepo delivery"]
node_vue_demos["Vue demo snippets<br/>integration examples"]

node_canvas_entry -->|"exposes"| node_canvas_view
node_canvas_view -->|"Android implementation"| node_canvas_android
node_canvas_view -->|"iOS implementation"| node_canvas_ios
node_declarative_shapes -->|"draws through"| node_canvas_view
node_canvas_android -->|"binds"| node_android_canvas_native
node_canvas_ios -->|"binds"| node_ios_drawing_native
node_label_model -->|"platform rendering"| node_label_android
node_label_android -->|"uses"| node_android_span_native
node_label_model -->|"renders on"| node_canvas_view
node_drawing_editor -->|"dispatches touch"| node_drawing_modes
node_drawing_modes -->|"creates and manipulates"| node_drawable_shapes
node_pen_processing -->|"produces pen geometry"| node_drawable_shapes
node_drawing_editor -->|"renders and serializes"| node_drawable_shapes
node_drawing_editor -->|"built on"| node_canvas_view
node_svg_entry -->|"Android implementation"| node_svg_android
node_svg_entry -->|"iOS implementation"| node_svg_ios
node_workspace_publish -.->|"publishes package"| node_canvas_entry
node_vue_demos -.->|"uses"| node_canvas_entry

click node_canvas_entry "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvas/index.common.ts"
click node_canvas_view "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvas/canvas.common.ts"
click node_canvas_android "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvas/canvas.android.ts"
click node_canvas_ios "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvas/canvas.ios.ts"
click node_declarative_shapes "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvas/shapes/index.ts"
click node_label_model "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvaslabel/canvaslabel.common.ts"
click node_label_android "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvaslabel/canvaslabel.android.ts"
click node_drawing_editor "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-drawingcanvas/DrawingCanvas.ts"
click node_drawing_modes "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-drawingcanvas/modes/DrawingMode.ts"
click node_drawable_shapes "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-drawingcanvas/shapes/DrawableShape.ts"
click node_pen_processing "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-drawingcanvas/algorithms/douglasPeucker.ts"
click node_svg_entry "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-svg/canvas.common.ts"
click node_svg_android "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-svg/canvas.android.ts"
click node_svg_ios "https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-svg/canvas.ios.ts"
click node_android_canvas_native "https://github.com/nativescript-community/ui-canvas/blob/master/packages/ui-canvas/platforms/android/java/com/akylas/canvas/CanvasView.java"
click node_android_span_native "https://github.com/nativescript-community/ui-canvas/blob/master/packages/ui-canvaslabel/platforms/android/java/com/nativescript/canvaslabel/Span.java"
click node_ios_drawing_native "https://github.com/nativescript-community/ui-canvas/blob/master/packages/ui-canvas/platforms/ios/src/Drawing-Util.m"
click node_workspace_publish "https://github.com/nativescript-community/ui-canvas/blob/master/pnpm-workspace.yaml"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_canvas_entry,node_canvas_view,node_canvas_android,node_canvas_ios,node_declarative_shapes toneBlue
class node_label_model,node_label_android toneAmber
class node_drawing_editor,node_drawing_modes,node_drawable_shapes,node_pen_processing toneMint
class node_svg_entry,node_svg_android,node_svg_ios toneRose
class node_android_canvas_native,node_android_span_native,node_ios_drawing_native toneIndigo
class node_workspace_publish,node_vue_demos toneNeutral
```

## Components

### Canvas core

- [Canvas public entry](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvas/index.common.ts): NativeScript API · Platform resolution selects Android or iOS behavior. · `src/ui-canvas/index.common.ts`
- [CanvasView](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvas/canvas.common.ts): view API · Delivers a canvas-like drawing surface to application draw handlers. · `src/ui-canvas/canvas.common.ts`
- [Android canvas adapter](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvas/canvas.android.ts): platform adapter · `src/ui-canvas/canvas.android.ts`
- [iOS canvas adapter](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvas/canvas.ios.ts): platform adapter · `src/ui-canvas/canvas.ios.ts`
- [Declarative shapes](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvas/shapes/index.ts): shape layer · Reusable shapes above the imperative canvas API. · `src/ui-canvas/shapes/index.ts`

### Canvas label

- [Label spans and groups](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvaslabel/canvaslabel.common.ts): text model · Composes rich text into one canvas-rendered view. · `src/ui-canvaslabel/canvaslabel.common.ts`
- [Android label renderer](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-canvaslabel/canvaslabel.android.ts): platform adapter · `src/ui-canvaslabel/canvaslabel.android.ts`

### Drawing editor

- [DrawingCanvas](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-drawingcanvas/DrawingCanvas.ts): editor coordinator · Owns layers, selection, history, events, and JSON import/export. · `src/ui-drawingcanvas/DrawingCanvas.ts`
- [Drawing modes](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-drawingcanvas/modes/DrawingMode.ts): interaction dispatch · Delegates touch input to the active editing mode. · `src/ui-drawingcanvas/modes/DrawingMode.ts`
- [Drawable shapes](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-drawingcanvas/shapes/DrawableShape.ts): editor model · Ordered renderable shapes and custom shape factories support JSON round-tripping. · `src/ui-drawingcanvas/shapes/DrawableShape.ts`
- [Pen smoothing](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-drawingcanvas/algorithms/douglasPeucker.ts): geometry pipeline · Simplifies and smooths pen input before shape creation. · `src/ui-drawingcanvas/algorithms/douglasPeucker.ts`

### SVG

- [SVG canvas API](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-svg/canvas.common.ts): NativeScript API · Provides SVGView and canvas-oriented SVG components. · `src/ui-svg/canvas.common.ts`
- [Android SVG adapter](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-svg/canvas.android.ts): platform adapter · `src/ui-svg/canvas.android.ts`
- [iOS SVG adapter](https://github.com/nativescript-community/ui-canvas/blob/master/src/ui-svg/canvas.ios.ts): platform adapter · `src/ui-svg/canvas.ios.ts`

### Native rendering

- [Android CanvasView](https://github.com/nativescript-community/ui-canvas/blob/master/packages/ui-canvas/platforms/android/java/com/akylas/canvas/CanvasView.java): Java native view · Primary JavaScript-to-Android canvas rendering boundary. · `packages/ui-canvas/platforms/android/java/com/akylas/canvas/CanvasView.java`
- [Android Span](https://github.com/nativescript-community/ui-canvas/blob/master/packages/ui-canvaslabel/platforms/android/java/com/nativescript/canvaslabel/Span.java): Java text primitive · `packages/ui-canvaslabel/platforms/android/java/com/nativescript/canvaslabel/Span.java`
- [iOS drawing utilities](https://github.com/nativescript-community/ui-canvas/blob/master/packages/ui-canvas/platforms/ios/src/Drawing-Util.m): Objective-C native helper · Provides native drawing, gradients, text, and image utilities. · `packages/ui-canvas/platforms/ios/src/Drawing-Util.m`

### Other components

- [Workspace publishing](https://github.com/nativescript-community/ui-canvas/blob/master/pnpm-workspace.yaml): monorepo delivery · pnpm/Yarn workspaces and Lerna publish the plugin packages. · `pnpm-workspace.yaml`
- **Vue demo snippets**: integration examples · Exercise package registration and public APIs.

## Connections

- Canvas public entry → CanvasView: exposes
- CanvasView → Android canvas adapter: Android implementation
- CanvasView → iOS canvas adapter: iOS implementation
- Declarative shapes → CanvasView: draws through
- Android canvas adapter → Android CanvasView: binds
- iOS canvas adapter → iOS drawing utilities: binds
- Label spans and groups → Android label renderer: platform rendering
- Android label renderer → Android Span: uses
- Label spans and groups → CanvasView: renders on
- DrawingCanvas → Drawing modes: dispatches touch
- Drawing modes → Drawable shapes: creates and manipulates
- Pen smoothing → Drawable shapes: produces pen geometry
- DrawingCanvas → Drawable shapes: renders and serializes
- DrawingCanvas → CanvasView: built on
- SVG canvas API → Android SVG adapter: Android implementation
- SVG canvas API → iOS SVG adapter: iOS implementation
- Workspace publishing → Canvas public entry: publishes package
- Vue demo snippets → Canvas public entry: uses