Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vinothpandian/react-sketch-canvas
Freehand vector drawing component for React using SVG as canvas 🖌️
https://github.com/vinothpandian/react-sketch-canvas
canvas component freehand-drawing react react-library sketch sketching
Last synced: about 9 hours ago
JSON representation
Freehand vector drawing component for React using SVG as canvas 🖌️
- Host: GitHub
- URL: https://github.com/vinothpandian/react-sketch-canvas
- Owner: vinothpandian
- License: mit
- Created: 2018-05-16T14:40:17.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-04-03T17:05:57.000Z (9 months ago)
- Last Synced: 2024-04-14T13:01:38.928Z (9 months ago)
- Topics: canvas, component, freehand-drawing, react, react-library, sketch, sketching
- Language: TypeScript
- Homepage: https://vinoth.info/react-sketch-canvas
- Size: 6.39 MB
- Stars: 361
- Watchers: 6
- Forks: 67
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - react-sketch-canvas - [Demo](https://vinoth.info/react-sketch-canvas/?path=/story/*) Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets (UI Components / Canvas)
- awesome-react - react-sketch-canvas - Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets.  (UI Components / Canvas)
- awesome-react-components - react-sketch-canvas - [Demo](https://vinoth.info/react-sketch-canvas/?path=/story/*) Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets (UI Components / Canvas)
- fucking-awesome-react-components - react-sketch-canvas - 🌎 [Demo](vinoth.info/react-sketch-canvas/?path=/story/*) Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets (UI Components / Canvas)
- awesome-react-components - react-sketch-canvas - [Demo](https://vinoth.info/react-sketch-canvas/?path=/story/*) Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets (UI Components / Canvas)
- awesome-react-components - react-sketch-canvas - [Demo](https://vinoth.info/react-sketch-canvas/?path=/story/*) Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets (UI Components / Canvas)
README
Freehand vector drawing component for React using SVG as canvas 🖌
  
 
[](https://codecov.io/gh/vinothpandian/react-sketch-canvas)
This project was built using [Turborepo](https://turbo.build/).
## Overview
### Features
- **Supports Desktop and Mobile.**
- **Accepts input from Mouse, touch, and graphic tablets.**
### Requirements
- ****Requires React >= 16.8****
### Wanna test React Sketch Canvas before using it?
- **Try [here](https://vinoth.info/react-sketch-canvas)**
## Installation
If you use npm
```sh
npm i react-sketch-canvas
```
or with yarn
```sh
yarn add react-sketch-canvas
```
## Example
Common usage example
```javascript
import * as React from "react";
import { ReactSketchCanvas } from "react-sketch-canvas";
const styles = {
border: "0.0625rem solid #9c9c9c",
borderRadius: "0.25rem",
};
const Canvas = () => {
return ;
};
```
To export Data URL of your sketch use ref
```javascript
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 (
{
this.canvas.current
.exportImage("png")
.then((data) => {
console.log(data);
})
.catch((e) => {
console.log(e);
});
}}
>
Get Image
);
}
};
```
## List of Props
| 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][preserveaspectratio] |
| 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][css-bg] 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
## 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_
| 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) |
## Types
```ts
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
- Philipp Spiess' [tutorial][based-on]
- Draws smooth curves, thanks to François Romain's [tutorial][smooth-curve-tutorial]
---
[based-on]: https://pspdfkit.com/blog/2017/how-to-build-free-hand-drawing-using-react/
[smooth-curve-tutorial]: https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74
[css-bg]: https://developer.mozilla.org/en-US/docs/Web/CSS/background
[preserveaspectratio]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio