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 });
Advertisement
Answer
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>