CODEWITHSUNDEEP
javascripthtmlcanvas
user10326981
user10326981

Reputation:

In Canvas via JavaScript, How Can I move an object to a different coordinate?

I have here A simple "game" with controls, and the reset button to reset the image drawn (smiley face) back to the center. I have tried this code with this an empty circle and I was able to move it around via the buttons without any problems. I proceeded to decorate the circle and now I am not able to move my drawn image. Any feedback or solution would be appreciated.

<!DOCTYPE>
<html lang="en">
<meta charset="UTF-8">
<body>
<button id="reset">Reset</button></br>
<canvas id="myCanvas" width="250" height="250" 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>
    let c, ctx, pos, centre = { x: 95, y: 50 }
    window.onload = function drawSmile(){
      let c = document.getElementById("myCanvas");
      let ctx = c.getContext("2d");
      let centerX = c.width / 2;
      let centerY = c.height / 2;
      let radius = 70;
      let eyeRadius = 10;
      let eyeXOffset = 25;
      let eyeYOffset = 20;

      // draw the yellow circle
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = 'yellow';
      ctx.fill();
      ctx.lineWidth = 5;
      ctx.strokeStyle = 'black';
      ctx.stroke();

      // draw the eyes
      ctx.beginPath();
      var eyeX = centerX - eyeXOffset;
      var eyeY = centerY - eyeXOffset;
      ctx.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
      var eyeX = centerX + eyeXOffset;
      ctx.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
      ctx.fillStyle = 'black';
      ctx.fill();

      // draw the mouth
      ctx.beginPath();
      ctx.arc(centerX, centerY, 50, 0, Math.PI, false);
      ctx.stroke();
      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, 2000, 1000);
    } 

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

    function up() {
    ctx.clearRect(0, 0, 2000, 1000);
      pos.top-= 20;
      draw();
    }

    function down() {
      pos.top+= 20;
      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;
</script>
</body>
</html>

Upvotes: 0

Views: 63

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

Do check the below code. It is similar to the last drawing of empty circle, I have just included the correct position calculations, and included closePath() method at appropriate places.

let c
, ctx
, pos
, centerX
, centerY
, radius
, eyeRadius
, eyeXOffset
, eyeYOffset

window.onload = function() {
  c = document.getElementById("myCanvas");
  ctx = c.getContext("2d");
  centerX = c.width / 2;
  centerY = c.height / 2;
  
  radius = 70;
  eyeRadius = 10;
  eyeXOffset = 25;
  eyeYOffset = 20;
  
  reset();
}

function drawFace(){
  // Draw the yellow circle
  ctx.beginPath();
  ctx.arc(centerX + pos.left, centerY + pos.top, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'yellow';
  ctx.fill();
  ctx.lineWidth = 5;
  ctx.strokeStyle = 'black';
  ctx.stroke();
  ctx.closePath();
}

function drawEyes(){
  // Draw the eyes
  var eyeX = centerX + pos.left - eyeXOffset;
  var eyeY = centerY + pos.top - eyeYOffset;
  ctx.beginPath();
  ctx.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'black';
  ctx.fill();
  ctx.closePath();
  
  ctx.beginPath();
  eyeX = centerX + pos.left + eyeXOffset;
  ctx.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'black';
  ctx.fill();
  ctx.closePath();
}

function drawMouth(){
  // Draw the mouth
  ctx.beginPath();
  ctx.arc(centerX + pos.left, centerY + pos.top, 50, 0, Math.PI, false);
  ctx.stroke();
  ctx.closePath();
}

function draw() {
  clear();
  drawFace();
  drawEyes();
  drawMouth();
}

function clear() {
  ctx.clearRect(0, 0, c.width, c.height);
}

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

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

function down() {
  pos.top += 20;
  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="250" height="250" 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