CODEWITHSUNDEEP
javascriptcanvas
user7896971
user7896971

Reputation:

How do I change X-Y positions of an circle on a canvas

I'm trying out canvas for the first time. After creating a circle I want to be able to change the position of the center of this circle at the click of a button. But I am unable to figure how to do so. Can someone suggest a method for it?

#button{
height: 25px;
width:125px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
<html>
    <head></head>
    <body>
    <div id="button" onclick="changePosition()">Click here</div>
    <canvas id="testCanvas" width="500px" height="500px"></canvas>
    
    <script type="text/javascript">
    var canvas = document.getElementById("testCanvas");
	var a = canvas.getContext("2d");
        a.fillStyle = "#b22222";
	a.beginPath();
	a.arc(100,100,25,0,2*Math.PI);
	a.fill();
	
  function changePosition(){
    //what do I put here??
    
  }
    </script>
    </body>
    </html>

Upvotes: 0

Views: 1055

Answers (1)

lumio
lumio

Reputation: 7575

You need to redraw the scene. Create a function that resets the canvas and then draws the circle

var canvas = document.getElementById("testCanvas");
var ctx = canvas.getContext("2d");
var circlePos = {
  left: 100,
  top: 100,
}

function renderCircle( circlePos ) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#b22222";
  ctx.beginPath();
  ctx.arc(circlePos.left, circlePos.top, 25, 0, 2 * Math.PI);
  ctx.fill();
}

function changePosition() {
  circlePos.left += 10;
  if ( circlePos.left > canvas.width ) {
    circlePos.left = 0;
  }
  renderCircle( circlePos );
}
changePosition();
#button {
  height: 25px;
  width: 125px;
  border: 1px solid black;
  text-align: center;
  cursor: pointer;
}
<button onclick="changePosition()">Click here</button>
<canvas id="testCanvas" width="500" height="200"></canvas>

Upvotes: 1

Related Questions