gistfile1.js

var generateArcCommand = function(size, arcWidth, destRatio) {

    var width  = size;
    var height = size; 
    var centerX = width/2;
    var centerY = height/2;
    var radius = width/2;
    
    var polarToCartesian = function(centerX, centerY, radius, angleRatio) {
        // angleRatio is 0->1, where 0 is 12 oclock
        var angleInRadians = ((angleRatio*2)-0.5) * Math.PI;
        var x = centerX + radius * Math.cos(angleInRadians);
        var y = centerY + radius * Math.sin(angleInRadians);
        return [x, y];
    }
    var arc = function(radius, rotation, large_arc_flag, sweep_flag, x, y) {
        return ["A", radius, radius, rotation, large_arc_flag, sweep_flag, x, y].join(" ");
    }

    var destRatio = destRatio % 1;

    var outsidePt = polarToCartesian(centerX, centerX, radius,          destRatio);
    var insidePt  = polarToCartesian(centerX, centerX, radius-arcWidth, destRatio);
        
    var commands = [];
    commands.push("M"+centerX+",0");

    commands.push(arc(
        radius, 
        0,                          // rotation, 0 == clockwise
        (destRatio >= 0.5 ? 1 : 0), // large arc flag
        1,                          // sweep flag
        outsidePt[0], outsidePt[1])
    );

    commands.push("L " + insidePt.join(" "));

    commands.push(arc(
        radius-arcWidth, 
        0, 
        (destRatio >= 0.5 ? 1 : 0), // large arc flag 
        0, 
        centerX, arcWidth
    ));

    commands.push("Z");    

    return commands.join("\n");

};