Drawing rectangles with React & Canvas multiple rectangles issue

Question

This is hook file :

import { useEffect, useRef, useState } from "react";


export function useOnDraw(onDraw) {

    const canvasRef = useRef(null);
    const isDrawingRef = useRef(false);
    const prevPointRef = useRef(null);

    const mouseMoveListenerRef = useRef(null);
    const mouseUpListenerRef = useRef(null);
    
    const [startingPoints, setstartingPoints] = useState({x: 0, y:0});

    function setCanvasRef(ref) {
        canvasRef.current = ref;
    }

    function onCanvasMouseDown(e) {
        
        const boundingRect = canvasRef.current.getBoundingClientRect();
        setstartingPoints({
            x: e.clientX - boundingRect.left,
            y: e.clientY - boundingRect.top
        })
        isDrawingRef.current = true;
    }

    useEffect(() => {
        function computePointInCanvas(clientX, clientY) {
            if (canvasRef.current) {
                const boundingRect = canvasRef.current.getBoundingClientRect();
                

                return {
                    x: clientX - boundingRect.left,
                    y: clientY - boundingRect.top
                }
            } else {
                return null;
            }

        }
        function initMouseMoveListener() {
            const mouseMoveListener = (e) => {
                if (isDrawingRef.current && canvasRef.current) {
                    const point = computePointInCanvas(e.clientX, e.clientY);
                    
                    const ctx = canvasRef.current.getContext('2d');
                    if (onDraw) onDraw(ctx, point, prevPointRef.current, startingPoints);
                    prevPointRef.current = point;
                    console.log(point);
                }
            }
            mouseMoveListenerRef.current = mouseMoveListener;
            window.addEventListener("mousemove", mouseMoveListener);
        }

        function initMouseUpListener() {
            const listener = () => {
                isDrawingRef.current = false;
                prevPointRef.current = null;
            }
            mouseUpListenerRef.current = listener;
            window.addEventListener("mouseup", listener);
        }

        function cleanup() {
            if (mouseMoveListenerRef.current) {
                window.removeEventListener("mousemove", mouseMoveListenerRef.current);
            }
            if (mouseUpListenerRef.current) {
                window.removeEventListener("mouseup", mouseUpListenerRef.current);
            }
        }

        initMouseMoveListener();
        initMouseUpListener();
        return () => cleanup();

    }, [onDraw]);

    return {
        setCanvasRef,
        onCanvasMouseDown,
    }

};

This is the Draw Rectangle :

function drawRect(
        start, 
        end,
        ctx,
        color,
        width,
        startingPoints
        
    ) {
  
       
        start = start ?? end;

        ctx.beginPath();
        ctx.lineWidth = width;
        ctx.strokeStyle = color;
        
        ctx.fillStyle = color;
        
        ctx.strokeRect(startingPoints.x, startingPoints.y, end.x - startingPoints.x, end.y - startingPoints.y);
        ctx.clearRect(startingPoints.x, startingPoints.y, end.x - startingPoints.x, end.y - startingPoints.y);
        // ctx.fill();
        ctx.stroke();

    }

This is the output: Multiple renderings of rectangle when mouse down

I have this code I am using to draw rectangle on a Canvas, I can't figure out what I am doing wrong. If I draw a rectangle and still am on mouseDown and move the mouse then that's is the output. Also the overlapping rectangles hide eachother lines. Can anyone help me figure this out?

Drawing rectangles with React & Canvas multiple rectangles issue

0 Answers0