I'm currently developing a line plotter in React. This "line plotter" needs to be contained within a CSS grid item. I am utilizing the <canvas> element to draw the lines, but I'm unsure if this is the best approach. Is there a more efficient method I should consider?
More importantly, my canvas is not occupying the full size of the grid item. Is there a way to achieve this and also ensure that the origin of the canvas is at the center?
Here's a snippet of my code:
const Canvas = props => {
const { draw, settings, ...rest } = props
const canvasRef = useRef(null)
useEffect(() => {
const canvas = canvasRef.current
const context = canvas.getContext('2d')
draw(context, settings)
}, [draw])
return (
<div className={"fractal_tree_canvas"}>
<canvas ref={canvasRef}/>
</div>
)
}
And here's the accompanying CSS:
.fractal_tree_canvas {
height: 100%;
width: 100%;
grid-row: 2;
grid-column: 2;
}
Finally, here's the grid setup:
.fractal_tree_screen {
background-color: #e7e7e7;
display: inline-grid;
position: relative;
width: 100vw;
height: calc(100vh - 65px);
grid-template-columns: 5% 50% auto 5%;
grid-template-rows: 6% 1fr 6%;
}
Despite my efforts, the canvas size remains stuck at 300x150. How can I ensure it fills the entire grid item?