Problema com javascript

[brandol]

Estou tentando fazer um simulador da trajetória de um canhão em javascript pelo canvas, mas não consigo arrumar a ordem qual os objetos devem aparecer na cena o código abaixo gera a cenário do fundo (uma imagem externa), o canhão sobrepondo o fundo (imagem externa), uma bolinha que seria o tiro (desenhada no canvas) e um quadrado que sera uma plataforma do canhão no futuro quando eu for arrumar seu posicionamento, mas não consigo fazer com que o quadrado sobreponha o cenário de fundo quando a função é chamada, como devo fazer?

window.onload = function(){

function start(){
    var c = document.getElementById("C");
    var ctx = c.getContext("2d");
    var img = new Image ();
    var img2 = new Image ();
    var YC = parseInt (document.form1.alturaC.value);
    var XC = parseInt (document.form2.ladoC.value);
    var YB = parseInt (document.form1.alturaC.value) +16;
    var XB = parseInt (document.form2.ladoC.value) + 34;
    
    img2.onload = function (){
        ctx.drawImage (img2,0,0);
    }
    
    img.onload = function (){
        ctx.drawImage (img, XC, YC);
        }
    img2.src = "scenario.png";
    img.src = "cannon.png";
    
    ctx.fillStyle="#CCCCCCCC";
        ctx.beginPath();
        ctx.arc(XB,YB,5,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();

        ctx.beginPath();
        ctx.rect(50, 50, 50, 50);
        ctx.fillStyle = 'brown';
        ctx.fill();
        ctx.lineWidth = 1;
        ct.strokeStyle = 'black';
        ctx.stroke();
      
}

}

Editado Setembro 19, 2012 por brandol

[Arash]

Não adiantou muito seu código, pois eu não tenho as imagens e o seu html.

Sugiro usar JsFiddle, ai agente pode ver seu html, javascript, css e o que der e vier ^^.

Assim de cabeça eu acho que é por 1 motivo só:

A imagem do cenario é mais pesado, logo ele vai carregar depois, como voce colocou para desenhar ele somente quando a pessoa iniciar a função e ainda esperar carregar a imagem.

Eu acho que ela vai carregar depois do seu canhão, logo seu canhão vai ser desenhado antes do cenario, sendo então sobreposto.

Se for esse o probrema eu sugiro 2 coisas

switch(sugestoes) {

case 0:

Carregar a imagem antes mesmo do window.onload;

Ai ele vai estar sendo pré-carregado e "talvez" pronto para usar (dependendo da conexão).

var img, img2;

img2.src = "scenario.png";

img.src = "cannon.png";

window.onload = function () {.....};

break;

case 1:

Usar uma div como plano de fundo, usando o background da div como cenario, use NO CANVAS position:absolute e z-index: "maior que a div (se voce não mexeu no da div, é 1 o valor que voce vai colocar)", e ajuste onde o canvas deve ficar, e pronto para usar, se precisar mexer no background da div tmb é facil, pois é javascript básico.

E se souber Jquery, ai que é mamão com açúcar.

break;

}