open-index/open-npm huggingface dataset:
npm package: @sirusdev/canvas-input-angular
Description: a canvas input component built for angular frameworks
Latest version: 0.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

   ```bash
   npm i @sirusdev/canvas-input-angular
   ```

1. add canvas input module to your modules

   ```typescript
    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: [],
        };
      }
    }
    ```