[HTML5]Nałożenie obrazków na obrazek Opcje

[olszam]

Mam pytanko, chciałbym w canvas nałożyć parę obrazków na tło, normlanie najpierw tło a potem na niego jakieś inne mniejsze obrazki.

[HTML] pobierz, plaintext 
$('button').on('click',function(){
            var c = document.getElementById('myCanvas');
            var ctx = c.getContext("2d");
            var img = new Image();
            img.src = $(location).attr('href')+'/img/'+$('#frames option:selected').val();
            var img1 = new Image();
            img1.src = $(location).attr('href')+'/img/'+$('#merc1 option:selected').val();
            var img2 = new Image();
            img2.src = $(location).attr('href')+'/img/'+$('#merc2 option:selected').val();
            var img3 = new Image();
            img3.src = $(location).attr('href')+'/img/'+$('#merc3 option:selected').val();
            var img4 = new Image();
            img4.src = $(location).attr('href')+'/img/'+$('#merc4 option:selected').val();
            var img5 = new Image();
            img5.src = $(location).attr('href')+'/img/'+$('#merc5 option:selected').val();
            var img6 = new Image();
            img6.src = $(location).attr('href')+'/img/'+$('#merc6 option:selected').val();
            var img7 = new Image();
            img7.src = $(location).attr('href')+'/img/'+$('#merc7 option:selected').val();
            var img8 = new Image();
            img8.src = $(location).attr('href')+'/img/'+$('#merc8 option:selected').val();
            var img9 = new Image();
            img9.src = $(location).attr('href')+'/img/'+$('#merc9 option:selected').val();
 
            var xyframe = [
                [27,3,80,97],
                [112,3,80,97],
                [201,3,80,97],
                [27,128,80,97],
                [112,128,80,97],
                [201,128,80,97],
                [27,252,80,97],
                [112,252,80,97],
                [201,252,80,97],
            ];
            img.onload = function(){
                ctx.drawImage(img, 0, 0,307,382);
            }
            img1.onload = function(){
       	 	    ctx.drawImage(img1,xyframe[0][0],xyframe[0][1],xyframe[0][2],xyframe[0][3]);
            }
            img2.onload = function(){
       	 	    ctx.drawImage(img2,xyframe[1][0],xyframe[1][1],xyframe[1][2],xyframe[1][3]);   
            }
            img3.onload = function(){
       	 	    ctx.drawImage(img3,xyframe[2][0],xyframe[2][1],xyframe[2][2],xyframe[2][3]);
            }
            img4.onload = function(){ 
       	 	    ctx.drawImage(img4,xyframe[3][0],xyframe[3][1],xyframe[3][2],xyframe[3][3]); 
            }
            img5.onload = function(){
       	 	    ctx.drawImage(img5,xyframe[4][0],xyframe[4][1],xyframe[4][2],xyframe[4][3]);
            }
            img6.onload = function(){
       	 	    ctx.drawImage(img6,xyframe[5][0],xyframe[5][1],xyframe[5][2],xyframe[5][3]);
            }
            img7.onload = function(){ 
       	 	    ctx.drawImage(img7,xyframe[6][0],xyframe[6][1],xyframe[6][2],xyframe[6][3]);
            }
            img8.onload = function(){
       	 	    ctx.drawImage(img8,xyframe[7][0],xyframe[7][1],xyframe[7][2],xyframe[7][3]);
            }
            img9.onload = function(){
       	 	    ctx.drawImage(img9,xyframe[8][0],xyframe[8][1],xyframe[8][2],xyframe[8][3]);
            }
        });
[HTML] pobierz, plaintext 

Ogólnie jest ok gdy tło będzie miało w odpowiednich miejscach przezroczystość wyciętą, ale jak dam jakiegoś jpga to już mi zakryje wszystko. Próbowałem w odpowiedniej kolejności poprzestawiać kod z tłem ale nadal nie wychodzi.

[trueblue]

Najpierw piszesz, że chcesz nałożyć tło, a potem obrazki, a pod kodem piszesz, że kiedy tło będzie jpgiem to przykryje (jak było na wierzchu - nad obrazkami).

Jakie jest Twoje pytanie?

[olszam]

Jak dokładnie mam określić pytanie to tak:
Co zrobić by najpierw wygenerowało tło a potem nałożyć na niego obrazki?

[trueblue]

Najpierw nałożyć tło, a potem obrazki...

[olszam]

to akurat działa gdy zrobię dla rysowania tła inne zdarzenie np. inny button do niego, a jeśli ma być w jednym to tylko gdy wcisnę settimeout to co jest w img od 1 do 9 (bez zwykłego img bo to jest tło), inaczej nie chce mi pójść.

[trueblue]

Trudno mi Ciebie zrozumieć, szczególnie ostatnią wypowiedź.
Nie wiem czy o to chodzi, ale wsadź ładowanie obrazków do funkcji onload dla tła (po drawImage).

[olszam]

a dobra czaje, bo wcześniej tak próbowałem to wcale nie chciało mi działać i za każdym razem dawałem onload dla każdego obrazka, teraz jest git