Paint does not work properly

Question

http://www.asifslab.com/reveal.js-master/Why%20does%20wind%20feel%20cold.html#/4 Why does the canvas drawing not work correctly? The drawn line is far from the point pressed. However, if I use the canvas from open.js, it works fine. http://codepen.io/anon/pen/eEaKh Also, when the erase function starts, it leaves a white border outside. How to fix these problems?

Answer 1

To calculate the position of the mouse, you must subtract the position of the canvas:

Here is one way to do this (inside the event handler):

var rect = canvas.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top; 

Now your x and y will refer to the canvas.

Answer 2

just change e.pageX to e.clientX and e.pageY to e.clientY , because in your account codepen
the origin of the canvas and the top of the page are almost in one place, but not in another.

Answer 3

Here's a copy / pasta of a small part of my drawing application. Notice that I use canvas offsets in my calculations. I also have a zoom function that scales the canvas, so given 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 null if (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 });