KineticJS Arc

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.js"></script>
<div id="stage-container">
  canvas goes here!
</div>

CSS

body { background-color: black; color: white; }
#stage-container { width:200px; background-color: white; }

JavaScript

var stage = new Kinetic.Stage({
  container: 'stage-container',
  width: 200,
  height: 200
});

var layer = new Kinetic.Layer();

var arc = new Kinetic.Arc({
  x: 100, y: 100,
  innerRadius: 0,
  outerRadius: 80,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 5,
  rotationDeg: -150,
  angle: 180,
  lineJoin: 'round',
  lineCap: 'round'
});

layer.add(arc);
stage.add(layer);
layer.draw();