- Supports Desktop and Mobile.
- Accepts input from Mouse, touch, and graphic tablets.
- Try here
If you use npm
npm i react-sketch-canvas
or with yarn
yarn add react-sketch-canvas
Common usage example
import React from "react";
import { ReactSketchCanvas } from "react-sketch-canvas";
const styles = {
border: "0.0625rem solid #9c9c9c",
borderRadius: "0.25rem",
};
const Canvas = () => {
return (
<ReactSketchCanvas
style={styles}
width="600"
height="400"
strokeWidth={4}
strokeColor="red"
/>
);
};
To export Data URL of your sketch use ref
import React from "react";
import { ReactSketchCanvas } from "react-sketch-canvas";
const styles = {
border: "0.0625rem solid #9c9c9c",
borderRadius: "0.25rem"
};
const Canvas = class extends React.Component {
constructor(props) {
super(props);
this.canvas = React.createRef();
}
render() {
return (
<div>
<ReactSketchCanvas
ref={this.canvas}
strokeWidth={5}
strokeColor="black"
/>
<button
onClick={() => {
this.canvas.current.
.exportImage("png")
.then(data => {
console.log(data);
})
.catch(e => {
console.log(e);
});
}}
>
Get Image
</button>
</div>
);
}
};
Props | Expected datatype | Default value | Description |
---|---|---|---|
className | PropTypes.string | "" | Class for using with CSS selectors |
width | PropTypes.string | 100% | canvas width (em/rem/px) |
height | PropTypes.string | 100% | canvas width (em/rem/px) |
canvasColor | PropTypes.string | white | canvas color (HTML colors) |
background | PropTypes.string | '' | Set SVG background using CSS background value |
strokeColor | PropTypes.string | black | Pen color |
strokeWidth | PropTypes.number | 4 | Pen stroke size |
eraserWidth | PropTypes.number | 8 | Erase size |
allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
onUpdate | PropTypes.func | all | Returns the current sketch path in CanvasPath type on every update |
withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
Set SVG background using CSS background value
You can specify width and height values in em or rem. It fills the parent element space if width and height are not set
Example
<ReactSketchCanvas width="25em" height="10rem" />
You can pass a CSS in JS style object to style the element. By default it has a border with following properties
canvas {
border: 0.0625rem solid #9c9c9c;
border-radius: 0.25rem;
}
Example
<ReactSketchCanvas
style={{
border: "0.0625rem solid #9c9c9c",
}}
/>
You can export the sketch as an image or as a svg
Use ref to access the element and call the following functions to export image
Props | Expected datatype |
---|---|
eraseMode(boolean) | Switch to eraser mode by passing true. You can switch back to pen mode by passing false |
clearCanvas() | Clears the canvas. |
resetCanvas() | Resets the canvas and clears the undo/redo stack along with it. |
undo() | Undo the last action. |
redo() | Redo the previous action. |
exportImage(imageTypeString) | Accepts an image type as argument (ExportImageType ) and returns a Promise which resolves to base64 data url of the sketch. |
exportSvg() | returns a Promise which resolves to an inline SVG element. |
exportPaths() | returns a Promise which resolves to an instance of CanvasPath . |
loadPaths(CanvasPath) | Accepts an CanvasPath exported from exportPaths() and loads it on the canvas. |
getSketchingTime() | returns a Promise which resolves the time that user sketched in the canvas (considers only when the user made the strokes or erased the strokes) |
type ExportImageType = "jpeg" | "png";
interface Point {
x: number;
y: number;
}
interface CanvasPath {
paths: Point[];
strokeWidth: number;
strokeColor: string;
drawMode: boolean;
startTimestamp?: number;
endTimestamp?: number;
}
- Philipp Spiess' tutorial
- Draws smooth curves, thanks to François Romain's tutorial
- Immer link
- Pepjs link