ReactSketchCanvasRef
React Sketch Canvas component ref.
Remarks
This is an extension of the CanvasRef with additional methods specific to the React Sketch Canvas component.
Extends
Properties
clearCanvas
clearCanvas: () =>
void
Clear the canvas. This will remove all the paths drawn on the canvas. But it will not clear the Undo/Redo stack.
Returns
void
Remarks
To clear the Undo/Redo stack, use the resetCanvas method.
Source
packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:89
eraseMode
eraseMode: (
erase) =>void
Set the drawing mode to either draw or erase
Parameters
• erase: boolean
Whether to set the mode to erase
Returns
void
Source
packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:82
exportImage
exportImage: (
imageType,options?) =>Promise<string>
Export the canvas as an image. This returns a promise that resolves to a data URL of the image.
Parameters
• imageType: ExportImageType
The type of image to be exported.
• options?: ExportImageOptions
Options to be applied to the exported image.
Returns
Promise<string>
A promise that resolves to a data URL of the image.
Inherited from
Source
packages/react-sketch-canvas/src/Canvas/types.ts:132
exportPaths
exportPaths: () =>
Promise<CanvasPath[]>
Export the paths draw on the canvas as a JSON object with list of CanvasPaths
Returns
Promise<CanvasPath[]>
Promise<CanvasPath[]> - The paths drawn on the canvas
Source
packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:103
exportSvg
exportSvg: () =>
Promise<string>
Export the canvas as an SVG. This returns a promise that resolves to a string of the SVG.
Returns
Promise<string>
A promise that resolves to a string of the SVG.
Inherited from
Source
packages/react-sketch-canvas/src/Canvas/types.ts:142
getSketchingTime
getSketchingTime: () =>
Promise<number>
Get the current drawing time in milliseconds. This will only work if withTimestamp prop is set to true.
Returns
Promise<number>
Remarks
This does not include the idle time when the user is not drawing. It only includes the time when the user is drawing on the canvas.
Source
packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:119
loadPaths
loadPaths: (
paths) =>void
Import the paths to be drawn on the canvas.
Parameters
• paths: CanvasPath[]
The paths to be drawn on the canvas
Returns
void
Remarks
This will remove all the existing paths on the canvas and replace them with the new paths.
Source
packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:112
redo
redo: () =>
void
Redo the last undone path
Returns
void
Source
packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:97
resetCanvas
resetCanvas: () =>
void
Reset the canvas. This will remove all the paths drawn on the canvas and clear the Undo/Redo stack.
Returns
void
Remarks
If you only want to clear the paths drawn on the canvas, use the clearCanvas method.
Source
packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:126
undo
undo: () =>
void
Undo the last drawn path
Returns
void
Source
packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts:93