CanvasProps

Canvas component props.

Properties

allowOnlyPointerType

allowOnlyPointerType: AllowOnlyPointerType

The pointer type to allow drawing with.

Default Value

all

Source

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

---

backgroundImage

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

Source

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

---

canvasColor

canvasColor: string

Background color of the canvas.

Default Value

white

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

Source

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

---

exportWithBackgroundImage

exportWithBackgroundImage: boolean

Whether the canvas should be exported with the background image.

Default Value

false

Source

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

---

height

height: string

Height of the canvas.

Default Value

100%

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

Source

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

---

isDrawing

isDrawing: boolean

Whether the user is currently drawing

Source

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

---

onPointerDown

onPointerDown: (point, isEraser?) => void

Callback to be called when the user starts drawing. This is triggered when the user presses the mouse button or touches the canvas with a pen or a touch screen.

Parameters

• point: Point

The point where the user started drawing

• isEraser?: boolean

Whether the user is using the eraser

Returns

void

void

Source

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

---

onPointerMove

onPointerMove: (point) => void

Callback to be called when the user is drawing. This is triggered when the user moves the mouse or pen or finger on the canvas.

Parameters

• point: Point

The point where the user is currently drawing

Returns

void

void

Source

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

---

onPointerUp

onPointerUp: () => void

Callback to be called when the user stops drawing. This is triggered when the user releases the mouse button or lifts the pen or finger from the canvas.

Returns

void

void

Source

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

---

paths

paths: CanvasPath[]

Array of paths to be drawn on the canvas

Source

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

---

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

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

Source

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

---

style

style: CSSProperties

Style to be applied to the canvas.

Default Value

No style is applied.

Source

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

---

svgStyle

svgStyle: CSSProperties

Style to be applied to the SVG.

Default Value

No style is applied.

Source

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

---

width

width: string

Width of the canvas.

Default Value

100%

Source

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

---

withViewBox?

optional withViewBox: boolean

Whether the canvas should be exported with the viewBox.

Default Value

false

Source

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