CODEWITHSUNDEEP
javascripthtmlcanvas
user10326981
user10326981

Reputation:

In Canvas via JavaScript, How can I get the coordinates of an object and then move that object to a different coordinate?

I am trying to move the circle by pressing the "up" "down" "left" "right", and "reset" is to bring the circle back in the center. Below is what I have so far. As I am new to this, any feedback on improving my code will be greatly appreciated. 

<!DOCTYPE>
<html lang="en">
<meta charset="UTF-8">
<body>
<button id="reset">Reset</button></br>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid#000000;"></canvas></br>
<button id="left">Left</button>
<button id="up">Up</button>
<button id="down">Down</button>
<button id="right">Right</button>
  <script>
    window.onload = function myCircle() {
    let c = document.getElementById("myCanvas");
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
    }
    function up() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,30,40,0,2*Math.PI);
    ctx.stroke();
    }
    function down() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,-30,40,0,2*Math.PI);
    ctx.stroke();
    }    
    function left() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(85,50,40,0,2*Math.PI);
    ctx.stroke();
    }
    function right() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(105,50,40,0,2*Math.PI);
    ctx.stroke();
    }
    function reset() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(85,30,40,0,2*Math.PI);
    ctx.stroke();
    }
    document.getElementById("reset").onclick = reset;
    document.getElementById("up").onclick = up;
    document.getElementById("down").onclick = down;
    document.getElementById("left").onclick = left;
    document.getElementById("right").onclick = right;
    </script>
  </body>
 </html>

I should also mention that I have tried using the ctx.clearRect method and that didn't work as well. My end goal is trying to use Canvas/JavaScript to move the circle from the original coordinate to a new coordinate via the buttons.

Upvotes: 0

Views: 56

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

You can achieve this with the following code:

let c, ctx, pos, centre = { x: 95, y: 50 }

window.onload = function(){
  c = document.getElementById("myCanvas");
  ctx = c.getContext("2d");
  reset();
}

function draw(){
  clear();
  ctx.beginPath();
  ctx.arc(centre.x + pos.left, centre.y + pos.top, 40, 0, 2*Math.PI);
  ctx.stroke();
}

function clear(){
  ctx.clearRect(0, 0, 200,100);
}

function reset() {
  pos = { left: 0, top: 0 }
  draw();
}

function up() {
  pos.top-= 20; // Here you adjust the amount to move
  draw();
}

function down() {
  pos.top+= 20; // Here you adjust the amount to move
  draw();
}

function left() {  
  pos.left-= 20;
  draw();
}

function right() {
  pos.left+= 20;
  draw();
}

document.getElementById("reset").onclick = reset;
document.getElementById("up").onclick = up;
document.getElementById("down").onclick = down;
document.getElementById("left").onclick = left;
document.getElementById("right").onclick = right;
<!DOCTYPE>
<html lang="en">
<meta charset="UTF-8">

<body>
  <button id="reset">Reset</button><br>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas><br>
  <button id="left">Left</button>
  <button id="up">Up</button>
  <button id="down">Down</button>
  <button id="right">Right</button>
</body>

</html>

Upvotes: 0

Related Questions