0

I can't seem to figure out how to draw an image on the canvas. I've searched for a solution, and people are talking about img.onload, but I can't figure out how to implement this with oop. - As far as I've understood, the picture need to be loaded first, but how do I get that to fit into the sequence?

Here is a very simplified example of my structure.

window.onload = function () {
    var MyApp = new App();
    MyApp.Loop();
}
class App {
    elements: cElement[] = [];
    canvas: Canvas = new Canvas(); 
    Loop() {
        this.canvas.clear();
        this.Draw();
        requestAnimationFrame(this.Loop.bind(this));
    }
    Draw() {
        for (var i = 0; i < this.elements.length; i++) {
            var e = this.elements[i];
            var img = new Image(e.width, e.heigth);
            img.src = e.ImagePath;
            this.canvas.Ctx.drawImage(img, e.x, e.y);
        }
    }
}

Anyone who knows how to do this?

Thanks in advance

Tc_
  • 505
  • 1
  • 6
  • 15
  • 2
    You can preload all your images. When the last image is completely loaded you can begin your code that uses those images. Here's a previous post explaining an image preloader: http://stackoverflow.com/questions/30578521/how-do-image-preloaders-work/30581295#30581295 – markE Dec 13 '15 at 04:21
  • 1
    @markE Sounds exactly like what I'm needing, thanks a lot! =) – Tc_ Dec 13 '15 at 04:23

0 Answers0