Stroke Clipping

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.min.js"></script>
<canvas id="c" width="600" height="400" class="c"></canvas>

CSS

canvas {
  border: 1px solid grey;
}

JavaScript

var canvas = new fabric.Canvas('c');

var svgString = '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="457.125px" height="423.308px" viewBox="0 0 457.125 423.308" enable-background="new 0 0 457.125 423.308" xml:space="preserve"><path id="path" d="M120,0C53.76,0,0,53.76,0,120c0,134.755,135.933,170.087,228.563,303.308  C316.137,290.905,457.125,250.454,457.125,120c0-66.24-53.76-120-120-120c-48.048,0-89.402,28.37-108.563,69.188  C209.401,28.37,168.048,0,120,0z"/></svg>';

fabric.loadSVGFromString(svgString, function(objects, options) {
  var obj = fabric.util.groupSVGElements(objects, options);
  obj.set({
  	scaleX: 0.6,
    scaleY: 0.6,
    top: 20,
    left: 40,
    stroke: 'purple',
    fill: '#000',
    strokeWidth: 140,
    paintFirst: 'stroke',
    objectCaching: true
  })
  canvas.add(obj).renderAll();
});

 canvas.on({
    'object:selected': function() {
        pausePanning = true;
    },
    'selection:cleared': function() {
        pausePanning = false;
    },
    'touch:drag': function(e) {
    console.log('drag');
        if (pausePanning == false && undefined != e.self.x && undefined != e.self.x) {
            currentX = e.self.x;
            currentY = e.self.y;
            xChange = currentX - lastX;
            yChange = currentY - lastY;

            if( (Math.abs(currentX - lastX) <= 50) && (Math.abs(currentY - lastY) <= 50)) {
                var delta = new fabric.Point(xChange, yChange);
                canvas.relativePan(delta);
            }

            lastX = e.self.x;
            lastY = e.self.y;
        }
    }
});