Note. I have not tested this code myself.
Something like this may be related, at least we can detect child objects a bit.
var $canvas = {}; $canvas.activePaths = []; function onMouseDown = function (options) { var mousePos = canvas.getPointer(options.e); mousePos.x = parseInt(mousePos.x); mousePos.y = parseInt(mousePos.y); var width = canvas.getWidth(); var height = canvas.getHeight(); var pixels = canvas.getContext().getImageData(0, 0, width, height); var pixel = (mousePos.x + mousePos.y * pixels.width) * 4; var activePathsColor = new fabric['Color']('rgb(' + pixels.data[pixel] + ',' + pixels.data[pixel + 1] + ',' + pixels.data[pixel + 2] + ')'); var colorHex = '#' + activePathsColor.toHex().toLowerCase(); var activeObject = canvas.getActiveObject(); var activePath = []; if(activeObject.type == 'group') { for (var i = 0; i < activeObject.getObjects().length; i++) { var path = activeObject.getObjects()[i]; if (path.getFill().toLowerCase() == colorHex) { $canvas.activePaths.push(path); } } } } function warpActiveObject() { for(var i = 0; i < $canvas.activePaths.length; i++) { canvas.add( new fabric.Rect({ left: $canvas.getActiveObj().left + ($canvas.activePaths[i].left), top: $canvas.getActiveObj().top + ($canvas.activePaths[i].top), fill: '', width: $canvas.activePaths[0].width, height: $canvas.activePaths[0].height, stroke: 'white', opacity: 0.5 }) ); } }