CODEWITHSUNDEEP
javascripthtmlcsscanvas
hovawart
hovawart

Reputation: 25

Replace Rectangle on Canvas with Image

I'm building a simple video game using HTML Canvas and JavaScript. I'm trying to replace a black square with an image of a strawberry, but the image is not displaying on the canvas. How would I make the image replace the square?

this.draw = function() {
  var img = new Image();
  img.src = "strawberry.png";
  ctx.drawImage(img, 10, 10);
  ctx.fillStyle = "black";
  ctx.fillRect(this.x, this.y, 10, 10);   
}

Upvotes: 0

Views: 1449

Answers (1)

ATD
ATD

Reputation: 1364

The problem is that the image may not have loaded by the time the code is being called. You will need to wait for that to happen.

Try:

function loadimage() {
  var c = document.getElementById("myCanvas"); 
  var ctx = c.getContext("2d"); 
  var img = new Image();
  img.src = "strawberry.png";
  img.onload = function() {
    ctx.drawImage(img, 0, 0, c.width, c.height);
  }
}

window.onload = loadimage;

I have put a version of this code (I have a different image filename for my test) into a SCRIPT tag in the HEAD section of the page. The code runs when the page has finished loading, but the code itself waits for the img.onload event to be triggered before actually drawing the image. And, change "myCanvas" to the ID of your canvass tag.

Upvotes: 1

Related Questions