Пока что ни одна из тем на плавных линиях не является правильной.

Как нарисовать гладкую кривую через N точек, используя JavaScript HTML5 Canvas?

Гладкие пользовательские линии на холсте

Оба приводят к неровным линиям. Под сглаживанием я подразумеваю использование точек x, y в качестве контрольных точек, чтобы сделать линию гладкой. Линия не должна проходить через точки. Он просто должен нарисовать плавную линию, учитывая n точек.

По сути, я записываю каждый отрезок, затем, когда пользователь подведет курсор, он сгладит линию.

Я попробовал свой собственный метод, используя bezierCurveTo, но это только сглаживает все остальные точки, а затем точки соединения все еще жесткие. Интернет, кажется, думает, что я ищу, называется кривыми B-сплайна. Я попытался применить матрицу линейной алгебры к задаче, но мне это не удалось.

Вот лучшая кривая, которую я могу получить (изображение). Красная линия - это «сглаженная» линия, поскольку вы можете видеть, что она сглаживает любую другую точку, но не непрерывную. Это использует код из

Как нарисовать гладкую кривую через N точек, используя JavaScript HTML5 Canvas?

Мой код делает то же самое

http://www.square-bracket.com/images/smoothlines.png

Спасибо за вашу помощь!