CODEWITHSUNDEEP
fabricjs
Abdullah Ahamed
Abdullah Ahamed

Reputation: 63

Fabricjs canvas objects not rendering properly

I need help with fabricjs, objects are not rendering properly while I clone and shrink to another canvas.

If I do only with text object there is not problem kindly look the below fiddle (after save) enter code hereFIDDLE

If I load an image then the objects not aligning properly. enter code hereFIDDLE

Kindly help to resolve form this.

Thank You.

Upvotes: 0

Views: 3161

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14741

Your problem for the image not respecting the zoom is that the image loads asyncronously. So you load from json, you do the zoom logic, some microseconds later the image finish loading and sets its own width and height.

Other than this you have to use zoom the right way.

Everyone is scaling manually and changing left and top using division or multiply with scale factor.

The good way is using

canvas.setZoom(scale);

This will save a lot of headaches to you.

  $(function () {
    scale = 0.5;
    canvas1 = new fabric.Canvas('c1');
    canvas1.setDimensions({
        "width": canvas.getWidth() * scale,
        "height": canvas.getHeight() * scale
    })
    var json = localStorage.getItem('save');
    canvas1.loadFromJSON(json, function () {
        canvas1.renderAll();
    });
    canvas1.setZoom(scale);
    canvas1.renderAll();
  });

chek updated fiddle https://jsfiddle.net/asturur/Lep9w01L/11/

Upvotes: 4

Related Questions