PatternBrush

See

demo

Extends

• PencilBrush

Constructors

new PatternBrush()

new PatternBrush(canvas): PatternBrush

Parameters

• canvas: Canvas

Returns

PatternBrush

Overrides

PencilBrush.constructor

Defined in

src/brushes/PatternBrush.ts:10

Properties

canvas

canvas: Canvas

Todo

add type

Inherited from

PencilBrush.canvas

Defined in

src/brushes/BaseBrush.ts:73

---

color

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

Color of a brush

Default

Inherited from

PencilBrush.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

Inherited from

PencilBrush.decimate

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

Inherited from

PencilBrush.drawStraightLine

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

PencilBrush.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

PencilBrush.shadow

Defined in

src/brushes/BaseBrush.ts:32

---

source?

optional source: CanvasImageSource

Defined in

src/brushes/PatternBrush.ts:8

---

straightLineKey

straightLineKey: undefined | null | "altKey" | "ctrlKey" | "metaKey" | "shiftKey" = '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.

Inherited from

PencilBrush.straightLineKey

Defined in

src/brushes/PencilBrush.ts:41

---

strokeDashArray

strokeDashArray: null | number[] = null

Stroke Dash Array.

Default

Inherited from

PencilBrush.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

PencilBrush.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

PencilBrush.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

PencilBrush.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

PencilBrush.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

Inherited from

PencilBrush._finalizeAndAddPath

Defined in

src/brushes/PencilBrush.ts:273

---

_setBrushStyles()

_setBrushStyles(ctx): void

Sets brush styles

Parameters

• ctx: CanvasRenderingContext2D

Returns

void

Overrides

PencilBrush._setBrushStyles

Defined in

src/brushes/PatternBrush.ts:50

---

convertPointsToSVGPath()

convertPointsToSVGPath(points): TSimplePathData

Converts points to SVG path

Parameters

• points: Point[]

Array of points

Returns

TSimplePathData

SVG path commands

Inherited from

PencilBrush.convertPointsToSVGPath

Defined in

src/brushes/PencilBrush.ts:212

---

createPath()

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

Creates path

Parameters

• pathData: TSimplePathData

Returns

Path<Partial<PathProps>, SerializedPathProps, ObjectEvents>

Overrides

PencilBrush.createPath

Defined in

src/brushes/PatternBrush.ts:59

---

decimatePoints()

decimatePoints(points, distance): Point[]

Decimate points array with the decimate value

Parameters

• points: Point[]

• distance: number

Returns

Point[]

Inherited from

PencilBrush.decimatePoints

Defined in

src/brushes/PencilBrush.ts:243

---

getPattern()

getPattern(ctx): null | CanvasPattern

Creates “pattern” instance property

Parameters

• ctx: CanvasRenderingContext2D

Returns

null | CanvasPattern

Defined in

src/brushes/PatternBrush.ts:42

---

getPatternSrc()

getPatternSrc(): HTMLCanvasElement

Returns

HTMLCanvasElement

Defined in

src/brushes/PatternBrush.ts:14

---

needsFullRender()

needsFullRender(): boolean

Returns

boolean

Inherited from

PencilBrush.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

Inherited from

PencilBrush.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

Inherited from

PencilBrush.onMouseMove

Defined in

src/brushes/PencilBrush.ts:83

---

onMouseUp()

onMouseUp(__namedParameters): boolean

Invoked on mouse up

Parameters

• __namedParameters: TEvent<TPointerEvent>

Returns

boolean

Inherited from

PencilBrush.onMouseUp

Defined in

src/brushes/PencilBrush.ts:121

---

drawSegment()

static drawSegment(ctx, p1, p2): Point

Parameters

• ctx: CanvasRenderingContext2D

• p1: Point

• p2: Point

Returns

Point

Inherited from

PencilBrush.drawSegment

Defined in

src/brushes/PencilBrush.ts:57