0
\$\begingroup\$

My canvas stop showing anything when I want to display a tile 25 times. No errors. Here is the code:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var StyleSheet = function(image, width, height) {
  this.image = image;
  this.width = width;
  this.height = height;


  this.draw = function(image, sx, sy, swidth, sheight, x, y, width, height) {
    image.onload = function() {
      context.drawImage(image, sx, sy, swidth, sheight,x, y, width, height);
    }
  }
}

var Loader = function(src) {
  this.image = new Image();
  this.image.src = src;

  this.image.onload=function(){
    var sprite = new StyleSheet(background, 16, 16);
    for (i = 0; i < 25; i++) {
      for (j = 0; j < 25; j++) {
        sprite.draw(background, 30, 30, 36, 36, i * 36, j * 36, 36, 36);
      }
    }
  }
  return this.image;
}

var background = new Loader("https://opengameart.org/sites/default/files/PathAndObjects.png");
console.log(background);
\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

So I solved the problem by removing one of the image.onload functions. The problem was that I had them both in my constructor functions. And the one inside Loader constructor wasn't firing. Removed it from:

this.draw = function(image, sx, sy, swidth, sheight, x, y, width, height) {
    image.onload = function() {
      context.drawImage(image, sx, sy, swidth, sheight,x, y, width, height);
    }
  }
\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .