Tengo la siguiente clase dentro de mi código:

 //Collectables const humanImg = new Image(); humanImg.src = "../images/human.png"; const mutationImg = new Image(); mutationImg.src = "../images/mutation.png"; //Canvas const mycanvas = document.getElementById('my-canvas'); let ctx = mycanvas.getContext('2d'); //Classes class Collectable { constructor(img, x, y, width, height) { this.img = img; this.x = x; this.y = y; this.width = width; this.height = height; this.collected = false; this.notScored = true; this.mutate = false; }; draw(){ ctx.drawImage(this.img, this.x, this.y, this.width, this.height); }; checkcollision(object) { return ( this.x < object.x + object.width && this.x + this.width > object.x && this.y < object.y + object.height && this.y + this.height > object.y ); }; collect(object){ if (this.checkcollision(object)) { this.collected = true; ctx.clearRect(this.x, this.y, this.width, this.height); ctx.fillStyle = "black"; ctx.fillRect(this.x, this.y, this.width, this.height); this.mutate = true; }; }; updateScore(object, score){ if ((this.checkcollision(object)) && (this.notScored === true)){ points += score; pointsRestart += score; this.notScored = false; playerMovingAudio.play(); playerMovingAudio.volume = 0.6; }; }; };

Y luego en el código cuando llamo a la clase Collectable:

 // Collectables const specialCollects = [ new Collectable(mutationImg, 20, 60, 30, 30), new Collectable(mutationImg, 950, 60, 30, 30), new Collectable(mutationImg, 20, 500, 30, 30), new Collectable(mutationImg, 950, 500, 30, 30) ];

me sale un error:

 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

Y no se como solucionarlo, el error esta en esta linea:

 ctx.drawImage(this.img, this.x, this.y, this.width, this.height);

Dentro de la clase Coleccionable. Intenté agregar y cargar un evento en esa línea, pero el error sigue ahí. ¿Que puedo hacer?

¡Gracias!