React component to redraw a canvas when resized

canvasDraw.jsx

import React from "react";

const scaleWidth = 500;
const scaleHeight = 500;

function draw(canvas, scaleX, scaleY) {
    const context = canvas.getContext("2d");
    context.scale(scaleX, scaleY);
    context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);

    context.beginPath();
    context.setLineDash([]);
    context.lineWidth = 2;
    context.strokeStyle = "red";
    context.moveTo(0, 100);
    context.lineTo(scaleWidth, 100);
    context.moveTo(0, 400);
    context.lineTo(scaleWidth, 400);
    context.stroke();
    context.lineWidth = 1;
    context.strokeStyle = "blue";
    context.fillStyle = "blue";
    context.rect(200, 200, 100, 100);
    context.fill();
    context.closePath();
}

function CanvasDraw() {
    const [scale, setScale] = React.useState({ x: 1, y: 1 });
    const canvas = React.useRef(null);

    const calculateScaleX = () => (!canvas.current ? 0 : canvas.current.clientWidth / scaleWidth);
    const calculateScaleY = () => (!canvas.current ? 0 : canvas.current.clientHeight / scaleHeight);

    const resized = () => {
        canvas.current.width = canvas.current.clientWidth;
        canvas.current.height = canvas.current.clientHeight;
        setScale({ x: calculateScaleX(), y: calculateScaleY() });
    };

    React.useEffect(() => resized(), []);

    React.useEffect(() => {
        const currentCanvas = canvas.current;
        currentCanvas.addEventListener("resize", resized);
        return () => currentCanvas.removeEventListener("resize", resized);
    });

    React.useEffect(() => {
        draw(canvas.current, scale.x, scale.y);
    }, [scale]);

    return <canvas ref={canvas} style={{ width: "100%", height: "100%" }} />;
}

export default CanvasDraw;

Nice. Thanks for this. It helped massively. I created this version (based on your original) that injects image into canvas, canvas resizes to match image, and then plots some points and adds tags, that all stick to original position. https://gist.github.com/pgmoir/7e2eb61974d4d11cbd510c761d51626d