Как правильно выводить картинки в canvas?

Question

[Александра]

В методе load есть закомментированная часть, это часть нормально выводит картинки, но чтобы избегать дублей пытаюсь тоже самое сделать через цикл и получаю в консоли NS_ERROR_NOT_AVAILABLE: ошибка на строке где выводится первая картинка в методе render, тут this.ctx.drawImage(this.sprites.background, 0, 0);

var game = {
    width: 640,
    height: 360,
    ctx: undefined,
    platform: undefined,
    sprites: {
        background: undefined,
        platform: undefined
    },
    init: function() {
        var canvas = document.getElementById('mycanvas');
        this.ctx = canvas.getContext('2d');
    },
    load: function() {
        for (var key in this.sprites) {
            this.sprites[key] = new Image();
            this.sprites[key].src = 'img/'+ key + '.png';
            console.log(this.sprites[key]);
        }

        // this.sprites.background = new Image();
        // this.sprites.background.src = 'img/bg-main.png';
        // this.sprites.platform = new Image();
        // this.sprites.platform.src = 'img/pl.png';
    },
    start: function() {
        this.init();
        this.load();
        this.run();
    },
    render: function() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        this.ctx.drawImage(this.sprites.background, 0, 0);
        this.ctx.drawImage(this.sprites.platform, this.platform.x, this.platform.y, 100, 20);
    },
    run: function() {
        this.render();

        window.requestAnimationFrame(function() {
            game.run();
        });
    }
};

Answer 1

[twobomb]

Дело в том, что изображения выводить можно только после того, как они будут загружены.
Поэтому нужно немного модифицировать ваш код

//....
    load: function(callback) {
    		let loaded = 0;
        for (var key in this.sprites)
        	loaded++;
        for (var key in this.sprites) {
            this.sprites[key] = new Image();
            this.sprites[key].src = 'img/'+ key + '.png';
            this.sprites[key].onload = function(){
            if(--loaded <= 0)
            	callback();
            }            
        }
    },
    start: function() {
        this.init();
        this.load(this.run);
    },
//....

Comments

[Александра]

та же самая ошибка, или я не правильно, что то сделала?

var game = {
    width: 640,
    height: 360,
    ctx: undefined,
    platform: undefined,
    sprites: {
        background: undefined,
        platform: undefined
    },
    init: function() {
        var canvas = document.getElementById('mycanvas');
        this.ctx = canvas.getContext('2d');
    },
    load: function(callback) {
        let loaded = 0;
        for (var key in this.sprites) {
            loaded++;
            this.sprites[key] = new Image();
            this.sprites[key].src = 'img/' + key + '.png';
            this.sprites[key].onload = function() {
                if (--loaded <= 0)
                    callback();
            }
        }
    },
    // load: function() {
    //
    //     for (var key in this.sprites) {
    //         this.sprites[key] = new Image();
    //         this.sprites[key].src = 'img/'+ key + '.png';
    //         console.log(this.sprites[key]);
    //     }
    //
    //     // this.sprites.background = new Image();
    //     // this.sprites.background.src = 'img/bg-main.png';
    //     // this.sprites.platform = new Image();
    //     // this.sprites.platform.src = 'img/pl.png';
    // },
    start: function() {
        this.init();
        this.load(this.run);
        this.run();
    },
    render: function() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        this.ctx.drawImage(this.sprites.background, 0, 0);
        this.ctx.drawImage(this.sprites.platform, this.platform.x, this.platform.y, 100, 20);
    },
    run: function() {
        this.render();

        window.requestAnimationFrame(function() {
            game.run();
        });
    }
};

game.platform = {
    x: 280,
    y: 320,
}

window.addEventListener('load', function() {
    game.start();
});

[twobomb]

Александра, Что то не правильно, а именно нужно убрать вызов метода run, он будет вызываться с колбека, внимательно смотрите мой пример, а именно метод start, можно тупо скопировать

[twobomb]

Александра, а еще метод load, нужно просто скопировать я не просто так разъеденил те два цикла

[Александра]

twobomb, убрала, теперь ошибка исчезла в консоли пусто, но ничего не выводится

[Александра]

twobomb, так же?

load: function(callback) {
        let loaded = 0;
        for (var key in this.sprites) {
            loaded++;
        }
        for (var key in this.sprites) {
            this.sprites[key] = new Image();
            this.sprites[key].src = 'img/' + key + '.png';
            this.sprites[key].onload = function() {
                if (--loaded <= 0)
                    callback();
            }
        }
    },

[twobomb]

Александра, Ладно чтобы работали все эти this, придеться добавить немного изврата. Кстате this.platform = undefined , а оно пытаеться в рендере x взять. Поэтому на 0 поменял

var game = {
    width: 640,
    height: 360,
    ctx: undefined,
    platform: undefined,
    sprites: {
        background: undefined,
        platform: undefined
    },
    init: function() {
        var canvas = document.getElementById('mycanvas');
        this.ctx = canvas.getContext('2d');
    },
    load: function(callback) {
    		let loaded = 0;
        for (var key in this.sprites)
        	loaded++;
        for (var key in this.sprites) {
            this.sprites[key] = new Image();
            this.sprites[key].src = 'img/' + key + '.png';
            var _this = this;
            this.sprites[key].onload = function(){
            if(--loaded <= 0)
            	callback.apply(_this,null);
            }            
        }
    },
    start: function() {
        this.init();
        this.load(this.run);
    },
    render: function() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        this.ctx.drawImage(this.sprites.background, 0, 0);
        this.ctx.drawImage(this.sprites.platform, 0, 0, 100, 20);
    },
    run: function() {
        this.render();  
        requestAnimationFrame(()=>this.run.apply(this,null));
    }
};
game.start();

P.S. Смотрите каждый метод, внимательно , а лучше ctrl+c , ctrl+v
P.P.S.

Вариант без изврата, но this в методе run не будет работать, точнее там он будет Window

var game = {
    width: 640,
    height: 360,
    ctx: undefined,
    platform: undefined,
    sprites: {
        background: undefined,
        platform: undefined
    },
    init: function() {
        var canvas = document.getElementById('mycanvas');
        this.ctx = canvas.getContext('2d');
    },
    load: function(callback) {
    		let loaded = 0;
        for (var key in this.sprites)
        	loaded++;
        for (var key in this.sprites) {
            this.sprites[key] = new Image();
            this.sprites[key].src = 'img/' + key + '.png';
            this.sprites[key].onload = function(){
            if(--loaded <= 0)
            	callback();
            }            
        }
    },
    start: function() {
        this.init();
        this.load(this.run);
    },
    render: function() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        this.ctx.drawImage(this.sprites.background, 0, 0);
        this.ctx.drawImage(this.sprites.platform, 0, 0, 100, 20);
    },
    run: function() {
        game.render();  
        requestAnimationFrame(game.run);
    }
};
game.start();

[Александра]

twobomb, извините, что отнимаю ваше время и и спасибо за уделенное внимание моему вопросу) копирую, вставляю, пробую оба ваших варианта, все так же, в консоли пусто и не выводится

[twobomb]

Александра, Значит проблема с путями к изображениям, я заменил ссылку у меня всё работает
вот

[Александра]

twobomb, да, проблема была в путях, спасибо большое за столь уделенное время)))