Draw in a canvas explanationCommonly accepted best practices around code organization in JavaScriptWhy do you need to invoke an anonymous function on the same line?Explain the encapsulated anonymous function syntaxStoring Objects in HTML5 localStorageHow to clear the canvas for redrawingHow to decide when to use Node.js?JavaScript code explanation (events + canvas) [sigma.js]How can I view the source code for a function?Is it possible to apply CSS to half of a character?Fetch: POST json data
Female=gender counterpart?
What is the term when two people sing in harmony, but they aren't singing the same notes?
No idea how to draw this using tikz
Pronouncing Homer as in modern Greek
Superhero words!
Proving by induction of n. Is this correct until this point?
Why isn't KTEX's runway designation 10/28 instead of 9/27?
Lifted its hind leg on or lifted its hind leg towards?
What will be the benefits of Brexit?
Can the harmonic series explain the origin of the major scale?
Would it be legal for a US State to ban exports of a natural resource?
Does "Dominei" mean something?
Can somebody explain Brexit in a few child-proof sentences?
Reply ‘no position’ while the job posting is still there (‘HiWi’ position in Germany)
Science Fiction story where a man invents a machine that can help him watch history unfold
Calculating the number of days between 2 dates in Excel
Is there enough fresh water in the world to eradicate the drinking water crisis?
Can a Gentile theist be saved?
What if somebody invests in my application?
How can I raise concerns with a new DM about XP splitting?
Can the electrostatic force be infinite in magnitude?
Is a naturally all "male" species possible?
Simple recursive Sudoku solver
Stereotypical names
Draw in a canvas explanation
Commonly accepted best practices around code organization in JavaScriptWhy do you need to invoke an anonymous function on the same line?Explain the encapsulated anonymous function syntaxStoring Objects in HTML5 localStorageHow to clear the canvas for redrawingHow to decide when to use Node.js?JavaScript code explanation (events + canvas) [sigma.js]How can I view the source code for a function?Is it possible to apply CSS to half of a character?Fetch: POST json data
I want to draw in a canvas, i saw an example but i don't understand this : x:event.clientX - rect.left,
in this part of the code :
getMousePos : function(event)
rect = this.canvas.getBoundingClientRect();
return
x:event.clientX - rect.left,
y:event.clientY - rect.top
;
,
What does mean the - ? Sorry it's a beginner question :D
javascript function
edited Mar 8 at 9:53
Kaiido
44.7k467108
asked Mar 8 at 8:21
Nostromos _Nostromos _
1
add a comment |
I want to draw in a canvas, i saw an example but i don't understand this : x:event.clientX - rect.left,
in this part of the code :
getMousePos : function(event)
rect = this.canvas.getBoundingClientRect();
return
x:event.clientX - rect.left,
y:event.clientY - rect.top
;
,
What does mean the - ? Sorry it's a beginner question :D
javascript function
edited Mar 8 at 9:53
Kaiido
44.7k467108
asked Mar 8 at 8:21
Nostromos _Nostromos _
1
I would recomand reading Jhon's Reisig's getBoundingClientRect is Awesome
– enxaneta
Mar 8 at 8:29
2
Do you mean you're fluently reading object structures and understanding how event handlers work, but you don't know the subtraction operator ..? This has to be a troll!
– Teemu
Mar 8 at 8:46
VTC as won't help future readers, there is no way someone who doesn't understand the-sign will be able to fall on this Q/A.
– Kaiido
Mar 8 at 9:54
add a comment |
I want to draw in a canvas, i saw an example but i don't understand this : x:event.clientX - rect.left,
in this part of the code :
getMousePos : function(event)
rect = this.canvas.getBoundingClientRect();
return
x:event.clientX - rect.left,
y:event.clientY - rect.top
;
,
What does mean the - ? Sorry it's a beginner question :D
javascript function
edited Mar 8 at 9:53
Kaiido
44.7k467108
asked Mar 8 at 8:21
Nostromos _Nostromos _
1
I want to draw in a canvas, i saw an example but i don't understand this : x:event.clientX - rect.left,
in this part of the code :
getMousePos : function(event)
rect = this.canvas.getBoundingClientRect();
return
x:event.clientX - rect.left,
y:event.clientY - rect.top
;
,
What does mean the - ? Sorry it's a beginner question :D
javascript function
javascript function
edited Mar 8 at 9:53
Kaiido
44.7k467108
asked Mar 8 at 8:21
Nostromos _Nostromos _
1
edited Mar 8 at 9:53
Kaiido
44.7k467108
asked Mar 8 at 8:21
Nostromos _Nostromos _
1
edited Mar 8 at 9:53
Kaiido
44.7k467108
edited Mar 8 at 9:53
Kaiido
44.7k467108
edited Mar 8 at 9:53
Kaiido
44.7k467108
44.7k467108
asked Mar 8 at 8:21
Nostromos _Nostromos _
1
asked Mar 8 at 8:21
Nostromos _Nostromos _
1
asked Mar 8 at 8:21
Nostromos _Nostromos _
1
1
I would recomand reading Jhon's Reisig's getBoundingClientRect is Awesome
– enxaneta
Mar 8 at 8:29
2
Do you mean you're fluently reading object structures and understanding how event handlers work, but you don't know the subtraction operator ..? This has to be a troll!
– Teemu
Mar 8 at 8:46
VTC as won't help future readers, there is no way someone who doesn't understand the-sign will be able to fall on this Q/A.
– Kaiido
Mar 8 at 9:54
add a comment |
I would recomand reading Jhon's Reisig's getBoundingClientRect is Awesome
– enxaneta
Mar 8 at 8:29
2
Do you mean you're fluently reading object structures and understanding how event handlers work, but you don't know the subtraction operator ..? This has to be a troll!
– Teemu
Mar 8 at 8:46
VTC as won't help future readers, there is no way someone who doesn't understand the-sign will be able to fall on this Q/A.
– Kaiido
Mar 8 at 9:54
I would recomand reading Jhon's Reisig's getBoundingClientRect is Awesome
– enxaneta
Mar 8 at 8:29
I would recomand reading Jhon's Reisig's getBoundingClientRect is Awesome
– enxaneta
Mar 8 at 8:29
2
2
Do you mean you're fluently reading object structures and understanding how event handlers work, but you don't know the subtraction operator ..? This has to be a troll!
– Teemu
Mar 8 at 8:46
Do you mean you're fluently reading object structures and understanding how event handlers work, but you don't know the subtraction operator ..? This has to be a troll!
– Teemu
Mar 8 at 8:46
VTC as won't help future readers, there is no way someone who doesn't understand the
- sign will be able to fall on this Q/A.– Kaiido
Mar 8 at 9:54
VTC as won't help future readers, there is no way someone who doesn't understand the
- sign will be able to fall on this Q/A.– Kaiido
Mar 8 at 9:54
add a comment |
2 Answers
2
active
oldest
votes
It is a subtraction, as simple as 5 - 3 = 2
The reason of this subtraction is that the properties clientX and clientY represent the coordinates X and Y of the event inside the whole document.
The variable rect contains the position of your canvas inside the document, so event.clientX - rect.left gives you the horizontal position, in pixel, relative to the canvas in which you are trying to draw.
answered Mar 8 at 8:27
DanieleAlessandraDanieleAlessandra
649612
add a comment |
It's a simple subtraction sign, just a mathematical operation between two coordinates:
event.clientX - rect.left
answered Mar 8 at 8:29
IsabellaIsabella
7119
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%2f55059221%2fdraw-in-a-canvas-explanation%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
It is a subtraction, as simple as 5 - 3 = 2
The reason of this subtraction is that the properties clientX and clientY represent the coordinates X and Y of the event inside the whole document.
The variable rect contains the position of your canvas inside the document, so event.clientX - rect.left gives you the horizontal position, in pixel, relative to the canvas in which you are trying to draw.
answered Mar 8 at 8:27
DanieleAlessandraDanieleAlessandra
649612
add a comment |
It is a subtraction, as simple as 5 - 3 = 2
The reason of this subtraction is that the properties clientX and clientY represent the coordinates X and Y of the event inside the whole document.
The variable rect contains the position of your canvas inside the document, so event.clientX - rect.left gives you the horizontal position, in pixel, relative to the canvas in which you are trying to draw.
answered Mar 8 at 8:27
DanieleAlessandraDanieleAlessandra
649612
add a comment |
It is a subtraction, as simple as 5 - 3 = 2
The reason of this subtraction is that the properties clientX and clientY represent the coordinates X and Y of the event inside the whole document.
The variable rect contains the position of your canvas inside the document, so event.clientX - rect.left gives you the horizontal position, in pixel, relative to the canvas in which you are trying to draw.
answered Mar 8 at 8:27
DanieleAlessandraDanieleAlessandra
649612
It is a subtraction, as simple as 5 - 3 = 2
The reason of this subtraction is that the properties clientX and clientY represent the coordinates X and Y of the event inside the whole document.
The variable rect contains the position of your canvas inside the document, so event.clientX - rect.left gives you the horizontal position, in pixel, relative to the canvas in which you are trying to draw.
answered Mar 8 at 8:27
DanieleAlessandraDanieleAlessandra
649612
answered Mar 8 at 8:27
DanieleAlessandraDanieleAlessandra
649612
answered Mar 8 at 8:27
DanieleAlessandraDanieleAlessandra
649612
answered Mar 8 at 8:27
DanieleAlessandraDanieleAlessandra
649612
649612
add a comment |
add a comment |
It's a simple subtraction sign, just a mathematical operation between two coordinates:
event.clientX - rect.left
answered Mar 8 at 8:29
IsabellaIsabella
7119
add a comment |
It's a simple subtraction sign, just a mathematical operation between two coordinates:
event.clientX - rect.left
answered Mar 8 at 8:29
IsabellaIsabella
7119
add a comment |
It's a simple subtraction sign, just a mathematical operation between two coordinates:
event.clientX - rect.left
answered Mar 8 at 8:29
IsabellaIsabella
7119
It's a simple subtraction sign, just a mathematical operation between two coordinates:
event.clientX - rect.left
answered Mar 8 at 8:29
IsabellaIsabella
7119
answered Mar 8 at 8:29
IsabellaIsabella
7119
answered Mar 8 at 8:29
IsabellaIsabella
7119
answered Mar 8 at 8:29
IsabellaIsabella
7119
7119
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%2f55059221%2fdraw-in-a-canvas-explanation%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
I would recomand reading Jhon's Reisig's getBoundingClientRect is Awesome
– enxaneta
Mar 8 at 8:29
2
Do you mean you're fluently reading object structures and understanding how event handlers work, but you don't know the subtraction operator ..? This has to be a troll!
– Teemu
Mar 8 at 8:46
VTC as won't help future readers, there is no way someone who doesn't understand the
-sign will be able to fall on this Q/A.– Kaiido
Mar 8 at 9:54