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>
javascript html5-canvas drawing
edited Nov 22 '18 at 5:13
JP4
148514
asked Nov 22 '18 at 0:41
Khadijah MuhammadKhadijah Muhammad
174
add a comment |
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>
javascript html5-canvas drawing
edited Nov 22 '18 at 5:13
JP4
148514
asked Nov 22 '18 at 0:41
Khadijah MuhammadKhadijah Muhammad
174
add a comment |
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>
javascript html5-canvas drawing
edited Nov 22 '18 at 5:13
JP4
148514
asked Nov 22 '18 at 0:41
Khadijah MuhammadKhadijah Muhammad
174
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>
javascript html5-canvas drawing
javascript html5-canvas drawing
edited Nov 22 '18 at 5:13
JP4
148514
asked Nov 22 '18 at 0:41
Khadijah MuhammadKhadijah Muhammad
174
edited Nov 22 '18 at 5:13
JP4
148514
asked Nov 22 '18 at 0:41
Khadijah MuhammadKhadijah Muhammad
174
edited Nov 22 '18 at 5:13
JP4
148514
edited Nov 22 '18 at 5:13
JP4
148514
edited Nov 22 '18 at 5:13
JP4
148514
148514
asked Nov 22 '18 at 0:41
Khadijah MuhammadKhadijah Muhammad
174
asked Nov 22 '18 at 0:41
Khadijah MuhammadKhadijah Muhammad
174
asked Nov 22 '18 at 0:41
Khadijah MuhammadKhadijah Muhammad
174
174
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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);
answered Nov 22 '18 at 1:01
Drew ReeseDrew Reese
970211
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422396%2fhow-to-control-the-location-of-my-circle%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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);
answered Nov 22 '18 at 1:01
Drew ReeseDrew Reese
970211
add a comment |
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);
answered Nov 22 '18 at 1:01
Drew ReeseDrew Reese
970211
add a comment |
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);
answered Nov 22 '18 at 1:01
Drew ReeseDrew Reese
970211
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);
answered Nov 22 '18 at 1:01
Drew ReeseDrew Reese
970211
edited Nov 22 '18 at 1:07
answered Nov 22 '18 at 1:01
Drew ReeseDrew Reese
970211
answered Nov 22 '18 at 1:01
Drew ReeseDrew Reese
970211
answered Nov 22 '18 at 1:01
Drew ReeseDrew Reese
970211
970211
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422396%2fhow-to-control-the-location-of-my-circle%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
