ng2-canvas-whiteboard

Add a canvas component which the user can draw on. The coordinates are drawn as a percentage of the containers width and height. To reuse them anywhere, they need to be remapped (multiply the received x and y coordinates with their width and height accordingly)

Features:

• Supports touch.
• Supports UNDO/REDO.
• Implements a color picker.
• Sends outputs on every action.
• Contains inputs for multiple modifications.
• Save drawn images

Install

1. Install npm module:

   npm install ng2-canvas-whiteboard --save

2. If you are using system.js you may want to add this into map and package config:

   {
       "map": {
           "ng2-canvas-whiteboard": "node_modules/ng2-canvas-whiteboard"
       },
       "packages": {
           "ng2-canvas-whiteboard": { "main": "index.js", "defaultExtension": "js" }
       }
   }

Add the module to your project

@NgModule({
    imports: [
        CanvasWhiteboardModule
    ]
    ...
)}

In your component, you should add the CanvasWhiteboardComponent as a view provider

@Component({
    selector: '...',
    viewProviders: [CanvasWhiteboardComponent],
    templateUrl: '...'
})

In the html file, you can insert the Canvas Whiteboard

<canvas-whiteboard #canvasWhiteboard
                     [drawButtonClass]="'drawButtonClass'"
                     [drawButtonText]="'Draw'"
                     [clearButtonClass]="'clearButtonClass'"
                     [clearButtonText]="'Clear'"
                     [undoButtonText]="'Undo'"
                     [undoButtonEnabled]="true"
                     [redoButtonText]="'Redo'"
                     [redoButtonEnabled]="true"
                     [colorPickerEnabled]="true"
                     [saveDataButtonEnabled]="true"
                     [saveDataButtonText]="'Save'"
                     (onBatchUpdate)="sendBatchUpdate($event)"
                     (onClear)="onCanvasClear()"
                     (onUndo)="onCanvasUndo($event)"
                     (onRedo)="onCanvasRedo($event)">
</canvas-whiteboard>

Drawing on the canvas

The canvas drawing is triggered when the user touches the canvas, draws (moves the mouse or finger) and then stops drawing. When the drawing is started, after 100 ms all the signals in between are added to a list and are sent as a batch signal which is emitted by the onBatchUpdate emitter. If received, the user can then manipulate with the sent signals.

Inputs

batchUpdateTimeoutDuration: number (default: 100)

The time in milliseconds that a batch update should be sent after drawing.

imageUrl: string (optional)

The path to the image. If not specified, the drawings will be placed on the background color of the canvas

aspectRatio: number (optional)

If specified, the canvas will be resized according to this ratio

drawButtonClass: string clearButtonClass: string undoButtonClass: string redoButtonClass: stringsaveDataButtonClass: string

The classes of the draw, clear, undo and redo buttons. These classes are used in "<i>" tags. Example:

[drawButtonClass]="'fa fa-pencil fa-2x'"
[clearButtonClass]="'fa fa-eraser fa-2x canvas_whiteboard_button-clear'"

drawButtonEnabled: boolean (default: true) clearButtonEnabled: boolean (default: true) undoButtonEnabled: boolean (default: false)redoButtonEnabled: boolean (default: false)saveDataButtonEnabled: boolean (default: false)

Specifies whether or not the button for drawing or clearing the canvas should be shown.

drawButtonText, clearButtonText, undoButtonText, redoButtonText, saveDataButtonText

Specify the text to add to the buttons, default is no text

[drawButtonText]="'Draw'"
[clearButtonText]="'Clear'"

To add text to the buttons via css

Each button has its on class (example: Draw button -> .canvas_whiteboard_button-draw) This button can be customized by overriding it's css

.canvas_whiteboard_button-draw:before {
  content: "Draw";
}

will add the "Draw" text to the button.

colorPickerEnabled: boolean (default: false)

This allows the adding of a colorPicker that the user can choose to draw with and the original colors are kept when redrawing

If using component-only styles, for this to work the viewEncapsulation must be set to None.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})

Event emitters

 @Output() onClear = new EventEmitter<any>();
 @Output() onBatchUpdate = new EventEmitter<CanvasWhiteboardUpdate[]>();
 @Output() onImageLoaded = new EventEmitter<any>();
 @Output() onUndo = new EventEmitter<any>();
 @Output() onRedo = new EventEmitter<any>();

onClear is emitted when the canvas has been cleared. onImageLoaded is emitted if the user specified an image and it has successfully been drawn on the canvas. onUndo is emitted when the canvas has done an UNDO function, emits an UUID (string) for the continuous last drawn shape undone. onClear is emitted when the canvas has done a REDO function, emits an UUID (string) for the continuous shape redrawn.

##Saving drawn canvas as an image In order to save drawn images you can either click the Save button in the canvas, use the short Ctrl/Command + s key or get a reference of the canvas and save programmatically.

Example, save an image whenever an undo action was made:

HTML: Create a canvas view reference with some name (ex: #canvasWhiteboard)

<canvas-whiteboard #canvasWhiteboard>
</canvas-whiteboard>

import {CanvasWhiteboardComponent} from 'ng2-canvas-whiteboard';

export class AppComponent {

  @ViewChild('canvasWhiteboard') canvasWhiteboard: CanvasWhiteboardComponent;

  onCanvasUndo(updateUUID: string) {
    console.log(`UNDO with uuid: ${updateUUID}`);
    
    console.log(this.canvasWhiteboard.generateCanvasDataUrl("image/jpeg", 0.3));
     
    this.canvasWhiteboard.generateCanvasBlob((blob: any) => {
       console.log(blob);
    }, "image/png");
    
    this.canvasWhiteboard.downloadCanvasImage();
    
    //If you need the context of the canvas
    let context = this.canvasWhiteboard.context;
  }
}

##Image of canvas

##Canvas whiteboard color picker (CanvasWhiteboardColorPickerComponent) A canvas component that is used to identify and emit selected colors.

@Input() selectedColor: string (default: "rgb(0,0,0)");

@Output() onColorSelected = new EventEmitter<string>();

Example of a drawn image

An example of a drawn image and shape on the canvas with additional css for the buttons and a date:

Current limitations

• There are no pre-made shapes yet, only mouse / touch free drawing.