How to draw an arc in Fabric.js

I am working with Fabric.js and I would like to draw arcs on the canvas. The closest shape I can find is shape Circle

. This of course only allows me to make a circle and nothing like an arc spanning 45 ° or 180 °.

Is there a way to do this using Fabric.js? If not, is there a way to get the underlying context and then create an arc and let the fabric manipulate it? It's important to keep the choice and scalability offered by Fabric.js.

+3


source to share


1 answer


In the latest version of FabricJS, circle properties have been added startAngle

and endAngle

. 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/

+5


source







All Articles