Las coordenadas en el canvas tienen el origen de los ejes X,Y en la esquina superior izquierda.
Así pues si trabajáis con ecuaciones paramétricas de trayectorias físicas, debéis tener presente que el eje Y está invertido; las coordenadas del suelo corresponden a la altura del canvas, es decir, el "height" que hayáis indicado. Y una velocidad en el eje Y, que hace que un objeto se desplace hacia arriba en la pantalla, debe indicarse como velocidad negativa, en vez de positiva.
Os adjunto un pequeño código en el que se pintan dos círculos, el círculo azul en las coordenadas del canvas (10, 10) y el círculo naranja en las coordenadas (190, 50):
<html>
<head><title>Coordenadas en el canvas</title></head>
<body>
<canvas id="c" width="200" height="60" style="border:1px solid #000000"></canvas>
<script languaje="JavaScript">
var canvas, ctx;
function drawBall(x,y,r,color){
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
function init(){
canvas = document.getElementById("c");
ctx = canvas.getContext("2d");
drawBall( 10, 10 , 8,"#007eff");
drawBall( 190, 50 , 8,"#dd521c");
}
window.onload = init;
</script>
</body>
</html>
Un saludo a todos!
