Why HTML script doesn't work in my React App?

Question

I have created a canvas script for HTML and it works pretty well as long as I didnt add it to a React app,

I have tried to load it to my index.html but it didn't work and didn't show anything.

I also guessed that I should put it to my App.js but idk how to wrap it correctly

Looks like it even compiles here in snippet, but idk why it doesn't work for me in my project? Can I use script like this in my html file when using react app?

 const canvas = document.getElementById("canvas1"); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let particlesArray; let mouse = { x: null, y: null, radius: (canvas.height/80) * (canvas.width/80) } window.addEventListener('mousemove', function(event) { mouse.x = event.x; mouse.y = event.y; } ); class Particle { constructor(x, y, directionX, directionY, size, color){ this.x = x; this.y = y; this.directionX = directionX; this.directionY = directionY; this.size = size; this.color = color; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false ); ctx.fillStyle = '#ddd5d5'; ctx.fill(); } update() { if ( this.x > canvas.width || this.x < 0 ){ this.directionX = - this.directionX; } if ( this.y > canvas.height || this.y < 0 ){ this.directionY = - this.directionY; } let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt (dx * dx + dy * dy) if (distance < mouse.radius + this.size ){ if ( mouse.x < this.x && this.x < canvas.width - this.size * 10 ){ this.x += 10; } if(mouse.x >this.x && this.x > this.size *10){ this.x -=10; } if ( mouse.y < this.y && this.y < canvas.height - this.size * 10 ){ this.y += 10; } if(mouse.y > this.y && this.y > this.size * 10){ this.y -= 10; } } this.x += this.directionX; this.y += this.directionY; this.draw(); } } function init() { particlesArray = []; let numberOfParticles = (canvas.height * canvas.width) / 9000; for (let i = 0; i < numberOfParticles *2; i++){ let size = (Math.random() * 5 ) + 1; let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2); let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2); let directionX = (Math.random() * 5) - 2.5; let directionY = (Math.random() * 5) - 2.5; let color = '#ddd5d5'; particlesArray.push(new Particle(x, y,directionX, directionY, size, color)); } } function connect(){ let opacityValue = 1; for( let a=0; a < particlesArray.length; a++ ){ for(let b = a; b < particlesArray.length; b++){ let distance = (( particlesArray[a].x - particlesArray[b].x) * (particlesArray[a].x - particlesArray[b].x)) + ((particlesArray[a].y - particlesArray[b].y) * (particlesArray[a].y - particlesArray[b].y)); if(distance < (canvas.width/7) * (canvas.height/7)){ opacityValue = 1 - (distance/20000); ctx.strokeStyle='rgba(232, 232, 232,' + opacityValue + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(particlesArray[a].x, particlesArray[a].y); ctx.lineTo(particlesArray[b].x, particlesArray[b].y); ctx.stroke(); } } } } function animate(){ requestAnimationFrame (animate); ctx.clearRect(0, 0, innerWidth, innerHeight) for (let i = 0; i < particlesArray.length; i++) { particlesArray[i].update(); } connect(); } window.addEventListener('resize', function(){ canvas.width = innerWidth; canvas.height = innerHeight; mouse.radius = ((canvas.height/80) * (canvas.height/80)); init(); } ); window.addEventListener('mouseout', function(){ mouse.x = undefined; mouse.x = undefined; } ) init(); animate();

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon,ico" /> <meta name="viewport" content="width=device-width. initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="stylesheet" href="../src/App.scss" /> <title>My Website</title> </head> <body> <canvas id="canvas1"></canvas> <script src="../src/components/script.js"></script> <div id="root"></div> </body> </html>

Answer 1

check if this works for you: https://codesandbox.io/s/particle-test-ekb0r

I've tried the simplest way possible that requires the least alterations of your code. Though it works, Note that it might not be the most efficient method. I've just provided you a way so you can get the idea. Please refer to more sources.

Why HTML script doesn't work in my React App?

Question

1 answers

solution1
0 2021-03-22 15:41:47

Why HTML script doesn't work in my React App?

Question

1 answers

solution1 0 2021-03-22 15:41:47

solution1
0 2021-03-22 15:41:47