Making the "handle" more evident

[sergionegri]

This is not an issue but a feature request.

The feedback we got from our users is that it's less than evident that they can interact with the circular knob, it seems simply a visualization widget.

A suggestion would be to add a parameter like "visible handle" which ends the line not with a round or a butt, but with a bigger circular handle. I tried to have a look at the code to understand where the rounded endline is drawn to create one with a bigger diameter but was not able to find it. Any help is much appreciated!

[sergionegri]

I figured it out. You might want to add this feature by adding these lines at the end of the drawing of the arc:

    // Added to manage handle
            c.beginPath();
            var handleX=this.xy + this.radius * Math.cos(a.e); 
            var handleY=this.xy + this.radius * Math.sin(a.e); 
            var handlelineWidth = c.lineWidth /8;
            var handleRadius = c.lineWidth /2 + handlelineWidth/2;
            var lineargradient = c.createLinearGradient(handleX, handleY - handleRadius, handleX, handleY + handleRadius);

            var grd=c.createRadialGradient(handleX-handleRadius/3,handleY-handleRadius/3,0,handleX-handleRadius,handleY-handleRadius,handleRadius*2);
            grd.addColorStop(0,this.o.bgColor);
            grd.addColorStop(1,c.strokeStyle);

            c.arc(handleX, handleY, handleRadius, 0, 2 * Math.PI, false);
            c.fillStyle = grd;//c.strokeStyle;
            c.fill();
            c.lineWidth = handlelineWidth;
            c.strokeStyle = "white";//this.o.bgColor;
            c.stroke();

    // End of added to manage handle

You can play with it here: https://jsfiddle.net/sergionegri/7pfo1u90/

I did not add any option, I draw it every time, but an option would me more elegant.