PatternBrush

Defined in: src/brushes/PatternBrush.ts:7

See

demo

Extends

• PencilBrush

Constructors

new PatternBrush()

new PatternBrush(canvas): PatternBrush

Defined in: src/brushes/PatternBrush.ts:10

Parameters

canvas

Canvas

Returns

PatternBrush

Overrides

PencilBrush.constructor

Properties

canvas

canvas: Canvas

Defined in: src/brushes/BaseBrush.ts:73

Todo

add type

Inherited from

PencilBrush.canvas

---

color

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

Defined in: src/brushes/BaseBrush.ts:16

Color of a brush

Default

Inherited from

PencilBrush.color

---

decimate

decimate: number = 0.4

Defined in: src/brushes/PencilBrush.ts:25

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

Default

0.4

Inherited from

PencilBrush.decimate

---

drawStraightLine

drawStraightLine: boolean = false

Defined in: src/brushes/PencilBrush.ts:34

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

Default

false

Inherited from

PencilBrush.drawStraightLine

---

limitedToCanvasSize

limitedToCanvasSize: boolean = false

Defined in: src/brushes/BaseBrush.ts:68

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

Default

false

Inherited from

PencilBrush.limitedToCanvasSize

---

shadow

shadow: null | Shadow = null

Defined in: src/brushes/BaseBrush.ts:32

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

---

source?

optional source: CanvasImageSource

Defined in: src/brushes/PatternBrush.ts:8

---

straightLineKey

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

Defined in: src/brushes/PencilBrush.ts:41

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

---

strokeDashArray

strokeDashArray: null | number[] = null

Defined in: src/brushes/BaseBrush.ts:60

Stroke Dash Array.

Default

Inherited from

PencilBrush.strokeDashArray

---

strokeLineCap

strokeLineCap: CanvasLineCap = 'round'

Defined in: src/brushes/BaseBrush.ts:39

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

Default

Inherited from

PencilBrush.strokeLineCap

---

strokeLineJoin

strokeLineJoin: CanvasLineJoin = 'round'

Defined in: src/brushes/BaseBrush.ts:46

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

Default

Inherited from

PencilBrush.strokeLineJoin

---

strokeMiterLimit

strokeMiterLimit: number = 10

Defined in: src/brushes/BaseBrush.ts:53

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

Default

Inherited from

PencilBrush.strokeMiterLimit

---

width

width: number = 1

Defined in: src/brushes/BaseBrush.ts:23

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

Default

Inherited from

PencilBrush.width

Methods

_finalizeAndAddPath()

_finalizeAndAddPath(): void

Defined in: src/brushes/PencilBrush.ts:273

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

---

_setBrushStyles()

_setBrushStyles(ctx): void

Defined in: src/brushes/PatternBrush.ts:50

Sets brush styles

Parameters

ctx

CanvasRenderingContext2D

Returns

void

Overrides

PencilBrush._setBrushStyles

---

convertPointsToSVGPath()

convertPointsToSVGPath(points): TSimplePathData

Defined in: src/brushes/PencilBrush.ts:212

Converts points to SVG path

Parameters

points

Point[]

Array of points

Returns

TSimplePathData

SVG path commands

Inherited from

PencilBrush.convertPointsToSVGPath

---

createPath()

createPath(pathData): Path

Defined in: src/brushes/PatternBrush.ts:59

Creates path

Parameters

pathData

TSimplePathData

Returns

Path

Overrides

PencilBrush.createPath

---

decimatePoints()

decimatePoints(points, distance): Point[]

Defined in: src/brushes/PencilBrush.ts:243

Decimate points array with the decimate value

Parameters

points

Point[]

distance

number

Returns

Point[]

Inherited from

PencilBrush.decimatePoints

---

getPattern()

getPattern(ctx): null | CanvasPattern

Defined in: src/brushes/PatternBrush.ts:42

Creates “pattern” instance property

Parameters

ctx

CanvasRenderingContext2D

Returns

null | CanvasPattern

---

getPatternSrc()

getPatternSrc(): HTMLCanvasElement

Defined in: src/brushes/PatternBrush.ts:14

Returns

HTMLCanvasElement

---

needsFullRender()

needsFullRender(): boolean

Defined in: src/brushes/PencilBrush.ts:53

Returns

boolean

Inherited from

PencilBrush.needsFullRender

---

onMouseDown()

onMouseDown(pointer, __namedParameters): void

Defined in: src/brushes/PencilBrush.ts:67

Invoked on mouse down

Parameters

pointer

Point

__namedParameters

TEvent

Returns

void

Inherited from

PencilBrush.onMouseDown

---

onMouseMove()

onMouseMove(pointer, __namedParameters): void

Defined in: src/brushes/PencilBrush.ts:83

Invoked on mouse move

Parameters

pointer

Point

__namedParameters

TEvent

Returns

void

Inherited from

PencilBrush.onMouseMove

---

onMouseUp()

onMouseUp(__namedParameters): boolean

Defined in: src/brushes/PencilBrush.ts:121

Invoked on mouse up

Parameters

__namedParameters

TEvent

Returns

boolean

Inherited from

PencilBrush.onMouseUp

---

drawSegment()

static drawSegment(ctx, p1, p2): Point

Defined in: src/brushes/PencilBrush.ts:57

Parameters

ctx

CanvasRenderingContext2D

p1

Point

p2

Point

Returns

Point

Inherited from

PencilBrush.drawSegment