# angular-canvas

> Angular canvas renderer

Latest version **0.3.0** (published 2021-09-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-canvas
pnpm add angular-canvas
yarn add angular-canvas
bun add angular-canvas
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2021-09-12 |
| First published | 2020-10-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 391.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 61 |
| Author | irustm |
| Maintainers | irustm |
| Keywords | angular, canvas, renderer |

## Links

- npm: https://www.npmjs.com/package/angular-canvas
- Repository: https://github.com/irustm/angular-canvas
- Homepage: https://github.com/irustm/angular-canvas#readme
- Issues: https://github.com/irustm/angular-canvas/issues
- npm.io page: https://npm.io/package/angular-canvas

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2021-09-12
- 0.2.0 — 2021-04-20
- 0.1.10 — 2020-12-17
- 0.1.9 — 2020-11-23
- 0.1.8 — 2020-11-23
- 0.1.7 — 2020-11-23
- 0.1.6 — 2020-11-23
- 0.1.5 — 2020-11-18
- 0.1.4 — 2020-11-18
- 0.1.3 — 2020-11-18
- 0.1.2 — 2020-10-27
- 0.1.1 — 2020-10-27
- 0.1.0 — 2020-10-25
- 0.0.7 — 2020-10-23
- 0.0.6 — 2020-10-22
- … 5 more at https://npm.io/package/angular-canvas/versions

## README

# AngularCanvas

🎨 Angular canvas renderer with support DefaultDomRenderer.

Features:

- **Custom canvas elements**
- **Support redraw** in one canvas context
- **Support listeners** inputs and outputs
- **Easily migrate** your code on canvas to component approach
- EmulatedEncapsulation by default in canvas component
- Canvas elements support onInit and onDestroy methods
- Support animation canvas elements

[Demo](https://irustm.github.io/angular-canvas/)

# Getting start

`npm i angular-canvas`

Create canvas element:

```ts
import { CanvasElement, NgCanvasElement, NgCanvas } from 'angular-canvas';

@CanvasElement({
  selector: 'graph-line'
})
export class GraphLineElement implements NgCanvasElement {
    // parent element
    public parent: NgCanvas;

    // canvas element redraw until all NgCanvasElement needDraw as true
    public needDraw: boolean;

    setNgProperty(name: string, value: any): void {
      this[name] = value;

      // redraw all element in one canvas context after set ng property
      this.parent.drawAll();
    }

    draw(context: CanvasRenderingContext2D, time: number): void {
      context.strokeStyle = 'red';
      ...
    }
}
```

Register this element in module

```ts
import { CanvasDomModule } from 'angular-canvas';
...

@NgModule({
...
imports: [
    CanvasDomModule.forRoot(
    [
      GraphLineElement,
      ...
    ]
  ),
```

And declare component `use canvas render`
@CanvasComponent

component.ts

```ts
@CanvasComponent
@Component({
  selector: 'app-graph-canvas-example',
  templateUrl: './graph-canvas-example.component.html',
  styleUrls: ['./graph-canvas-example.component.scss'],
})
```

component.html

```html
<p>Graph example</p>

<canvas class="first">
  <rect [x]="mouseX" [y]="20" w="20" h="20"></rect>
  <line [x1]="10" [x2]="100" [y1]="10" [y2]="200"></line>
</canvas>
<canvas>
  <graph-line
    [data]="data"
    [step]="step"
    [deltaX]="deltaX"
    strokeStyle="orange"
  ></graph-line>
  <graph-line
    [data]="data2"
    [step]="step"
    [deltaX]="deltaX"
    strokeStyle="green"
  ></graph-line>
  <graph-line [data]="data3" [deltaX]="deltaX" strokeStyle="blue"></graph-line>
</canvas>
```

<img src ="https://github.com/irustm/angular-canvas/blob/master/assets/graph-example.png?raw=true">

Game example:

<img src ="https://github.com/irustm/angular-canvas/blob/master/assets/game-example.png?raw=true">

# API

`NgCanvas` - main component with selector `canvas`

```ts
  public element: HTMLCanvasElement;
  public drawAll(): void; // redraw all register elements in one canvas context

```

---

`NgCanvasElement` - canvas element interface for register in module

```ts
  style?: CSSStyleDeclaration;
  classList?: DOMTokenList;
  needDraw?: boolean; // canvas element redraw until all NgCanvasElement needDraw as true
  parent: NgCanvas; // canvas parent element

  onInit?(context: CanvasRenderingContext2D): void;

  onDestroy?(context: CanvasRenderingContext2D): void;


  /**
  * Method for draw element, *time* - requestAnimationTime
  */
  draw(context: CanvasRenderingContext2D, time?: number): void;

  // standart renderer methods

  appendChild?(newChild: any): void;

  addClass?(name): void;

  insertBefore?(newChild: any, refChild: any): void;

  setNgAttribute?(name: string, value: string, namespace?: string | null): void;

  setAttribute?(name: string, value: string, namespace?: string | null): void;

  setNgProperty?(name: string, value: any): void;

  setStyle?(style: string, value: any, flags?: RendererStyleFlags2): void;

  setValue?(value: any): void;

  removeAttribute?(name: string, namespace?: string | null): void;

  removeChild?(oldChild: any): void;

  removeClass?(name: string): void;

  removeStyle?(style: string, flags?: RendererStyleFlags2): void;

  setAttributeNS?(namespaceUri: string, name: string, value: string): void;

  removeAttributeNS?(namespaceUri: string, name: string): void;
```

---

`CanvasComponent` - Decorator, need for use canvas renderer

---

`CanvasElement` - Decorator, for register canvas elements in storage metadata
support only one parameter: `selector`

---

`CanvasDomModule.forRoot([])` register elements in AppModule

---
_Source: https://npm.io/package/angular-canvas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._