Estaba haciendo un gráfico genial para mi sitio web cuando me apareció este extraño error. Importo una clase llamada 'Partícula' de partícula.js y también le doy 2dRenderingContextAPI de HTML5 Canvas. Por favor, eche un vistazo a mi código y diga dónde me equivoqué. Espero que se dibuje un rectángulo negro en Canvas.
//This is the file attached to the document //Imports import Particle from "./particle.js"; //Global Variables const canvas = document.getElementById('canvas1'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const particle = new Particle(ctx); //Animation Loop function animate() { ctx.fillStyle = 'rgba(0, 0, 139, 0.2)'; ctx.fillRect(0, 0, canvas.width, canvas.height); particle.draw(); requestAnimationFrame(animate); } animate(); body { margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; } #canvas1 { height: 100vh; width: 100vw; background: darkblue; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bouncing particles</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="canvas1"></canvas> <script src="script.js" type="module"></script> </body> </html>Y este es mi archivo de partículas.js:
//This is particle.js export default class Particle { constructor(ctx) { this.height = 100; this.width = 100; this.ctx = ctx; } draw() { this.ctx.fillRect(50, 50, this.height, this.width); } }