JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<div id="canvas"></div>

JavaScript

// http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
Raphael.fn.arc = function(centerX, centerY, startX, startY, endX, endY, radius1, radius2, angle) {
  var arcSVG = [radius1, radius2, angle, 0,1, endX-startX, endY-startY].join(' ');
    
  return this.path("M" + endX + " " + endY + " L " + centerX + " " + centerY + "L" + startX+' '+startY + " a " + arcSVG);
};

Raphael.fn.circularArc = function(centerX, centerY, radius, startAngle, endAngle) {
    //startAngle += 270;
    //endAngle += 270;
  var startX = centerX+radius*Math.cos(startAngle*Math.PI/180); 
  var startY = centerY+radius*Math.sin(startAngle*Math.PI/180);
  var endX = centerX+radius*Math.cos(endAngle*Math.PI/180); 
  var endY = centerY+radius*Math.sin(endAngle*Math.PI/180);
    
  return this.arc(centerX, centerY, startX, startY, endX, endY, radius, radius, 0);
};

var paper = Raphael("canvas", 500, 500);
var centerX  = 250;
var centerY = 250;
var startAngle = 0;
var endAngle = 90;
var radius = 40;

drawArcWithBorder(centerX, centerY, radius, startAngle, endAngle)


function drawArcWithBorder(centerX, centerY, radius, startAngle, endAngle){
    startAngle += 270;
    endAngle += 270;
    
    var startX = centerX+radius*Math.cos(startAngle*Math.PI/180); 
    var startY = centerY+radius*Math.sin(startAngle*Math.PI/180);
    var endX = centerX+radius*Math.cos(endAngle*Math.PI/180); 
    var endY = centerY+radius*Math.sin(endAngle*Math.PI/180);

    var cap = paper.circularArc(centerX, centerY, radius, startAngle, endAngle);
    cap.attr("fill", "#000000");
}