Paint Canvas Not Working Properly

http://www.asifslab.com/reveal.js-master/Why%20does%20wind%20feel%20cold.html#/4 Why doesn't the drawing canvas work properly? The line drawn is away from the point clicked. Howeve

Solution 1:

just change e.pageX to e.clientX and e.pageY to e.clientY because in your codepen account canvas origin and page origin is almost at same place but in other it is not.

Solution 2:

Here's a copy/pasta of a small part of my paint app. Notice I'm using offsets of the canvas in my calculations. I also have a zoom function that scales the canvas, so taking into account that I added it to the calculation of the mouse cursor.

$('canvas').mousemove(function(e) {
    // x and y are globals, x inits to null, mousedown sets x, mouseup returns x to nullif (x==null) return;
    x = (100/$('#zoom').val())*(e.pageX - $(this).offset().left);
    y = (100/$('#zoom').val())*(e.pageY - $(this).offset().top);

    $('#debug').html(x+', '+y); // constantly update (x,y) position in a fixed div during debugging
});