ReactSketchCanvasProps

React Sketch Canvas component props.

Remarks

This is an extension of the CanvasProps with additional props specific to the React Sketch Canvas component.

Extends

Partial<Omit<CanvasProps, "paths" | "isDrawing" | "onPointerDown" | "onPointerMove" | "onPointerUp">>

Properties

allowOnlyPointerType?

optional allowOnlyPointerType: AllowOnlyPointerType

The pointer type to allow drawing with.

Default Value

all

Inherited from

Partial.allowOnlyPointerType

Source

packages/react-sketch-canvas/src/Canvas/types.ts:56

backgroundImage?

optional backgroundImage: string

Background image to be displayed on the canvas. This can be a URL or a base64 encoded image.

Default Value

No background image is displayed

Inherited from

Partial.backgroundImage

Source

packages/react-sketch-canvas/src/Canvas/types.ts:62

canvasColor?

optional canvasColor: string

Background color of the canvas.

Default Value

white

Inherited from

Partial.canvasColor

Source

packages/react-sketch-canvas/src/Canvas/types.ts:67

className?

optional className: string

Class name to be applied to the canvas.

Default Value

react-sketch-canvas

Inherited from

Partial.className

Source

packages/react-sketch-canvas/src/Canvas/types.ts:72

eraserWidth?

optional eraserWidth: number

Width of the eraser.

Remarks

This is only applicable when the eraseMode is set to true.

Default Value

Source

packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:24

exportWithBackgroundImage?

optional exportWithBackgroundImage: boolean

Whether the canvas should be exported with the background image.

Default Value

false

Inherited from

Partial.exportWithBackgroundImage

Source

packages/react-sketch-canvas/src/Canvas/types.ts:77

height?

optional height: string

Height of the canvas.

Default Value

100%

Inherited from

Partial.height

Source

packages/react-sketch-canvas/src/Canvas/types.ts:82

id?

optional id: string

ID of the canvas.

Default Value

the ID is react-sketch-canvas

Inherited from

Partial.id

Source

packages/react-sketch-canvas/src/Canvas/types.ts:87

onChange?

optional onChange: (updatedPaths) => void

Optional callback that is called when the user starts drawing. This is triggered when the user when user creates a stroke on the canvas with a pen or an eraser.

Parameters

• updatedPaths: CanvasPath[]

The updated paths drawn on the canvas

Returns

void

Source

packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:32

onStroke?

optional onStroke: (path, isEraser) => void

Optional callback that is called when the user creates a stroke on the canvas with a pen or an eraser.

Parameters

• path: CanvasPath

The path drawn on the canvas

• isEraser: boolean

Whether the user is using the eraser

Returns

void

Source

packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:40

preserveBackgroundImageAspectRatio?

optional preserveBackgroundImageAspectRatio: string

Set aspect ratio of the background image. For possible values check MDN docs

Link

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

Inherited from

Partial.preserveBackgroundImageAspectRatio

Source

packages/react-sketch-canvas/src/Canvas/types.ts:92

readOnly?

optional readOnly: boolean

Whether the canvas is read-only. This disables drawing on the canvas.

Default Value

false

Inherited from

Partial.readOnly

Source

packages/react-sketch-canvas/src/Canvas/types.ts:117

strokeColor?

optional strokeColor: string

Color of the stroke.

Remarks

This is only applicable when the eraseMode is set to false.

Default Value

"red"

Source

packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:48

strokeWidth?

optional strokeWidth: number

Width of the stroke.

Remarks

This is only applicable when the eraseMode is set to false.

Default Value

Source

packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:56

style?

optional style: CSSProperties

Style to be applied to the canvas.

Default Value

No style is applied.

Inherited from

Partial.style

Source

packages/react-sketch-canvas/src/Canvas/types.ts:97

svgStyle?

optional svgStyle: CSSProperties

Style to be applied to the SVG.

Default Value

No style is applied.

Inherited from

Partial.svgStyle

Source

packages/react-sketch-canvas/src/Canvas/types.ts:102

width?

optional width: string

Width of the canvas.

Default Value

100%

Inherited from

Partial.width

Source

packages/react-sketch-canvas/src/Canvas/types.ts:112

withTimestamp?

optional withTimestamp: boolean

Whether to record the timestamp of the drawing. This will be stored in the CanvasPath object in milliseconds. This can be used to calculate the time taken to draw on the canvas.

Remarks

use getSketchingTime method to get the time taken to draw on the canvas.

Default Value

false

Source

packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:67

withViewBox?

optional withViewBox: boolean

Whether the canvas should be exported with the viewBox.

Default Value

false

Inherited from

Partial.withViewBox

Source

packages/react-sketch-canvas/src/Canvas/types.ts:107