[Solved] Can’t understand this javascript code to paint HTML canvas? [closed]

Question

Pencil is a class. In JavaScript, class constructors take the form of function MyClass()
this is used to point to the class itself, from within the constructor or member functions. Thus, this.mouseup() can be accessed from an instance (in your case) as tool.mouseup()
Because that’s the variable your class uses to keep track of the movement. If you want to replace tool, you have to replace the tool.started assignments and evaluations as well
ev._x and ev._y are just variables pointing at ev.offsetX and ev.offsetY which are standard properties of the event object
No idea what layerX is supposed to be
Since the same function is called on all the events (mousedown,mousemove,mouseup), the last function just figures out which event was triggered and calls the appropriate function within your pencil instance (tool).

Accepted Answer

Pencil is a class. In JavaScript, class constructors take the form of function MyClass()
this is used to point to the class itself, from within the constructor or member functions. Thus, this.mouseup() can be accessed from an instance (in your case) as tool.mouseup()
Because that’s the variable your class uses to keep track of the movement. If you want to replace tool, you have to replace the tool.started assignments and evaluations as well
ev._x and ev._y are just variables pointing at ev.offsetX and ev.offsetY which are standard properties of the event object
No idea what layerX is supposed to be
Since the same function is called on all the events (mousedown,mousemove,mouseup), the last function just figures out which event was triggered and calls the appropriate function within your pencil instance (tool).