How to draw a translucent line on Canvas without overlaying color?

Question

Canvas

Hello everyone, I have a problem here.
I'm doing a small drawing and according to the assignment I need to be able to draw lines on the canvas with different levels of transparency.
Here is an example of such a drawing tool:
https://jsfiddle.net/08cw6mh7/
the problem is the following: if you draw, set the fill color, for example, rgba (50, 100, 150, 1), then everything works well because the transparency is 1. And when you move the mouse, the colors although they overlap each other, but due to the full opacity it is not noticeable. But if you start changing the transparency, for example, rgba (50, 100, 150, .25), then trash begins - the colors begin to overlap and it turns out not to be a uniformly transparent line, but it's not clear what. What can be done?

Answer 1

https://jsfiddle.net/goqzdsxu/