I have the following which doesn't work correctly:

var canvas = new fabric.Canvas('canvas');





canvas.observe('mouse:down', function(e) { mousedown(e); });

canvas.observe('mouse:move', function(e) { mousemove(e); });

canvas.observe('mouse:up', function(e) { mouseup(e); });





var started = false;





var x = 0;

var y = 0;





/* Mousedown */

function mousedown(e) {



    var mouse = canvas.getPointer(e.memo.e);



    started = true;



    x = mouse.x;

    y = mouse.y;    



    var square = new fabric.Rect({ 



        width: 1, 

        height: 1, 

        left: mouse.x, 

        top: mouse.y, 

        fill: '#000'



    });





    canvas.add(square); 

    canvas.renderAll();

    canvas.setActiveObject(square); 



}





/* Mousemove */

function mousemove(e) {



    if(!started) {



        return false;



    }



    var mouse = canvas.getPointer(e.memo.e);



    var x = Math.min(mouse.x,  x),

    y = Math.min(mouse.y,  y),

    w = Math.abs(mouse.x - x),

    h = Math.abs(mouse.y - y);



    if (!w || !h) {



        return false;



    }



    var square = canvas.getActiveObject(); 



    square.set('top', y).set('left', x).set('width', w).set('height', h);



    canvas.renderAll(); 



}





/* Mouseup */

function mouseup(e) {



    if(started) {



        started = false;    



    }   



 }

The above logic is from a simple rectangle drawing system I used without fabric.js so I know it works, just not with fabric.js.

It seems the maths is off or I'm setting the incorrect params with the width/height/x/y values, as when you draw the rectangle does not follow the cursor correctly.

Any help is much appreciated, thanks in advance :)