diff --git a/src/Canvas/index.tsx b/src/Canvas/index.tsx index ad1abd8..a11dcbc 100644 --- a/src/Canvas/index.tsx +++ b/src/Canvas/index.tsx @@ -32,7 +32,7 @@ function getCanvasWithViewBox(canvas: HTMLDivElement) { export interface CanvasProps { paths: CanvasPath[]; isDrawing: boolean; - onPointerDown: (point: Point) => void; + onPointerDown: (point: Point, isEraser: boolean) => void; onPointerMove: (point: Point) => void; onPointerUp: () => void; className?: string; @@ -115,9 +115,10 @@ export const Canvas = React.forwardRef((props, ref) => { if (event.pointerType === 'mouse' && event.button !== 0) return; + const isEraser = event.pointerType === 'pen' && ((event.buttons & 32) === 32); const point = getCoordinates(event); - onPointerDown(point); + onPointerDown(point, isEraser); }; const handlePointerMove = ( diff --git a/src/ReactSketchCanvas/index.tsx b/src/ReactSketchCanvas/index.tsx index c297d6c..444b1af 100644 --- a/src/ReactSketchCanvas/index.tsx +++ b/src/ReactSketchCanvas/index.tsx @@ -189,14 +189,16 @@ export const ReactSketchCanvas = React.forwardRef< }, })); - const handlePointerDown = (point: Point): void => { + const handlePointerDown = (point: Point, isEraser: boolean): void => { setIsDrawing(true); setUndoStack([]); + const isDraw = !isEraser && drawMode; + let stroke: CanvasPath = { - drawMode: drawMode, - strokeColor: drawMode ? strokeColor : '#000000', // Eraser using mask - strokeWidth: drawMode ? strokeWidth : eraserWidth, + drawMode: isDraw, + strokeColor: isDraw ? strokeColor : '#000000', // Eraser using mask + strokeWidth: isDraw ? strokeWidth : eraserWidth, paths: [point], };