Skip to content

Instantly share code, notes, and snippets.

@ChrisDobby

ChrisDobby/canvasDraw.jsx

Last active Mar 31, 2021
Embed
What would you like to do?
React component to redraw a canvas when resized
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;
@pgmoir

This comment has been minimized.

Copy link

@pgmoir pgmoir commented May 4, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment