Hey everyone, I could really use some assistance on creating a design with Html 5 canvas. My current issue is that the rectangles I'm trying to generate are overlapping and not fitting properly within the canvas. Below, you'll find both a reference image of what I'm aiming for and a screenshot of my current progress.
Take a look at the reference design
See what I've managed to create so far
import React, { useEffect, useRef } from "react";
import "./home.css";
const Home = () => {
const canvasRef = useRef(null);
const contextRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
canvas.width = 1000;
canvas.height = 1000;
const context = canvas.getContext("2d");
contextRef.current = context;
drawRect();
}, []);
function drawRect() {
// Drawing different sized rectangles in various colors
}
return (
<main className="main-content">
*<canvas ref={canvasRef} className="canvas-container"></canvas>
</main>
);
};
export default Home;
and here's the accompanying CSS:
.main-content {
height: 78vh;
margin: 25px;
border: 1px solid gold;
}
.canvas-container {
width: 100%;
height: 100%;
}