Question

I have a simple fabric.canvas element which has a background and I have set its width and height equal to that of the above image.
and then added the cap image. the problem is that the resize controls are displaced. I have made this clear in the image too.

This is how I am adding the canvas to the page

    $('#canvas_container').empty();
    canvas_el = document.createElement('canvas');
    canvas_el.id = "canvas";
    $('#canvas_container').append(canvas_el);
    canvas = new fabric.Canvas('canvas');

    var img = new Image();
    img.onload = function() {
      canvas.setWidth(this.width);
      canvas.setHeight(this.height);
      canvas.renderAll()
    }
    img.src =$(this).attr('picUrl');

    canvas.setBackgroundImage($(this).attr('picUrl'),function(){
      canvas.renderAll();
    });

And this is how I am adding the image

      fabric.Image.fromURL('img/hat.png', function(img) {
        oImg = img.set({ left: 50, top: 50, angle: 0 })
        canvas.add(oImg);
        canvas.renderAll();
      });

Answer 1

I have got the answer on twitter.

I added a canvas.calcOffset() right after changing the width and height of the canvas and also adding the image.

It worked.