CODEWITHSUNDEEP
javascripthtml5-canvasdrawing
Khadijah Muhammad
Khadijah Muhammad

Reputation: 27

How to control the location of my circle?

So, I'm using CodeAvengers to learn how to make games. It recently taught me how to use onMouseDown and a few other things like that. It showed me what attributes to use to make something appear or happen when I click down, drag the mouse, or other things like that. I managed to re-create that in a way that would work on Notepad ++, but there's a certain part that I don't really know how to do. How do I make the circle appear where I click the mouse, instead of just popping up in the corner?

Here's my code 

<!DOCTYPE html>
<html>
<body>
<canvas id = "gameCanvas" width="500" height="500" style="border:4px solid 
black"></canvas>
<script type = "text/javascript">
var myCanvas = document.getElementById("gameCanvas");
var ctx = myCanvas.getContext("2d");

window.onmousedown = function(event){
  ctx.beginPath();
  ctx.arc(100,75,50,0,2*Math.PI);
  ctx.stroke();
}
</script>
</body>
</html>

Upvotes: 1

Views: 36

Answers (1)

Drew Reese
Drew Reese

Reputation: 202836

Need to grab the event's mouse clientX and clientY coordinates and set the circle's (x,y) coordinate to them.

ctx.arc(event.clientX, event.clientY, 50, 0, 2*Math.PI);

Upvotes: 2

Related Questions