Loading Images from a Canvas

Question

I'm trying to make a game in HTML5 and I'm having trouble loading image assets. My issue is that the onload event of the code isn't firing and so the boolean isn't changing.

var c = document.getElementById("gamearea");
var gs = c.getContext("2d");
var one_x = 0;
//Sprite Loading//
function sprite(src,x, y, width, height, frames, levels) {
    this.sprite = Image();
    this.sprite.src = src;
    this.x = x;
    this.y = y;
    this.w = width;
    this.h = height;
    this.f = frames;
    this.l = levels;
    this.cf = 0;
    this.cl = 0;
    this.loaded = false;
    this.src = src;
}
sprite.prototype.draw = function () {
    if (this.loaded) {
        document.getElementById("ass").innerHTML = "Ass";
        gs.drawImage(this.src, this.x, this.y);
    }
}

dog = new sprite("/images/sDog.png", 10, 10, 10, 10, 1, 1);
dog.sprite.onload = function () {
    alex.loaded = true;
}
setInterval(alex.draw, 30);

Answer 1

I would suggest putting the onload event before the set event for your dog sprite image object. I see that you set everything in the constructor, but I would suggest against that.

In you current code you object is being loaded before the line that initializes the onload event.

I have seen this a lot with loading images, I would do something like this.

function sprite(src,x, y, width, height, frames, levels) {
  var self = this;
  self.sprite = new Image();
  self.init = function(){
    self.sprite.src = src;
    self.x = x;
    self.y = y;
    self.w = width;
    self.h = height;
    self.f = frames;
    self.l = levels;
    self.cf = 0;
    self.cl = 0;
    self.loaded = false;
    self.src = src;
  }
}

dog = new sprite();
dog.sprite.onload = function () {
  alex.loaded = true;
}
dog.init("/images/sDog.png", 10, 10, 10, 10, 1, 1);
setInterval(alex.draw, 30);

or, to get a little fancier

function sprite(src,x, y, width, height, frames, levels, onLoad) {
  var self = this;
  self.sprite = new Image();
  self.sprite.onload = function(){
     onLoad();
  }
  self.sprite.src = src;
  self.x = x;
  self.y = y;
  self.w = width;
  self.h = height;
  self.f = frames;
  self.l = levels;
  self.cf = 0;
  self.cl = 0;
  self.loaded = false;
  self.src = src;
}

dog = new Sprite("/images/sDog.png", 10, 10, 10, 10, 1, 1, function(){
   alex.loaded = true;
});
setInterval(alex.draw, 30);

after looking at your fiddle

var c = document.getElementById("gamearea");
var gs = c.getContext("2d");
var one_x = 0;
//Sprite Loading//
function sprite(src, x, y, width, height, frames, levels, loaded) {
var self = this;
self.sprite = new Image();
self.sprite.onload = function(){
    self.loaded = true;
}   
    self.sprite.src = src;

    self.x = x;
    self.y = y;
    self.w = width;
    self.h = height;
    self.f = frames;
    self.l = levels;
    self.cf = 0;
    self.cl = 0;
    self.loaded = false;
    self.src = src;

self.update = function () {
    one_x += 1;
    gs.fillStyle = "white";
    gs.fillRect(0, 0, 1000, 10000);
    gs.fillStyle = "black";
    gs.fillRect(one_x, 20, 10, 10);
}
self.draw = function (){
    if (self.loaded) {
        document.getElementById("ass").innerHTML = "Ass";
        gs.drawImage(self.sprite, self.x, self.y);
    }
}

}
dog = new sprite("http://www.bit-101.com/blog/wp-content/uploads/2009/05/ball.png", 10,     10, 10, 10, 1, 1);
setInterval(dog.draw, 30);

Answer 2

You're missing new here:

this.sprite = Image();

Try:

this.sprite = new Image();

Also make sure that the image file actually exists in the given location.