Smooth line drawing in canvas?

Question

JavaScript

At the weekend, for self-development, I decided to make browser-based paint on canvas.
Here's what happened: https://antonowano.github.io/canvas-paint/
But I'm not happy with how the brush draws. Comparing with VKontakte in my version, if you sharply move the mouse, the distance between brush strokes (circles) will be noticeable.
Advise how to make brush painting smooth like on graffiti on VKontakte.
And I also noticed that with one brush stroke in VKontakte, the circles form a line, and do not lie on top of each other. This is noticeable when drawing translucent circles.
How to do something like this?
By the way: I will accept any criticism on the JS code. The application is focused on learning and getting practice. Your advice will be very helpful to me.

Answer 1

See how it's done in Gimp:
The mousemove event can have a different indentation, the main thing for you is to draw a line and place points evenly along this line .
Well, here's a reference: libcanvas.github.io/archive/5iton

Answer 2

trushka.narod.ru/sketch0 and trushka.narod.ru/sketch - I did it once.. Well, sending to the server doesn't work, because I uploaded it to the ukoz. By the way, because of this, it may not work at all the first time if it shows ads in the popup - you can see jQuery’s newer rewrites it, I wrote a long time ago, I also used bind-unbind for handlers .. In general, if you don’t want to draw (and in /sketch/ show a popup with a drawing tool) - just reload the page
In sketch0, I used multi-point bezier curves for drawing, but then finishing it, I realized that it positively affects smoothness much less than it negatively affects performance - in general, in sketch, the segment between the previous mousemove trigger point and the current one is simply filled with circles evenly. By the way, so that there is no "ladder", the circles are filled with a gradient, but the points are generated so often that only the very edge of the line is translucent - this is done for the same display in different browsers, there is an easier way - to draw straight lines between the points and add to them blur or blurry shadow. But then they are rendered differently in different browsers. To speed up the "brush" is generated once in a hidden canvas, and then inserted as a picture.
The script there is the main one - editor.js There, of course, not very much .. this is the most, but I think you can figure it out. By the way, the "history" is also provided there - after each mouseup, the current state of the canvas is saved to the image, which is added to the array. Then, when returning, the corresponding image is displayed on the canvas. In general, here is such an option)