Skip to content

Instantly share code, notes, and snippets.

@ChrisDobby ChrisDobby/canvasDraw.jsx
Last active Jul 28, 2019

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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.