CODEWITHSUNDEEP
javascriptfabricjs
Wayne Lawrence
Wayne Lawrence

Reputation: 23

How to set canvas origin to center in fabricjs?

When I draw a circle on fabricjs canvas it always appears on bottom right corner even though I set the coordinates to center. How can I make the circle draw center of the canvas?

var circle = new fabric.Circle({
         top: 300,
         left: 300,
         radius: 100
});

Upvotes: 2

Views: 5275

Answers (2)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32889

You can set drawing origin of the circle object to center, using originX and originY property.

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

var circle = new fabric.Circle({
   top: 100,
   left: 100,
   radius: 50,
   originX: 'center',
   originY: 'center'
});

canvas.add(circle);
canvas{border:1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.14/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>

Upvotes: 2

Suresh Atta
Suresh Atta

Reputation: 122026

You have centerObject().

     canvas.add(oImg)
     canvas.centerObject(circle);
     canvas.renderAll();

That sets your circle in the center of the canvas.

Upvotes: 0

Related Questions