ng-canvas-painter
TypeScript icon, indicating that this package has built-in type declarations

0.1.8 • Public • Published

ng-canvas-painter

Angular 11+ component to paint on a canvas on desktop or touch devices

Dependencies

Installation

After installing the above dependencies, install ng-canvas-painter via:

npm install --save ng-canvas-painter

Usage

  • Add NgCanvasPainterModule in your app.module.ts
import {NgCanvasPainterModule} from 'ng-canvas-painter';

@NgModule({
    ...
    imports: [NgCanvasPainterModule]
})
export class AppModule {
...
}
  • Add the ng-canvas-painter tag to your template
<ng-canvas-painter #painter color="#00FF00" lineWidth="5" (paintStart)="onPaintStart()" (paintEnd)="onPaintEnd()"
                (undoLength)="onUndoLengthChanged($event)" (redoLength)="onRedoLengthChanged($event)"
                (isEmpty)="onIsEmptyChanged($event)"></canvas-painter>

Options

{
  clipBounds: { x: 0, y: 0, width: 0, height: 0 }  // Set a region that can be drawn on
  canvasWidth: 600, // px
  canvasHeight: 600, // px
  color: '#000',
  lineWidth: 10, // px
  cacheSize: 10 // boolean or a number of versions to keep in memory
}

Credits

ng-canvas-painter is an open-source project.

Special thanks to pwambach and their work with the AngularJS directive.

Special thanks to shivs25 and their work work with the Angular 4 directive.

License

MIT

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Github

Readme

Keywords

none

Package Sidebar

Install

npm i ng-canvas-painter

Weekly Downloads

3

Version

0.1.8

License

MIT

Unpacked Size

153 kB

Total Files

18

Last publish

Collaborators

  • anderstornkvist