This project was built using Turborepo.
If you use npm
npm i react-sketch-canvas
or with yarn
yarn add react-sketch-canvas
Common usage example
import * as 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 * as 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 width PropTypes.string 100% canvas width (em/rem/px) height PropTypes.string 100% canvas width (em/rem/px) id PropTypes.string "react-sketch-canvas" ID field to uniquely identify a SVG canvas (Supports multiple canvases in a single page) className PropTypes.string "" Class for using with CSS selectors strokeColor PropTypes.string black Pen color canvasColor PropTypes.string white canvas color (HTML colors) backgroundImage PropTypes.string '' Set SVG background with image URL exportWithBackgroundImage PropTypes.bool false Keep background image on image/SVG export (on false, canvasColor will be set as background) preserveBackgroundImageAspectRatio PropTypes.string none Set aspect ratio of the background image. For possible values check MDN docs strokeWidth PropTypes.number 4 Pen stroke size eraserWidth PropTypes.number 8 Erase size allowOnlyPointerType PropTypes.string all allow pointer type ("all"/"mouse"/"pen"/"touch") onChange PropTypes.func Returns the current sketch path in CanvasPath type on every path change onStroke PropTypes.func Returns the the last stroke path and whether it is an eraser stroke on every pointer up event style PropTypes.object false Add CSS styling as CSS-in-JS object svgStyle PropTypes.object {} Add CSS styling as CSS-in-JS object for the SVG withTimestamp PropTypes.bool false Add timestamp to individual strokes for measuring sketching time readOnly PropTypes.bool false Disable drawing on the canvas (undo/redo, clear & reset will still work.)
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
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;
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4