Search code examples
javascriptsvgkineticjs

Kinetic JS draw a quarter arc

I am trying to draw a quarter circle using Kinetic JS. Unfortunately when I run the code below the shape drawn is actually a pie rather than an arc with two lines joining up to a centre point.

var arc = new Kinetic.Arc({
  outerRadius: 80,
  stroke: 'black',
  strokeWidth: 5,
  angle: 60,
  rotationDeg: -120,
  x:100,
  y:100,
});

Does anyone know how I can draw just an arc without the addition of these two unwanted lines?

Fiddle: http://jsfiddle.net/GarryPas/55vYU/5/

Thanks in advance.

Solution

  • Just set the innerRadius to be the same as the outerRadius:

     var arc = new Kinetic.Arc({
      innerRadius: 80,
      outerRadius: 80,
      stroke: 'black',
      strokeWidth: 5,
      angle: 90,
      rotationDeg: 0,
      x:100,
      y:100,
    });

    fiddle: http://jsfiddle.net/55vYU/6/