\r\n );\r\n }\r\n};\r\n```\r\n\r\n## List of Props\r\n\r\n| Props | Expected datatype | Default value | Description |\r\n| ---------------------------------- | ----------------- | ------------- | --------------------------------------------------------------------------------------------------- |\r\n| width | PropTypes.string | 100% | canvas width (em/rem/px) |\r\n| height | PropTypes.string | 100% | canvas width (em/rem/px) |\r\n| className | PropTypes.string | \"\" | Class for using with CSS selectors |\r\n| strokeColor | PropTypes.string | black | Pen color |\r\n| canvasColor | PropTypes.string | white | canvas color (HTML colors) |\r\n| backgroundImage | PropTypes.string | '' | Set SVG background with image URL |\r\n| exportWithBackgroundImage | PropTypes.bool | true | Keep background image on image/SVG export (on false, canvasColor will be set as background) |\r\n| preserveBackgroundImageAspectRatio | PropTypes.string | none | Set aspect ratio of the background image. For possible values check [MDN docs][preserveaspectratio] |\r\n| strokeWidth | PropTypes.number | 4 | Pen stroke size |\r\n| eraserWidth | PropTypes.number | 8 | Erase size |\r\n| allowOnlyPointerType | PropTypes.string | all | allow pointer type (\"all\"/\"mouse\"/\"pen\"/\"touch\") |\r\n| onUpdate | PropTypes.func | all | Returns the current sketch path in `CanvasPath` type on every update |\r\n| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |\r\n| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |\r\n\r\nSet SVG background using CSS [background][css-bg] value\r\n\r\nYou can specify width and height values in em or rem. It fills the parent element space if width and height are not set\r\n\r\n \r\n\r\n## Methods\r\n\r\nYou can export the sketch as an image or as a svg\r\n\r\n_Use ref to access the element and call the following functions to export image_\r\n\r\n| Props | Expected datatype |\r\n| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |\r\n| eraseMode(boolean) | Switch to eraser mode by passing true. You can switch back to pen mode by passing false |\r\n| clearCanvas() | Clears the canvas. |\r\n| resetCanvas() | Resets the canvas and clears the undo/redo stack along with it. |\r\n| undo() | Undo the last action. |\r\n| redo() | Redo the previous action. |\r\n| exportImage(imageTypeString) | Accepts an image type as argument (`ExportImageType`) and returns a Promise which resolves to base64 data url of the sketch. |\r\n| exportSvg() | returns a Promise which resolves to an inline SVG element. |\r\n| exportPaths() | returns a Promise which resolves to an instance of `CanvasPath`. |\r\n| loadPaths(CanvasPath) | Accepts an `CanvasPath` exported from exportPaths() and loads it on the canvas. |\r\n| 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) |\r\n\r\n## Types\r\n\r\n```ts\r\ntype ExportImageType = 'jpeg' | 'png';\r\n\r\ninterface Point {\r\n x: number;\r\n y: number;\r\n}\r\n\r\ninterface CanvasPath {\r\n paths: Point[];\r\n strokeWidth: number;\r\n strokeColor: string;\r\n drawMode: boolean;\r\n startTimestamp?: number;\r\n endTimestamp?: number;\r\n}\r\n```\r\n\r\n---\r\n\r\n## Thanks to\r\n\r\n- Philipp Spiess' [tutorial][based-on]\r\n- Draws smooth curves, thanks to François Romain's [tutorial][smooth-curve-tutorial]\r\n- Immer [link][immer]\r\n\r\n---\r\n\r\n[based-on]: https://pspdfkit.com/blog/2017/how-to-build-free-hand-drawing-using-react/\r\n[smooth-curve-tutorial]: https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74\r\n[css-bg]: https://developer.mozilla.org/en-US/docs/Web/CSS/background\r\n[immer]: https://immerjs.github.io/immer/docs/introduction\r\n[preserveaspectratio]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio","readmeFilename":"README.md"}
![\"React](\"https://i.imgur.com/ajs39FC.png\")
\r\n