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?
JavaScript
x
6
1
var circle = new fabric.Circle({
2
top: 300,
3
left: 300,
4
radius: 100
5
});
6
Advertisement
Answer
You can set drawing origin of the circle object to center, using originX
and originY
property.
JavaScript
1
11
11
1
var canvas = new fabric.Canvas('c');
2
3
var circle = new fabric.Circle({
4
top: 100,
5
left: 100,
6
radius: 50,
7
originX: 'center',
8
originY: 'center'
9
});
10
11
canvas.add(circle);
JavaScript
1
1
1
canvas{border:1px solid #ccc}
JavaScript
1
2
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.14/fabric.min.js"></script>
2
<canvas id="c" width="200" height="200"></canvas>