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\$
0
\$\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\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.