Ng-opendraw NPM

Opendraw

Opendraw is an angular component that manipulates the canvas for drawing content across all devices. It supports touch/pen/mouse devices. It uses pointerEvent to detect the device.

Demo

Try it out here: DEMO or clone this repo and run ng serve for a full demo of opendraw. Angular version 8.2.14.

Features

Draw with different devices (mouse|pen|touch)
Export your drawings
Handle foreground and background layer (image|color)
Configure drawing style (color|width|shapes|eraser)
Configure allowed devices (mouse|pen|touch|all)

How to use

First install the package with the command npm i ng-opendraw

Then, in your module.ts, import the library module

import { NgOpendrawModule } from 'ng-opendraw';

And add it to your imports modules. You can now use <ng-opendraw></ng-opendraw> it in any component.html

<ng-opendraw 
    [canHeight]='this.height'
    [canWidth]='this.width'
    [lineWidth]='this.lineWidth'
    [lineColor]='this.getColor()'
    [commandObs]='this.commandObs$'
    [drawStyle]='this.drawStyle'
    [fillShape]='this.fillShape'
    [eraser]='this.eraser'
    [allowedDeviceType]='this.allowedDeviceType'
    [backgroundImage]='this.bgImg'
    [backgroundColor]='this.bgColor'
    (outputEvent)='this.processResult($event)'
    (errorEvent)='this.processError($event)'
></ng-opendraw>

Check out the repo for a full demo code here

Inputs

Property	Type	Note
canHeight	number	Height of the canvas area in px
canWidth	number	Width of the canvas area in px
lineWidth	number	Line width in px, default: 3
lineColor	string	Line color, default: black
commandObs	Observable(DrawCommand)	Triggers a drawcommand like export, clear, ...
drawStyle	DrawStyle	Specify the drawing style like normal, circle, rectangle, line... default: normal
fillShape	boolean	Enable/disable shape filling
eraser	boolean	Enable/disable eraser
allowedDeviceType	DeviceType	Specify the allowed device type like mouse, touch, pen... default: all
backgroundImage	Image/HTMLImageElement	Specify the background layer image
backgroundColor	string	Specify the background layer color