If using component-only styles, for this to work the viewEncapsulation must be set to None.
`typescript
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
`

You can also use the ::ng-deep selector if you do not want to change the ViewEncapsulation property on the component.

##### Deprecated: colorPickerEnabled: boolean (default: false)
This allows the adding of a colorPickers that the user can choose to draw with (stroke and fill color),
and the original colors will be used when redrawing

##### fillColorPickerEnabled: boolean (default: false)
This shows/hides the fill color picker. Note: if this field has been to false, but the colorPickerEnabled field has been to true, the color picker will be shown, as per reverse-compat needs.

##### fillColorPickerText: string (default: 'Fill')
Specify the text to add to the fill color picker button. Default is 'Fill' for reverse-compat needs.

##### strokeColorPickerEnabled: boolean (default: false)
This shows/hides the stroke color picker. Note: if this field has been to false, but the colorPickerEnabled field has been set to true, the color picker will be shown, as per reverse-compat needs.

##### strokeColorPickerText: string (default: 'Stroke')
Specify the text to add to the stroke color picker button. Default is 'Stroke' for reverse-compat needs.

##### lineWidth: number (default: 2)
This input controls the drawing pencil size

##### strokeColor: string (default: "rgba(0, 0, 0, 1)")
This input control the color of the brush

##### fillColor: string (default: "rgba(0, 0, 0, 0) -> transparent")
This input control the background color of the shapes

##### shouldDownloadDrawing: boolean (default: true)
This input control if the image created when clicking the save button should be downloaded right away.

##### startingColor: string (default: "#fff")
This input control is used to fill the canvas with the specified color at initialization and on resize events.

##### scaleFactor: number (default: 0)
This input controls the generation of the X and Y coordinates with a given scaleOffset. If not provided, the current with and height of the bounding rect and the canvas object will be used so that it works when transforming the canvas with css.

##### drawingEnabled: boolean (default: false)
This input controls if the drawing should be enabled from the start, instead of waiting for the user to click draw

##### showStrokeColorPicker: boolean (default: false)
This input controls if the CanvasWhiteboardColorPickerComponent for the strokeColor should be shown programmatically

##### showFillColorPicker: boolean (default: false)
This input controls if the CanvasWhiteboardColorPickerComponent for the fillColor should be shown programmatically

##### downloadedFileName: string (no default value)
This input controls the name of the file that will be downloaded when an image is saved.
If the downloadCanvasImage method is called with a fileName as a third parameter, then it will have priority over everything
If the fileName is not provided, then this Input will have priority. If this input is not provided as well,
the image will be saved as canvas_drawing_" + new Date().valueOf();
At the end the file extension will be added so that it can be opened by a particular app.

##### lineJoin: string (default: "round")
The lineJoin property sets or returns the type of corner created, when two lines meet.

##### lineCap: string (default: "round")
The lineCap property sets or returns the style of the end caps for a line.

##### shapeSelectorEnabled: boolean (default: true)
This input controls if the CanvasWhiteboardShapeSelectorComponent will be enabled so that the user can pick other shapes via the View

##### showShapeSelector: boolean (default: false)
This input controls if the CanvasWhiteboardShapeSelectorComponent should be shown programmatically

Event emitters

Each shape is made of a starting position point of type `CanvasWhiteboardPoint`, and an options object
which may be different for each shape, and it's of type `CanvasWhiteboardShapeOptions`.

Each predefined shape must know how to:
- Return the name of the shape (should be the same as the name of the class)
- Draw itself given a canvas context
- Draw it's preview given a canvas context
- Update itself given a `CanvasWhiteboardUpdate`

All of the predefined shapes are registered and available in the CanvasWhiteboardShapeService which the user can have to register/unregister additional shapes.

To create a new shape, you must create a class which extends the `abstract class CanvasWhiteboardShape` .

From there you need to implement the required methods.

After all of this is complete, you need to register this shape in the canvas whiteboard shape service (for the sake of convention).

`typescript
class AppComponent {
constructor(private _canvasWhiteboardService: CanvasWhiteboardService, private _canvasWhiteboardShapeService: CanvasWhiteboardShapeService) {
_canvasWhiteboardShapeService.registerShape(RandomShape);
}
}

export class RandomShape extends CanvasWhiteboardShape {
linePositions: Array;

constructor(positionPoint?: CanvasWhiteboardPoint, options?: CanvasWhiteboardShapeOptions) {
// Optional constructor if you need some additional setup
super(positionPoint, options);
this.linePositions = [];
}

getShapeName(): string {
// Abstract method which should return a string with the shape name
// Should be the same as the class name
return 'RandomShape';
}

draw(context: CanvasRenderingContext2D): any {
// Tell the canvas how to draw your shape here

// Use the selected options from the canvas whiteboard
// Object.assign(context, this.options);

// Start drawing
// context.save();
// context.beginPath();
// context.stroke();
// context.fill();
// context.closePath();
// context.restore();
}

drawPreview(context: CanvasRenderingContext2D): any {
// Provide info or update this object when it's needed for preview drawing.
// Example: The CIRCLE selects the center point and updates the radius.
// Example: The RECT selects 0,0 and updates width and height to 100%.

// Then call the draw method with the updated object if you want your shape
// to have a proper preview.

// this.draw(context);
}

onUpdateReceived(update: CanvasWhiteboardUpdate): any {
// Choose what your shape does when an update is registered for it
// For example the CircleShape updates it's radius
}

onStopReceived(update: CanvasWhiteboardUpdate): void {
// This method is optional but CAN be overriden
}
}
`

Unregistering Shapes

The default shapes can also be unregistered. Example:
`typescript
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private canvasWhiteboardShapeService: CanvasWhiteboardShapeService) {
this.canvasWhiteboardShapeService.unregisterShapes([CircleShape, SmileyShape, StarShape]);
}
}
`

NOTE: There must be at least one shape registered for the canvas to work, but for the sake of convenience, all of the default shapes have been exported (maybe someone would want to unregister all of them and register his own shapes), but it is recommended not to unregister the FreeHandShape.

Canvas Whiteboard Shape Selector

Example:
`typescript
export class AppComponent {
constructor(private _canvasWhiteboardService: CanvasWhiteboardService) {}

public receiveNewMessage(newMessage: any): void {
switch (newMessage.type) {
case VCDataMessageType.canvas_draw:
let updates = newMessage.data.map(updateJSON => CanvasWhiteboardUpdate.deserializeJson(JSON.parse(updateJSON)));
this._canvasWhiteboardService.drawCanvas(updates);
break;
case VCDataMessageType.canvas_clear:
this._canvasWhiteboardService.clearCanvas();
break;
case VCDataMessageType.canvas_undo:
this._canvasWhiteboardService.undoCanvas(newMessage.UUID);
break;
case VCDataMessageType.canvas_redo:
this._canvasWhiteboardService.redoCanvas(newMessage.UUID);
break;
}
}
}
`


$3

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


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

export class AppComponent {

@ViewChild('canvasWhiteboard') canvasWhiteboard: CanvasWhiteboardComponent;

onCanvasUndo(updateUUID: string) {
console.log(UNDO with uuid: ${updateUUID});

//Returns base64 string representation of the canvas
let generatedString = this.canvasWhiteboard.generateCanvasDataUrl("image/jpeg", 0.3);

//Generates a IE canvas blob using a callbak method
this.canvasWhiteboard.generateCanvasBlob((blob: any) => {
console.log(blob);
}, "image/png");

//This method uses both of the above method and returns either string or blob
//using a callback method
this.canvasWhiteboard.generateCanvasData((generatedData: string | Blob) => {
console.log(generatedData);
}, "image/png", 1);

//This method downloads the image using either existing data if it exists
//or creates it locally
this.canvasWhiteboard.downloadCanvasImage("image/png", existingData?, "customFileName");

//If you need the context of the canvas
let context = this.canvasWhiteboard.context;
}
}

`


Image of canvas

- If there are problems with the sizing of the parent container, the canvas size will not be the wanted size.
It may sometimes be width: 0, height: 0.
If this is the case you may want to call a resize event for the window for the size to be recalculated.
`typescript
if (this.isCanvasOpened) {
setTimeout(() => {
window.dispatchEvent(new Event('resize'));
}, 1);
}
``