Scaling image from the center (fabricjs)

Question

I'm trying to scale an image using the centeredScaling: true option when setting up the Image instance. I have Circle object that is a "on" a slider that is supposed to be the scale.

Here's the example: http://jsfiddle.net/hellatan/tk1qs8ty/

A couple things: 1. it doesn't scale from the center 2. the starting point of the Circle object doesn't correlate correctly scaling the image properly (i'm guessing i'll have to adjust some math for this one, though)

Anyone have any clues as to what I'm doing wrong (mainly #1, #2 would be a bonus to know too).

Don't mind the sloppiness of the code =)

Answer 1

Try setting the origin for x and y to center, and adjust the initial x and y of the image

imgInstance.set({
        scaleY: imgH / origH,
        scaleX: imgW / origW,
        originX: "center", 
        originY: "center"
    });