FabricJS: Highlight the objects which are only inside the selection rect - fabricjs

Question

I'm new to Fabric JS. I have draw multiple shapes and I have played around with the selection.
Fabric has the feature of selecting the objects in mouse drag, but if the selection rect touches the part of the shapes the shapes/objects will get highlighted.
But I have a concern to select only the objects which are present inside the selection rect. Kindly, help me out with the issue.
Thanks in advance and here's the fiddle https://jsfiddle.net/sabarisivakumar/rqmnacez/1/
var canvas = new fabric.Canvas('canvas1');
canvas.selectionFullyContained = false;
function drawcircle() {
var circle, isDown, origX, origY, lines;
canvas.on('mouse:down', function (o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 1,
strokeWidth: 2,
stroke: 'black',
// fill: 'White',
fill: 'rgba(0,0,0,0)',
selectable: true,
originX: 'center',
originY: 'center'
});
canvas.add(circle);
});
canvas.on('mouse:move', function (o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
circle.set({
radius: Math.abs(origX - pointer.x)
});
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
isDown = false;
circle.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function drawrec() {
var rect, isDown, origX, origY;
canvas.on('mouse:down', function (o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
var pointer = canvas.getPointer(o.e);
rect = new fabric.Rect({
left: origX,
top: origY,
originX: 'left',
originY: 'top',
width: pointer.x - origX,
height: pointer.y - origY,
angle: 0,
fill: 'rgba(0,0,0,0)',
stroke: 'black',
transparentCorners: false
});
canvas.add(rect);
});
canvas.on('mouse:move', function (o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
rect.set({
left: Math.abs(pointer.x)
});
}
if (origY > pointer.y) {
rect.set({
top: Math.abs(pointer.y)
});
}
rect.set({
width: Math.abs(origX - pointer.x)
});
rect.set({
height: Math.abs(origY - pointer.y)
});
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
isDown = false;
rect.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function drawLine() {
// canvas.on('mouse:down');
canvas.on('mouse:down', function (o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
var points = [pointer.x, pointer.y, pointer.x, pointer.y];
line = new fabric.Line(points, {
strokeWidth: 3,
fill: '#07ff11a3',
stroke: 'black',
originX: 'center',
originY: 'center'
});
canvas.add(line);
});
canvas.on('mouse:move', function (o) {
// isDown = true;
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
line.set({
x2: pointer.x,
y2: pointer.y
});
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
isDown = false;
line.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function select() {
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
// canvas.selection = true;
canvas.selection = true;
canvas.selectionFullyContained = true;
}

Answer 1

The feature you're looking for is Canvas.selectionFullyContained and indeed you do have it enabled in your fiddle.
The problem is that it was introduced in fabric.js v2.0.0, while your fiddle is using v1.6.3. Here's your original snippet with fabric.js upgraded to v3.6.2:
var canvas = new fabric.Canvas('canvas1');
canvas.selectionFullyContained = false;
function drawcircle() {
var circle, isDown, origX, origY, lines;
canvas.on('mouse:down', function(o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 1,
strokeWidth: 2,
stroke: 'black',
// fill: 'White',
fill: 'rgba(0,0,0,0)',
selectable: true,
originX: 'center',
originY: 'center'
});
canvas.add(circle);
});
canvas.on('mouse:move', function(o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
circle.set({
radius: Math.abs(origX - pointer.x)
});
canvas.renderAll();
});
canvas.on('mouse:up', function(o) {
isDown = false;
circle.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function drawrec() {
var rect, isDown, origX, origY;
canvas.on('mouse:down', function(o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
var pointer = canvas.getPointer(o.e);
rect = new fabric.Rect({
left: origX,
top: origY,
originX: 'left',
originY: 'top',
width: pointer.x - origX,
height: pointer.y - origY,
angle: 0,
fill: 'rgba(0,0,0,0)',
stroke: 'black',
transparentCorners: false
});
canvas.add(rect);
});
canvas.on('mouse:move', function(o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
rect.set({
left: Math.abs(pointer.x)
});
}
if (origY > pointer.y) {
rect.set({
top: Math.abs(pointer.y)
});
}
rect.set({
width: Math.abs(origX - pointer.x)
});
rect.set({
height: Math.abs(origY - pointer.y)
});
canvas.renderAll();
});
canvas.on('mouse:up', function(o) {
isDown = false;
rect.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function drawLine() {
// canvas.on('mouse:down');
canvas.on('mouse:down', function(o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
var points = [pointer.x, pointer.y, pointer.x, pointer.y];
line = new fabric.Line(points, {
strokeWidth: 3,
fill: '#07ff11a3',
stroke: 'black',
originX: 'center',
originY: 'center'
});
canvas.add(line);
});
canvas.on('mouse:move', function(o) {
// isDown = true;
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
line.set({
x2: pointer.x,
y2: pointer.y
});
canvas.renderAll();
});
canvas.on('mouse:up', function(o) {
isDown = false;
line.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function select() {
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
// canvas.selection = true;
canvas.selection = true;
canvas.selectionFullyContained = true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<button onclick="drawcircle()"> Circle</button>
<button onclick="drawrec()"> Rectangle</button>
<button onclick="drawLine()">Line</button>
<button onclick="select()">select</button>
<canvas id="canvas1" width="720" height="560" style="border:1px solid #ccc"></canvas>