Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

291
Views
Error in loading drawImage() method in Javascript canvas

I have the following class inside my code:

//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;
        };
    };
};

And later on the code when I calle the class 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)
];

I get an error:

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

And I don't know how to solve it, the error is on this line:

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

Inside the class Collectable. I have tried to add and onload event on that line but the error is still there. What can I do?

Thank you!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Finally I solved this problem changing the js file to the root. I think it took time looking for the images because it had to look between two folders, I had the js file inside a folder called \js before. So thank you!

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!