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
This comment has been minimized.
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