CODEWITHSUNDEEP
javascriptcanvasfabricjs
Justin
Justin

Reputation: 3397

How to draw arc in Fabric.js

I'm working with Fabric.js and I would like to draw arcs on canvas. The closest shape I can find is the Circle shape. This, of course, only enables me to make a circle and nothing like an arc spanning 45° or 180°.

Is there a way to accomplish this with Fabric.js? If not, is there a way I can get the underlying context and then create the arc and allow fabric to manage it? It is important that I retain the selection and scaling capabilities that Fabric.js offers.

Upvotes: 8

Views: 7079

Answers (1)

Kamil
Kamil

Reputation: 379

In latest version of FabricJS for circle were added startAngle and endAngle properties. https://github.com/kangax/fabric.js/pull/1675

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

var circle = new fabric.Circle({
    radius: 20,
    left: 100,
    top: 100,
    angle: 45,
    startAngle: 0,
    endAngle: Math.PI,
    stroke: '#000',
    strokeWidth: 3,
    fill: ''
});

Example: http://jsfiddle.net/mmeqec89/

Upvotes: 11

Related Questions