Add eraser tool with Lyra

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 .cache
 dist
-public
+public
+.DS_Store

example/App.tsx

@@ -6,6 +6,7 @@ import {
   Artboard,
   ArtboardRef,
   useShadingBrush,
+  useEraser,
   useWatercolor,
   ToolHandlers,
 } from "../src/";
@@ -14,6 +15,7 @@ import {
   FaPencilAlt,
   FaPaintBrush,
   FaMarker,
+  FaEraser,
   FaSprayCan,
   FaDownload,
   FaTrash,
@@ -41,6 +43,7 @@ export function App(): JSX.Element {
   const marker = useMarker({ color, strokeWidth });
   const watercolor = useWatercolor({ color, strokeWidth });
   const airbrush = useAirbrush({ color, strokeWidth });
+  const eraser = useEraser({ strokeWidth });
   const shading = useShadingBrush({
     color,
     spreadFactor: (1 / 45) * strokeWidth,
@@ -52,6 +55,7 @@ export function App(): JSX.Element {
     [brush, FaPaintBrush],
     [marker, FaMarker],
     [airbrush, FaSprayCan],
+    [eraser, FaEraser],
   ];
   const [currentTool, setCurrentTool] = useState(0);
 

example/style.css

@@ -97,12 +97,15 @@ label span {
   display: inline-flex;
   cursor: pointer;
   border: none;
-  place-items: center;
+  align-items: center;
+  justify-content: center;
   width: 32px;
   height: 32px;
   margin: 3px;
 }
 
+
+
 @media screen and (max-width: 500px) {
   main {
     grid-template-columns: 1fr 1fr;

src/index.ts

@@ -3,6 +3,7 @@ export * from "./tools/marker/useMarker";
 export * from "./tools/airbrush/useAirbrush";
 export * from "./tools/shading/useShadingBrush";
 export * from "./tools/watercolor/useWatercolor";
+export * from "./tools/eraser/useEraser";
 export * from "./components/Artboard";
 export * from "./utils/pointUtils";
 export * from "./history";

src/tools/eraser/useEraser.ts

@@ -0,0 +1,35 @@
+import { useCallback } from "react";
+import { ToolHandlers } from "../../components/Artboard";
+import { Point } from "../../utils/pointUtils";
+import { circleCursor } from "../../utils/cursors";
+export interface UseEraserProps {
+  color?: string;
+  strokeWidth?: number;
+}
+
+export function useEraser({ strokeWidth = 25 }: UseEraserProps): ToolHandlers {
+  const startStroke = useCallback(
+    (point: Point, context: CanvasRenderingContext2D) => {
+      context.globalCompositeOperation = "source-over";
+
+      context.lineWidth = strokeWidth;
+      context.strokeStyle = "#ffffff";
+      context.lineJoin = context.lineCap = "round";
+      context.moveTo(point[0], point[1]);
+      context.beginPath();
+    },
+    [strokeWidth]
+  );
+
+  const continueStroke = useCallback(
+    (point: Point, context: CanvasRenderingContext2D) => {
+      context.lineTo(point[0], point[1]);
+      context.stroke();
+    },
+    []
+  );
+
+  const cursor = circleCursor(strokeWidth);
+
+  return { name: "Eraser", startStroke, continueStroke, cursor };
+}