TargetFindTolerance Line

by 20yco

HTML

<canvas id="c" width="500" height="500"></canvas>

JavaScript

var canvas  = new fabric.Canvas('c', {
	targetFindTolerance: 15
});

/*_____________Adding shapes_______________*/
canvas.add(new fabric.Line([50, 100, 200, 200], {
  left: 50,
  top: 50,
	stroke: 'black',
	perPixelTargetFind: true,
  strokeWidth: 5
}));

canvas.add(new fabric.Line([50, 100, 200, 100], {
  left: 50,
  top: 250,
	stroke: 'green',
	perPixelTargetFind: true,
   strokeWidth: 5
}));


canvas.add(new fabric.Line([50, 100, 50, 200], {
  left: 140,
  top: 350,
	stroke: 'green',
	perPixelTargetFind: true,
   strokeWidth: 5
}));

function fakeContainsPointFunction(point) { 
 var isTransparent = canvas.isTargetTransparent(this, point.x, point.y);
	return !isTransparent; 
}

canvas.item(1).containsPoint = fakeContainsPointFunction.bind(canvas.item(1));
canvas.item(2).containsPoint = fakeContainsPointFunction.bind(canvas.item(2));