Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 213
Justin Avatar asked Sep 22 '14 17:09

Justin


1 Answers

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/

like image 57
Kamil Avatar answered Sep 16 '22 15:09

Kamil