How to fix this and what is it all about?

Question

JavaScript

I can’t understand why this is happening, I draw a line in the canvas, if it is done statically, just draw it, then it is “normal”, if the same line is drawn dynamically, as I tried to do, then it is somehow “twitchy” /pixel". I can't figure out what it is, maybe it's only on my monitor that it's displayed like this...
Here is the code:
https://codepen.io/Poporo35/pen/oJobQj
Here is a screenshot with zoom:

Answer 1

You need to clear the canvas before redrawing. Now each new line is superimposed on the previous one and anti-aliasing stops working correctly.

Answer 2

Duck canvas is a stupid picture, so that it is not twitchy, svg is needed.
https://github.com/gliffy/canvas2svg