Плавное рисование линии в canvas?

Question

[Иван Антонов]

На выходных для саморазвития решил смастерить браузерный paint на canvas.
Вот что получилось: https://antonowano.github.io/canvas-paint/
Но меня не радует то как рисует кисть. Сравнивая с ВКонтакте в моей версии, если резко повести мышь расстояние между мазками кисти (кружками) будет заметно.
Посоветуйте как сделать рисование кистью плавным как на граффити в ВКонтакте.
И ещё я заметил, что при одном проведении кистью в ВКонтакте - кружки образуют линию, а не ложатся друг на друга. Это заметно при рисовании полупрозрачных кружков.
Как подобное сделать?

Кстати: Приму любую критику по JS-коду. Приложение ориентировано на обучение и получения практики. Ваши советы мне будут очень полезны.

Answer 1

[Павло Пономаренко]

Смотрите, как сделано в Гимпе:


Событие mousemove может иметь разный отступ, вам главное построить линию и расположить по этой линии равномерно точки.

Ну и вот как референс: libcanvas.github.io/archive/5iton

Answer 2

[trushka]

trushka.narod.ru/sketch0 и trushka.narod.ru/sketch - это когда-то делал.. Ну, отправка на сервер не работает, так как на укоз залил. Кстати, из-за этого может с первого раза не работать вообще, если покажет рекламу в попапе - там видно укоз jQuery более новым переписывает, я давно писал, ещё bind-unbind для обработчиков использовал.. В общем, если не захочет рисовать (а в /sketch/ показывать попап с рисовалкой) - просто перезагрузить страничку

В sketch0 использовал кривые безье многоточечные для рисования, но потом уже допиливая, понял, что положительно влияет на плавность это намного меньше, чем отрицательно на производительность - в общем, в sketch просто равномерно заполняется кружочками отрезок между предыдущей точкой срабатывания mousemove и текущей. Кстати, чтоб не было "лесенки", кружочки заполняются градиентом, но точки генерируются так часто, что полупрозрачной оказывается только самая кромка линии - это сделано для одинакового отображения в разных браузерах, есть более простой способ - рисовать прямые отрезки между точками и добавлять к ним размытие или размытую тень. Но тогда они по-разному отображаются в разных браузерах. Для ускорения "кисточка" генерируется один раз в скрытом canvas'e, и потом вставляется как картинка. Толщина меняется колёсиком мыши

Скрипт там основной - editor.js Там конечно не очень.. этосамое, но разобраться, я думаю, можно. Кстати, там ещё предусмотрена "история" - после каждого mouseup текущее состояние холста сохраняется в картинку, добавляющуюся в массив. Потом при возврате выводится соответствующая картинка на холст. В общем вот такой вот вариант)