Question

121

How to draw arc in Fabric.js

rated 0 times [ 122] [ 1] / answers: 1 / hits: 6444 / 10 Years ago, mon, september 22, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

agustindejonm

Add To Favorites

Follow

Total Points: 738

Total Questions: 84

Total Answers: 84

Location: Northern Ireland

Member since Mon, Nov 14, 2022

2 Years ago

agustindejonm questions

1 Discord.js how to fetch message by content

Fri, Jun 25, 21, 00:00, 3 Years ago

1 Can't acess variable outside forEach loop JavaScript

Fri, Sep 18, 20, 00:00, 4 Years ago

1 Security warning in the console of BrowserWindow (electron ^9.2.0)

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Filter array of objects based on the input passed: Javascript

Wed, Jul 15, 20, 00:00, 4 Years ago

1 how to refresh component in react js

Sat, May 16, 20, 00:00, 4 Years ago

View All

answered 10 Years ago michaelashelbieh · Accepted Answer

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/