How to make canvas shape circle?

Question

Hello I want to know how can I make the canvas shape circle in the below code. The code is about moving a object with keyboard keys. I tried to make the circle out of this box but it just disappeared and i am not really sharp. Can some help me make this canvas circle without affecting code.

sorry but i have to write something more because SO says body has all code... i don't know what to say now (make the canvas circle)(make the canvas circle)(make the canvas circle)

<!DOCTYPE html>
<html>
<head></head>
<body>
  <canvas id="myCanvas" width='800' height='800' border-radius= ></canvas>
</body>
</html>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

let circle = new Path2D();  // <<< Declaration
circle.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightblue';
context.fill(circle); //   <<< pass circle to context

context.lineWidth = 10;
context.strokeStyle = '#000066';
context.stroke(circle); 




(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

//event listener
window.addEventListener("keydown", onKeyDown, false);
window.addEventListener("keyup", onKeyUp, false);

function onKeyDown(event) {
  var keyCode = event.keyCode;
  switch (keyCode) {
    case 68: //d
      keyD = true;
      break;
    case 83: //s
      keyS = true;
      break;
    case 65: //a
      keyA = true;
      break;
    case 87: //w
      keyW = true;
      break;
  }
}

function onKeyUp(event) {
  var keyCode = event.keyCode;

  switch (keyCode) {
    case 68: //d
      keyD = false;
      break;
    case 83: //s
      keyS = false;
      break;
    case 65: //a
      keyA = false;
      break;
    case 87: //w
      keyW = false;
      break;
  }
}

//neccessary variables
var tickX = 10;
var tickY = 10;

var keyW = false;
var keyA = false;
var keyS = false;
var keyD = false;

//main animation function
function drawStuff() {
  window.requestAnimationFrame(drawStuff);
  var canvas = document.getElementById("myCanvas");
  var c = canvas.getContext("2d");

  c.clearRect(0, 0, 800, 800);
  c.fillStyle = "lightblue";
  c.fillRect(tickX, tickY, 100, 100);

  if (keyD == true) {
    tickX += 1;
  }
  if (keyS == true) {
    tickY += 1;
  }
  if (keyA == true) {
    tickX--;
  }
  if (keyW == true) {
    tickY--;
  }
}
window.requestAnimationFrame(drawStuff);
</script>

Answer 1

I moved the circle code into the drawstuff function as that is where it has to run, and removed the use of fillRect .

You can see the result here:

 (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; })(); //event listener window.addEventListener("keydown", onKeyDown, false); window.addEventListener("keyup", onKeyUp, false); function onKeyDown(event) { var keyCode = event.keyCode; switch (keyCode) { case 68: //d keyD = true; break; case 83: //s keyS = true; break; case 65: //a keyA = true; break; case 87: //w keyW = true; break; } } function onKeyUp(event) { var keyCode = event.keyCode; switch (keyCode) { case 68: //d keyD = false; break; case 83: //s keyS = false; break; case 65: //a keyA = false; break; case 87: //w keyW = false; break; } } //neccessary variables var tickX = 10; var tickY = 10; var keyW = false; var keyA = false; var keyS = false; var keyD = false; //main animation function function drawStuff() { window.requestAnimationFrame(drawStuff); var canvas = document.getElementById("myCanvas"); var c = canvas.getContext("2d"); c.clearRect(0, 0, 200, 200); let circle = new Path2D(); // <<< Declaration circle.arc(100 + tickX, 100 + tickY, 70, 0, 2 * Math.PI, false); c.fillStyle = 'purple'; c.fill(circle); // <<< pass circle to context c.lineWidth = 10; c.strokeStyle = '#000066'; c.stroke(circle); if (keyD == true) { tickX += 1; } if (keyS == true) { tickY += 1; } if (keyA == true) { tickX--; } if (keyW == true) { tickY--; } } window.requestAnimationFrame(drawStuff);

 Focus this area, then use keys <b>d, s, a, w</b><br /> <canvas id="myCanvas" width='200' height='200' style="border: 1px solid #f4f4f4" ></canvas>

How to make canvas shape circle?

Question

1 answers

solution1
0 ACCPTED 2021-01-05 11:07:45

How to make canvas shape circle?

Question

1 answers

solution1 0 ACCPTED 2021-01-05 11:07:45

solution1
0 ACCPTED 2021-01-05 11:07:45