SVG에서 자유형 그림 그리기

svg에서 드래그하면 path를 추가하고 싶습니다.

path를 베지어하고 부드럽게하고 싶습니다.

function catmullRom2bezier(pts){
    var cubics = [];
    for ( var i = 0, iLen = pts.length; i < iLen ; i++ ){
        var p = [
            pts[i - 1],
            pts[i],
            pts[i + 1],
            pts[i + 2]
        ];
        if( i === 0 ){
            p[0] = {
                x: pts[ 0 ].x,
                y: pts[ 0 ].y
            }
        }
        if( i === iLen - 2 ){
            p[3] = {
                x: pts[iLen - 2].x,
                y: pts[iLen - 2].y
            };
        }
        if ( i === iLen - 1 ) {
            p[2] = {
                x: pts[iLen - 1].x, 
                y: pts[iLen - 1].y
            };
            p[3] = {
                x: pts[iLen - 1].x, 
                y: pts[iLen - 1].y
            };
        }
      const val = 6;
        cubics.push([
            (-p[0].x + val * p[1].x + p[2].x) / val,
            (-p[0].y + val * p[1].y + p[2].y) / val,
            (p[1].x + val * p[2].x - p[3].x) / val,
            (p[1].y + val * p[2].y - p[3].y) / val,
            p[2].x,
            p[2].y
        ]);
    }
    return cubics;
}

정점을 솎아 부드럽게하고 싶다.

아티팩트