How to get the canvas-relative position of an object that is in a group?

Normally an object’s position relative to the canvas can be gotten from it’s .left and .top attributes, but these become relative to the group if the object is in a selection/group. Is there a way to get their position relative to the canvas?

Answer

When an object is inside a group, its coordinates relative to the canvas will depend on the origin of the group (and origin of the object as well).

Lets say we have this code which has a rect and a circle added to a group.

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

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
    radius: 50,
    left: 175,
    top: 75,
    fill: '#aac'
});

var group = new fabric.Group([rect, circle],{
    originX: 'center',
    originY: 'center'
});
canvas.add(group);
canvas.renderAll();

Below are the three cases possible for centering the group:

1. Origin of group set to center(as in the code above):

   As shown in the figure below, rect.left gives us distance of left of object from center of the group. rect.group.left gives us the distance of center of group from left of canvas.

   So distance of rect from left of canvas = rect.left + rect.group.left (http://jsfiddle.net/uue3hcj6/3/)

   

2. Origin of group is set to top/left (also the default setting)

   rect.left gives us distance of left of object from center of the group. rect.group.left gives us the distance of left of group from left of canvas. Now to calculate the remaining distance, we have to add half of width of the group.

   So distance of rect from left of canvas = rect.left + rect.group.left + rect.group.width/2 (http://jsfiddle.net/uue3hcj6/6/)

   

3. Origin of group is set to bottom/right

   rect.left gives us distance of left of object from center of the group. rect.group.left gives us the distance of right of group from left of canvas. Now to calculate the total distance, we have to subtract the half of width of the group.

   So distance of rect from left of canvas = rect.left + rect.group.left – rect.group.width/2(http://jsfiddle.net/uue3hcj6/7/)

   

Note: Similar cases are possible for object as well.