Мне приходит в голову сделать вложенные onload:
var img1 = new Image();
img1.src = "img/background/1.png";
img1.onload = function() {
ctx.drawImage(img1, 0, 0, x, y);
var img2 = new Image();
img2.src = "img/shadow/1.png";
img2.onload = function() {
ctx.drawImage(img2, 0, 0, x, y);
}
}
Второй вариант: слои можно сделать самими canvas: придётся создавать отдельный canvas на каждую картинку.
<div style="position: relative;">
<canvas id="layer1" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
А вообще, код плохой, потому что идёт множество повторений. По возможности любые повторения нужно прятать в циклы for или forEach, а также в функции. Потому что если что-то нужно будет менять, это нужно будет сделать в 1 месте, а не в 10. В данном случае, src картинок лучше вынести в массив, а всё остальное сделать в цикле forEach по этому массиву.
Кроме того, вместо var лучше использовать let: почитайте разницу между ними.