Scaling a path object causes images clippath to display improperly hollow path objects appear solid fill. use the grips in the demo code for example.
var canvas = window._canvas = new fabric.Canvas('c');
var obj = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\
c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\
0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\
c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\
-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\
12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\
-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z');
obj.set({
stroke: 'black',
strokeWidth:12,
fill: '',
left: 50,
top: 50,
opacity: 0.01,
scaleX: 1.75,
scaleY: 1.75,
absolutePositioned: true,});
canvas.add(obj);
fabric.Image.fromURL('https://images.freeimages.com/images/large-previews/8de/missing-link-1519399.jpg',
function(clipabble_image) {
clipabble_image.scale(canvas.width / clipabble_image.width).set({selectable:false});
clipabble_image.clipPath = obj;
canvas.add(clipabble_image);
});
canvas.setActiveObject(obj);
canvas.renderAll();canvas {
border: 1px solid #999;
}<script src="https://cdn.jsdelivr.net/npm/fabric@5.2.1/dist/fabric.min.js"></script>
<canvas id="c" width="600" height="350"></canvas>