PencilBrush

See

demo

Extends

• BaseBrush

Extended by

• PatternBrush

Constructors

new PencilBrush()

new PencilBrush(canvas): PencilBrush

Parameters

• canvas: Canvas

Returns

PencilBrush

Overrides

BaseBrush.constructor

Defined in

src/brushes/PencilBrush.ts:47

Properties

canvas

canvas: Canvas

Todo

add type

Inherited from

BaseBrush.canvas

Defined in

src/brushes/BaseBrush.ts:73

---

color

color: string = 'rgb(0, 0, 0)'

Color of a brush

Default

Inherited from

BaseBrush.color

Defined in

src/brushes/BaseBrush.ts:16

---

decimate

decimate: number = 0.4

Discard points that are less than decimate pixel distant from each other

Default

0.4

Defined in

src/brushes/PencilBrush.ts:25

---

drawStraightLine

drawStraightLine: boolean = false

Draws a straight line between last recorded point to current pointer Used for shift functionality

Default

false

Defined in

src/brushes/PencilBrush.ts:34

---

limitedToCanvasSize

limitedToCanvasSize: boolean = false

When true, the free drawing is limited to the whiteboard size. Default to false.

Default

false

Inherited from

BaseBrush.limitedToCanvasSize

Defined in

src/brushes/BaseBrush.ts:68

---

shadow

shadow: null | Shadow = null

Shadow object representing shadow of this shape. Backwards incompatibility note: This property replaces “shadowColor” (String), “shadowOffsetX” (Number), “shadowOffsetY” (Number) and “shadowBlur” (Number) since v1.2.12

Default

Inherited from

BaseBrush.shadow

Defined in

src/brushes/BaseBrush.ts:32

---

straightLineKey

straightLineKey: undefined | null | "altKey" | "shiftKey" | "ctrlKey" | "metaKey" = 'shiftKey'

The event modifier key that makes the brush draw a straight line. If null or ‘none’ or any other string that is not a modifier key the feature is disabled.

Defined in

src/brushes/PencilBrush.ts:41

---

strokeDashArray

strokeDashArray: null | number[] = null

Stroke Dash Array.

Default

Inherited from

BaseBrush.strokeDashArray

Defined in

src/brushes/BaseBrush.ts:60

---

strokeLineCap

strokeLineCap: CanvasLineCap = 'round'

Line endings style of a brush (one of “butt”, “round”, “square”)

Default

Inherited from

BaseBrush.strokeLineCap

Defined in

src/brushes/BaseBrush.ts:39

---

strokeLineJoin

strokeLineJoin: CanvasLineJoin = 'round'

Corner style of a brush (one of “bevel”, “round”, “miter”)

Default

Inherited from

BaseBrush.strokeLineJoin

Defined in

src/brushes/BaseBrush.ts:46

---

strokeMiterLimit

strokeMiterLimit: number = 10

Maximum miter length (used for strokeLineJoin = “miter”) of a brush’s

Default

Inherited from

BaseBrush.strokeMiterLimit

Defined in

src/brushes/BaseBrush.ts:53

---

width

width: number = 1

Width of a brush, has to be a Number, no string literals

Default

Inherited from

BaseBrush.width

Defined in

src/brushes/BaseBrush.ts:23

Methods

_finalizeAndAddPath()

_finalizeAndAddPath(): void

On mouseup after drawing the path on contextTop canvas we use the points captured to create an new Path object and add it to the canvas.

Returns

void

Defined in

src/brushes/PencilBrush.ts:273

---

convertPointsToSVGPath()

convertPointsToSVGPath(points): TSimplePathData

Converts points to SVG path

Parameters

• points: Point[]

Array of points

Returns

TSimplePathData

SVG path commands

Defined in

src/brushes/PencilBrush.ts:212

---

createPath()

createPath(pathData): Path<Partial<PathProps>, SerializedPathProps, ObjectEvents>

Creates a Path object to add on canvas

Parameters

• pathData: TSimplePathData

Path data

Returns

Path<Partial<PathProps>, SerializedPathProps, ObjectEvents>

Path to add on canvas

Defined in

src/brushes/PencilBrush.ts:222

---

decimatePoints()

decimatePoints(points, distance): Point[]

Decimate points array with the decimate value

Parameters

• points: Point[]

• distance: number

Returns

Point[]

Defined in

src/brushes/PencilBrush.ts:243

---

needsFullRender()

needsFullRender(): boolean

Returns

boolean

Overrides

BaseBrush.needsFullRender

Defined in

src/brushes/PencilBrush.ts:53

---

onMouseDown()

onMouseDown(pointer, __namedParameters): void

Invoked on mouse down

Parameters

• pointer: Point

• __namedParameters: TEvent<TPointerEvent>

Returns

void

Overrides

BaseBrush.onMouseDown

Defined in

src/brushes/PencilBrush.ts:67

---

onMouseMove()

onMouseMove(pointer, __namedParameters): void

Invoked on mouse move

Parameters

• pointer: Point

• __namedParameters: TEvent<TPointerEvent>

Returns

void

Overrides

BaseBrush.onMouseMove

Defined in

src/brushes/PencilBrush.ts:83

---

onMouseUp()

onMouseUp(__namedParameters): boolean

Invoked on mouse up

Parameters

• __namedParameters: TEvent<TPointerEvent>

Returns

boolean

Overrides

BaseBrush.onMouseUp

Defined in

src/brushes/PencilBrush.ts:121

---

drawSegment()

static drawSegment(ctx, p1, p2): Point

Parameters

• ctx: CanvasRenderingContext2D

• p1: Point

• p2: Point

Returns

Point

Defined in

src/brushes/PencilBrush.ts:57