Moving dynamically created grouped object within contained area? (html5canvas - fabric.js)

Question

What I'm trying to create is a small canvas widget that would allow a user to dynamically create a shape onto an image and then place it above an area that caught their interest, effectively it is a highlighter. The problem is with adding a zoom function, as when I zoom onto the image I would like to ensure that; - There is no possible way for the dynamically created shape to be dragged anywhere outside the image area. (completed - ish, relies on 2nd step) - You cannot drag the image out of the page view, the canvas area cannot show white space. Part of the image must always be shown, and fill the entire canvas area. (problem) Here are two examples that I've drawn up, neither of which work correctly; First example - getBoundingRect does not update and is bound to the image Second example - getBoundingRect does update and is bound to the grouped object From the link description you can see that I think I've narrowed the problem down, or at least noticed a key difference between the scr…

Accepted Answer

I think that the grouping was messing with the position of the background image. So, I tried removing the group when the image is moving and manually updating the position of the rect instead.

It sets the last position of the image before moving

```
var lastLeft = active.left,
    lastTop = active.top;
```

And then it updates those and the position of the rect every time the image moves

```
rect.left += active.left - lastLeft;
rect.top += active.top - lastTop;
// I think this is needed so the rectangle can be re-selected
rect.setCoords();
lastLeft = active.left;
lastTop = active.top;
```

Since the image has to stay within the canvas, the rect stays inside the canvas, too, whenever the image moves. The rest of the code you wrote seemed to work fine.

http://plnkr.co/edit/6GGcUxGC7CjcyQzExMoK?p=preview

Moving dynamically created grouped object within contained area? (html5canvas - fabric.js)

Solution

Problem