Как исправить это и что вообще это такое?

Question

[VegasChickiChicki]

Не могу понять из-за чего это происходит ,рисую в канвасе линию ,если это сделать статически ,просто ее нарисовать ,то она "нормальная" ,если ту же самую линию отрисовывать динамически ,как я это попытался сделать , то она какая то "дерганая/пиксельная". Не могу понять что это ,возможно это только на моем мониторе это так отображается...
Вот код :
https://codepen.io/Poporo35/pen/oJobQj
Вот скриншот с увеличением :

Answer 1

[krokodily]

Нужно очищать канвас перед перерисовкой. Сейчас каждая новая линия накладывается на предыдущую и сглаживание перестает работать правильно.

Answer 2

[grinat]

Дак canvas это тупо картинка, чтобы она была не дерганной нужен svg.
https://github.com/gliffy/canvas2svg

Comments

[VegasChickiChicki]

То есть ,мне нужно динамически превращать канвас в SVG?

[grinat]

VegasChickiChicki, ну если не хочешь чтобы были пиксели видны при увеличении, то либо в svg либо увеличивать разрешение канваса.

[VegasChickiChicki]

grinat, А как можно увеличить разрешение канваса? Что-то я не смог разобраться с тем как канвас в SVG перевести (

[grinat]

VegasChickiChicki, ну ты где вначале инициализируешь размер холста, там и увеличить, браузер тогда по идее должен применить антиалиасинг. Либо вручную его делать, добавляя по полпикселя к ширине ребра, впрочем это дрочилово того не стоит, лучше найди готовую либу.

[VegasChickiChicki]

grinat, А вы не могли бы объяснить ,как воспользоваться той библиотекой ,которую вы скинули? Просто я новичок совсем ,не могу разобраться что да как (

[grinat]

VegasChickiChicki, https://codepen.io/grinat/pen/wRPGNN у тебя там алгортим еще кривой создания линии, поэтому чистить холст все время приходится и setinterval долбит не переставая

[VegasChickiChicki]

grinat, Огромное спасибо ,действительно canvas перевелся в SVG ,но я не могу понять ,как мне исправить эту кривизну линии ,похоже дело в алгоритме линии ,не могли бы вы объяснить ,как это можно исправить ,буду очень признателен!