How to include this in a native HTML/CSS/JS project

[geoffguin124]

Hi guys, this tool is amazing, but im having trouble using this project in my own native project, as i cant figure out how to get past the Node module portion. I cant figure out how to install the Node module into my project, which technically does not run a backend (yet, im just trying to run the tool via the browser as of right now to allow for scalability in the future). Thank you so much!

[geoffguin124]

FIgurd out how to get this into react, but my drawings definitely do not look like the ones on the website. Would love if someone could help me out,

Thank you so much in advance.

My code
import React, { useState, useRef, useEffect } from "react";
import { getStroke } from "perfect-freehand";

// Helper function to create SVG path data from stroke points

const getSvgPathFromStroke = (points, closed = true) => {
const stroke = getStroke(points, {
size: 8,
thinning: 0.5,
smoothing: 0.5,
streamline: 0.5,
});

const len = stroke.length;
if (len < 3) return ""; // Need at least 3 points to form a path

const average = (a, b) => (a + b) / 2;
let result = M${stroke[0][0]},${stroke[0][1]};

for (let i = 1; i < len - 1; i++) {
const a = stroke[i];
const b = stroke[i + 1];
const c = average(a[0], b[0]);
const d = average(a[1], b[1]);
result += Q${a[0]},${a[1]} ${c},${d};
}

if (closed && len > 2) {
const endX = average(stroke[len - 2][0], stroke[len - 1][0]);
const endY = average(stroke[len - 2][1], stroke[len - 1][1]);
result += Q${stroke[len - 1][0]},${stroke[len - 1][1]} ${endX},${endY};
result += " Z"; // Close the path
}

return result;
};

const DrawingCanvas = () => {
const [points, setPoints] = useState([]);
const canvasRef = useRef(null);

useEffect(() => {
if (points.length > 2) {
const pathData = getSvgPathFromStroke(points);
const ctx = canvasRef.current.getContext("2d");
const myPath = new Path2D(pathData);
ctx.fill(myPath); // Use stroke or fill depending on your preference
}
}, [points]); // Redraw when points update

const handlePointerDown = (e) => {
const rect = canvasRef.current.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
setPoints([[x, y]]);
};

const handlePointerMove = (e) => {
if (e.buttons !== 1 || points.length === 0) return;
const rect = canvasRef.current.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
setPoints((prevPoints) => [...prevPoints, [x, y]]);
};

const handlePointerUp = () => {
setPoints([]); // Reset the points after the stroke is complete
};

return (
<canvas
ref={canvasRef}
width={800}
height={600}
onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
style={{ touchAction: "none", border: "1px solid black" }}
/>
);
};

export default DrawingCanvas;