[extensão do dreamweaver]

Eu tentei achar no internet alguma extensão de HTML5 do dreamweaver CS5, mas não achei nem uma gratis <_< Alguém pode me passar um link?

[Problema com javascript]

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();
      
}

}

[animação com Java e HTML5]

obrigado pela resposta e desculpe pela falta de atenção nesse ponto :blush: :blush: , eu e emus amigos estamos tão acostumados a nos referirmos a javascript só como java que acaba dando nisso

[animação com Java e HTML5]

obrigado pela resposta e desculpe pela falta de atenção nesse ponto :blush: :blush: , eu e emus amigos estamos tão acostumados a nos referirmos a javascript só como java que acaba dando nisso

[animação com Java e HTML5]

tenho quefazer um canhão, que atire e sua bala descreva uma trajetória seguindo uma função, até esse ponto sem nem um problema, mas tenho que fazer somente utilizando HTML5 e JavaScript, depois de terminar de escrever o código, a trajetória não fica como uma animação, mas alguns pontos ficam marcados no canvas, fui pesquisar como fazer animações em Java e acabei me pedendo no código :mellow: alguém pode me explicar esse código e me dizer como faço o objeto do código seguir uma função.

<script>
      window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
      })();

      function animate(lastTime, myRectangle) {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // update
        var date = new Date();
        var time = date.getTime();
        var timeDiff = time - lastTime;
        var linearSpeed = 100;
        // pixels / second
        var linearDistEachFrame = linearSpeed * timeDiff / 1000;
        var currentX = myRectangle.x;
        if(currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
          var newX = currentX + linearDistEachFrame;
          myRectangle.x = newX;
        }
        lastTime = time;

        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);

        // draw
        context.beginPath();
        context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);

        context.fillStyle = "#8ED6FF";
        context.fill();
        context.lineWidth = myRectangle.borderWidth;
        context.strokeStyle = "black";
        context.stroke();

        // request new frame
        requestAnimFrame(function() {
          animate(lastTime, myRectangle);
        });
      }

      window.onload = function() {
        var myRectangle = {
          x: 0,
          y: 50,
          width: 100,
          height: 50,
          borderWidth: 5
        };

        var date = new Date();
        var time = date.getTime();
        animate(time, myRectangle);
      };

    </script>