Холст наложения изображений в обратном порядке

Question

Когда я рисую на своем холсте HTML5 с этим кодом:

<canvas id="game">Your browser can't use canvas</canvas>
<script>
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
var a = new Image();
a.onload = function() {
ctx.drawImage(a,50,40,50,50);
}
a.src = "image1.png";
var b = new Image();
    b.onload = function() {
ctx.drawImage(b,50,60,50,50);
}
b.src = "image2.png";
</script>
</body>
</html>

Image2.png появляется в верхней части Image1.png. Однако после перезагрузки страницы изображения меняются в обратном порядке. Кроме того, иногда при первой загрузке (без перезагрузки) Image1.png появляется в верхней части image2.

Если я рисую изображения два раза, но в том же порядке (Изображение1, затем Изображение2) после 2 перезагрузки, порядок изменения изображений.

Я использую Firefox 59.0.3 64 бит на Windows 8.

Это проблема с моим кодом или ошибка в Firefox?

Answer 1

Потому что вы не можете контролировать порядок, когда сработает событие onload. Самый простой способ исправить это, не слишком сильно изменяя свой код (на вашем месте я бы прикрепил ту же функцию загрузки и использовал бы обертку для инкапсуляции ваших переменных):

<canvas id="game">Your browser can't use canvas</canvas>
<script>
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
var counter = 2;
var a = new Image();
a.onload = function() {
counter--;
if(!counter) {
    ctx.drawImage(a,50,40,50,50);
    ctx.drawImage(b,50,60,50,50);
}
}
a.src = "image1.png";
var b = new Image();
    b.onload = function() {
counter--;
if(!counter) {
    ctx.drawImage(a,50,40,50,50);
    ctx.drawImage(b,50,60,50,50);
}
}
b.src = "image2.png";
</script>
</body>
</html>