FabricJS: Adding Freehand with ClipPath to Object Group

I am working with Fabricjs and i'd like to draw inside of a circle and have the path constrained to the circle. This includes the selection area of the group.

**UPDATE: Seem to have solved the first point http://jsfiddle.net/42snph1d/14/

However, the selection is too big. Anyway to reduce it so it is the side of the circle and not the path?**

Is it possible to truncate the PATH to only include points inside the circle?

http://jsfiddle.net/42snph1d/12/

    canvas = window._canvas = new fabric.Canvas('canvas');
    canvas.backgroundColor = '#efefef';
    canvas.isDrawingMode= 1;
    canvas.freeDrawingBrush.color = "purple";
    canvas.freeDrawingBrush.width = 10;
    var circle = new fabric.Circle({ radius: 50, top: 50, left: 50, absolutePositioned:true })
    var group = new fabric.Group([circle]);
    canvas.add(group)
    canvas.renderAll();

    canvas.on("path:created", (e) => {
      var clipPath = new fabric.Circle({ radius: 50, top: 50, left: 50, absolutePositioned:true });
      var path = e.path;
      path.set({selectable:false})
      path.clipPath = clipPath;
      group.addWithUpdate(path)
    });

I am seeing weird artefacts when moving the object around.

The freehand drawing can be seen in the canvas outside of the circle when moving

The group selection is quite large, includes the entire freehand drawing (even the clipped part). I'd like the selection area to only contain the circle.

Any obvious fixes here?

Any advice?