I use fabricJs and want to get mouse position in zooming

Question

I am using fabricJs library to create rectangles and want to get mouse position after zooming

I use this code to start drawing the rectangle, in scale = 1, it works right but after i get zoom in for example and click i get the rectangle start point in the point not i click on, what cause this ?

// Create new rectangle
canvas.on('mouse:down', function (options) {
    if (canvas.getActiveObject()) {
        return false;
    }

    started = true;

    ex = (posx);
    ey = (posy);

    var colors = ['#FF8080', '#D5D5E6', '#C0F2C0', '#8080E4', '#CCCCAA'];
    var rectangle_color = colors[Math.floor(Math.random() * colors.length)];

    var square = new fabric.Rect({
        width: 0,
        height: 0,
        left: ex,
        top: ey,
        fill: rectangle_color
    });
    var square = new fabric.Rect({ width: 0, height: 0, left: ex, top: ey, fill: rectangle_color });

    canvas.add(square);
    canvas.setActiveObject(square);
});

Answer 1

You need your real coordinates of your mouse not some scope declared posx and posy:

canvas.on('mouse:down', function (event) {
    if (canvas.getActiveObject()) {
        return false;
    }
    var pointer = canvas.getPointer(event.e);
    var posx = pointer.x;
    var posy = pointer.y;
    //... 
    //your code
    //...
}