How to draw translucent lines on Canvas with blurry edges?

Question

Canvas

Hello! Recently I wrote a question about the canvas, I thought that right now I’ll get an answer, and then somehow I’ll figure it out before drinking, and then it’s been the second day and nothing happens. In general, I need to make sure that I draw a line on the canvas without paying attention to its transparency. But besides that, I want to add the ability to make the edges blurry (i.e. a gradient from color to transparency) jdevelop.info/images/articles-2013/line-02.png (line only) (any curve)
At this stage I have the https code ://jsfiddle.net/nwzn0uc7/
it draws a line using .quadraticCurveTo - this gives a very good effect. But I don't know how to apply it in order to make a gradient on the edges of the line. I turned it around and did something like thishttps://jsfiddle.net/nwzn0uc7/1/. But here I have 2 problems:
1) The color does not fall evenly (i.e. the color still overlaps each other)
2) This method clogs up memory very quickly (if you keep the cursor pressed for more than 5 seconds, everything hangs)
I don’t expect you tell me how to decide) But I would like to at least understand through what and how to achieve the desired effect with minimal memory consumption.
A couple more points:
I found a useful site. Here I saw a lot of interesting things. But there those with blurry edges suggest that the core will not be transparent. Plus, it’s good to make code with one tool, of course, but I’m trying to make it somewhat universal in order to think about how to connect additional tools in the future. There are simply a huge number of these brushes for drawing.

Answer 1

https://github.com/disjukr/croquis.js - изучайте