Parsing the rendering code on canvas

Question

JavaScript

I have the following code:

var clicks = 0;
var lastClick = [0, 0];
document.getElementById('canvas').addEventListener('click', drawLine, false);
function getCursorPosition(e){
var x;
var y;

if(e.pageX != undefined && e.pageY != undefined){
x = e.pageX;
y = e.pageY;
}
//вот объясните мне это место зачем оно 
else{
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return [x, y];
//дальше я сам 
}
function drawLine(e){
ctx = this.getContext('2d');

x = getCursorPosition(e)[0] - this.offsetLeft;
y = getCursorPosition(e)[1] - this.offsetTop;
if(clicks != 1){
clicks++;
}
else{
ctx.beginPath();
ctx.moveTo(lastClick[0], lastClick[1]);
ctx.lineTo(x, y, 6);
ctx.strokeStyle = '#000';
ctx.stroke();
clicks = 0;
}
lastClick = [x, y];
};

Help me please. really needed

Answer 1

This is the place to get the coordinates relative to the canvas, not the whole document, taking into account the scroll.