CODEWITHSUNDEEP
htmlcanvasfabricjs
Rob
Rob

Reputation: 11798

How to make fabric.js canvas center be 0,0?

I'm just starting with fabric.js and I wonder if there is a way to create a canvas in such a way that I can work with cartesian coordinates? For example, I want a circle that I create at (0,0) to show up in the center of my canvas that reaches from -400 to 400 on the x-axis and -400 to 400 on the y.axis, with higher values of y going up and higher values of x going right.

Is there a way to do that without translating every position by hand?

Upvotes: 1

Views: 1391

Answers (2)

luis reis
luis reis

Reputation: 559

You cannot change the origin of the canvas element without introducing visual artifacts. What you can do is pan the canvas to a virtual "0,0" position. Bear in mind that you will have to adjust both X_PAN_VALUE and Y_PAN_VALUE to your specific use case.

canvas.viewportTransform[4] = X_PAN_VALUE;
canvas.viewportTransform[5] = Y_PAN_VALUE;

Better late than never ;)

Upvotes: 1

ptCoder
ptCoder

Reputation: 2247

You can use originX and originY attributes.

var obj = canvas.getObjects();
for (var i in obj) {
    obj[i].set({
        originX: 'left',
        originY: 'top',
        left: 0,
        top: 0
    });
}
canvas.renderAll();

Check this fiddle with examples: http://jsfiddle.net/1ow02gea/51/

Upvotes: 1

Related Questions