Im trying to make the canvas fit the section container it is in. How do i tell the canvas to be the size of its container? I usually just use window.innerWidth. But i want the canvas to resize with its container. It should be half the page in total as im using 2 grid cols. I have all the containers set up correctly without the canvas and they fill all available space. Im using react and calling a Particles component. Im sure i need to pass the container its in as a prop to my Particles and say something like canvas.width = container.innerWidth I just cant figure it out. I have tried getting the div the canvas is in by id and then getting its inner width. didnt work. Sorry i know this is badly explained.
This is the component
function Particles() {
const useScript = (url) => {
useEffect(() => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
console.log('canvas', canvas);
console.log('ctx', ctx);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = 'absolute';
canvas.style.width = '100%';
canvas.style.height = '100%';
const container = document.querySelector('#particles');
container.appendChild(canvas);
.....
};
return <div id='particles' className=''>{useScript()}</div>;
}
export default Particles;
and the container
<section className='grid lg:h-[calc(100vh-64px)] lg:max-h-[calc(100vh-64px)] bg-green-400 grid-cols-2 h-full'>
{/* Main */}
<section className='bg-blue-300 grid overflow-hidden p-2'>
<section className='bg-yellow-300'>
<Particles />
</section>
</section>
{/* Form */}
<section className='bg-red-300 grid'>
<RegisterForm />
</section>
</section>
