Home

Awesome

<p style="text-align: center;"> <img src="https://i.imgur.com/ajs39FC.png" height="150" alt="React Sketch Canvas" /> </p> <br/> <h3 style="text-align: center;"> Freehand vector drawing component for React using SVG as canvas 🖌 </h3> <br/> <br/> <div style="text-align: center;">

npm    NPM    npm <br/> npm bundle size    npm bundle size <br/> codecov <br/> This project was built using Turborepo.

</div>

Overview

Features

Requirements

Wanna test React Sketch Canvas before using it?

Installation

If you use npm

npm i react-sketch-canvas

or with yarn

yarn add react-sketch-canvas

Example

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>
    );
  }
};

List of Props

PropsExpected datatypeDefault valueDescription
widthPropTypes.string100%canvas width (em/rem/px)
heightPropTypes.string100%canvas width (em/rem/px)
idPropTypes.string"react-sketch-canvas"ID field to uniquely identify a SVG canvas (Supports multiple canvases in a single page)
classNamePropTypes.string""Class for using with CSS selectors
strokeColorPropTypes.stringblackPen color
canvasColorPropTypes.stringwhitecanvas color (HTML colors)
backgroundImagePropTypes.string''Set SVG background with image URL
exportWithBackgroundImagePropTypes.boolfalseKeep background image on image/SVG export (on false, canvasColor will be set as background)
preserveBackgroundImageAspectRatioPropTypes.stringnoneSet aspect ratio of the background image. For possible values check MDN docs
strokeWidthPropTypes.number4Pen stroke size
eraserWidthPropTypes.number8Erase size
allowOnlyPointerTypePropTypes.stringallallow pointer type ("all"/"mouse"/"pen"/"touch")
onChangePropTypes.funcReturns the current sketch path in CanvasPath type on every path change
onStrokePropTypes.funcReturns the the last stroke path and whether it is an eraser stroke on every pointer up event
stylePropTypes.objectfalseAdd CSS styling as CSS-in-JS object
svgStylePropTypes.object{}Add CSS styling as CSS-in-JS object for the SVG
withTimestampPropTypes.boolfalseAdd timestamp to individual strokes for measuring sketching time
readOnlyPropTypes.boolfalseDisable 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

<br />

Methods

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

PropsExpected 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)

Types

type ExportImageType = "jpeg" | "png";

interface Point {
  x: number;
  y: number;
}

interface CanvasPath {
  paths: Point[];
  strokeWidth: number;
  strokeColor: string;
  drawMode: boolean;
  startTimestamp?: number;
  endTimestamp?: number;
}

Thanks to