I am currently working on a project that involves adding a canvas to my website. However, I'm facing an issue where the canvas is not displaying as expected. Can someone help me troubleshoot this problem?
Here is what I have tried so far: Whenever I hover over the header, it seems like the canvas is updating, but nothing is being shown on the screen.
Below is the code snippet for Canvas.jsx:
export class Canvas extends Component {
state = {
container: document.getElementById('test'),
canvas: document.createElement('canvas'),
ctx: document.createElement('canvas').getContext("2d"),
mouseCoords: null,
particles: [],
width: 0,
height: 0,
};
componentDidMount() {
window.scrollTo(0, 0);
document.getElementById('test').appendChild(document.createElement('canvas'));
this.setState({
container: document.getElementById('test'),
canvas: document.createElement('canvas'),
ctx: document.createElement('canvas').getContext("2d")
}, () => this.handleResize());
window.addEventListener("resize", this.handleResize)
}
r = (e, t) => {
return Math.hypot(t[0] - e[0], t[1] - e[1])
};
...
The goal of this project is to create a canvas with interactive particles. When hovering over the canvas, the particles should move towards the cursor and zoom in on the green particles.