How to fix a bug when I paint with a brush on sharp turns?

Question

Canvas

I have this code

And in the consequences, the question
is why to turn sour on sharp turns to carry away
And why when changing the size in can.width; and can.height;
The center of the brush goes somewhere away from the cursor
Can anyone help solve the problem?

Answer 1

here is an example for you to think about
https://codepen.io/anon/pen/vwOrKX
Because that lineJoin = "miter"'s how it works

And why when resizing in can.width; and can.height;
The center of the brush goes somewhere away from the cursor

The dimensions of the canvas are not the dimensions of the html element at all. You can put a huge canvas in a small square, it will scale.
To accurately combine a point on the canvas and the cursor, you need to transfer the mouse coordinates to the canvas coordinate system, for this you need to know the relation canvas.width/canvas.clientWidthto the example
. Therefore, it is better to set the dimensions of the canvas html element explicitly and rigidly. You don't have to recalculate the coefficients with each resize.