Converting "Arc" shape code to Fabric.js 521

163 views Asked by At

I'm trying to convert our legacy code, that uses Fabric.js 4.0.0-beta.6, to the latest version but encountered a problem I can't seem to resolve.

I'm trying to draw an arc shape which is going fine in version 4 but doesn't work in later versions.

https://jsbin.com/rigusotuto/edit?html,js,output

const canvas = new fabric.Canvas('canvas');
canvas.setWidth(document.body.clientWidth);
canvas.setHeight(document.body.clientHeight);

const angle = 100;
const radius = 100;

const arc = new fabric.Circle({
  originX: 'center',
  originY: 'center',
  radius: radius,
  fill: 'rgba(0,0,0,0.8)',
  left: 100,
  top: 100,
  clipTo: (ctx) => {
    ctx.moveTo(0, 0);
    ctx.arc(
      0,
      0,
      radius,
      (360 - angle) * (Math.PI / 180) - Math.PI / 2, 
      360 * (Math.PI / 180) - Math.PI / 2,
      false
    );
    },
});

canvas.add(arc);
0

There are 0 answers