@sirusdev/canvas-input-angular v0.0.1

@sirusdev/canvas-input-angular

a canvas input component built for angular frameworks

Quick Start

this module can only be used on angular framework project with version > 9

After all in placed, follow these simple steps

1. install this modules using npm CLI

   npm i @sirusdev/canvas-input-angular

2. add canvas input module to your modules

    import { CanvasInputModule } from '@sirusdev/canvas-input-angular';
   
    @NgModule({
      imports: [CanvasInputModule]
    })
   ...

1) canvas input will available globally, and can be used on any components or pages

```html
<sirus-canvas-input
  [(ngModel)]="c1"
  [size]="size"
  [disabled]="!enabled"
  [color]="color"
  [opacity]="opacity"
  [offsetTop]="offsetTop"
  [offsetLeft]="offsetLeft"
></sirus-canvas-input>
```

angular controller

```typescript
import { CanvasModel } from '@sirusdev/canvas-input-angular';


@Component({
  selector: 'my-page',
  templateUrl: 'my.page.html',
})
export class MyPage {
  // data model, save this model to db.
  c1: CanvasModel = {
    width: 920, // width of canvas
    height: 500, // height of canvas
    vectors: [], // vector data
    imgUrl:
      'https://www.howitworksdaily.com/wp-content/uploads/2012/05/Cat-720x340.jpg',
  };

  size = 2; // stroke size
  color = '#ff0000'; // stroke color
  opacity = .2; // stroke opacity
  enabled = true; // enable disable input, false for read only
  offsetTop = 20; // offset top, use this when component placed on scrollable component
  offsetLeft = 10; // offset left

  /**
   * clear canvas
   */
  clear() {
    this.c1 = {
      ...this.c1,
      vectors: [],
    };
  }
}
```