Drawing Application-animation loop

MDN Learn
#1
  1. Not sure I understand the below code block completely. Seeking for help. :slight_smile:

`document.onmousemove = function(e) {
curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);

curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}`

  1. Another question is I am not sure where this “85” comes from.

image
image963×213 18.6 KB

Code from Animation Loop example:
“https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html”

#2

@Laura so for your first question, this is a block of code I copied off stack overflow. Basically this is doing a feature detection test using a ternary operator. It is saying

"If window.Event exists, then set curX equal to e.pageX" (this will work in modern browsers).

"If window.Event does not exist, then set curX equal to e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)" (this is the horrible way to get the same information in older browsers).

For your second question, yes, I didn’t explain this at all. Here is some explanation (which I’ve also added to the page):

We have to draw the circle 85 pixels above where we measured it from, because the vertical measurement is taken from the top of the viewport, but we are drawing the circle relative to the top of the canvas, which starts below the 85 pixel-high toolbar. If we drew it with just curY as the y coordinate, it would appear 85 pixels lower than the mouse position.

#3

Thank you @chrisdavidmills.

For the first question, could I also use 2 lines below as part of the code for older browsers ?
document.body.parentNode.scrollLeft
document.body.parentNode.scrollTop

And could I replace all .scrollLeft and .scrollTop with .scrollX and .scrollY?

For second question, I saw height =75 px and padding =5 px, so totally 80 px. Where the rest 5 px come from? I just want to make sure I didn’t miss anything :).

image

#4

For the first question, could I also use 2 lines below as part of the code for older browsers ?

Yes, I believe so. It depends on whether parentNode in each case refers to the correct element you are interested in.

For second question, I saw height =75 px and padding =5 px, so totally 80 px. Where the rest 5 px come from?

padding: 5px adds 5px of padding at the top of the box, and the bottom (and to the left and right too, incidentally). So the total height is 75 + 5 + 5 = 85px.

1 Like