Donut chart in canvas

HTML

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/latest/normalize.css">
<div class="stats">
    <div class="donut">
        <canvas id="serviceRating" width="100" height="100"></canvas>
        <div class="key">
            <span class="excellent"><span></span>Excellent</span>
            <span class="good"><span></span>Good</span>
        </div>
    </div>
    <div class="text">
        <h2>Our Service</h2>
        <p>In the past year, <strong>98%</strong> of our clients rated our service as <em>Excellent</em> or <em>Good</em>.</p>
    </div>
</div>
<div class="stats">
    <div class="donut">
        <canvas id="tripRating" width="100" height="100"></canvas>
        <div class="key">
            <span class="excellent"><span></span>Excellent</span>
            <span class="good"><span></span>Good</span>
        </div>
    </div>
    <div class="text">
        <h2>Our Trips</h2>
        <p>In the past year, <strong>96%</strong> of our clients rated our trips as <em>Excellent</em> or <em>Good</em>.</p>
    </div>
</div>

CSS

.stats {
    width: 300px;
    margin: 20px;
    height: 1%;
    overflow: auto;
    border: 1px solid #e0e0e0;
    background: #f0f0f0;
    padding: 20px;
}
.stats + .stats {
    margin-top: 20px;
}
.stats .donut {
    width: 100px;
    float: right;
}
.stats .donut .key {
    font-size: 10px;
    text-align: center;
    margin-top: 10px;
}
.stats .donut .key span {
    margin: 0 1px;
}
.stats .donut .key span > span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border: 1px solid black;
    border-radius: 2px;
    margin-right: 0.2em;
}
.stats .donut .key span.excellent > span {
    background-color: #326650;
}
.stats .donut .key span.good > span {
    background-color: #84a695;
}
.stats .text {
    padding-right: 20px;
    width: 180px;
    float: left;
}
.stats .text h2 {
    margin-top: 0;
}

JavaScript

function donut(element, excellent, good){
    // get the canvas element using the DOM
    var canvas = document.getElementById(element);
    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 20;
    var x = 50, y = 50;
    var clockwise = true;
    var radius = 40;
    var startOffset = -0.5 * Math.PI;
    var excellentPos = excellent / 100 * 2 * Math.PI;
    var goodPos = (excellent+good) / 100 * 2 * Math.PI;   
    var otherPos = 2 * Math.PI;
    
    // excellent
    ctx.strokeStyle = "#326650";
    ctx.beginPath();
    ctx.arc(x, y, radius, startOffset, excellentPos + startOffset, !clockwise);
    ctx.stroke();

    // good
    ctx.strokeStyle = "#84a695";
    ctx.beginPath();
    ctx.arc(x, y, radius, excellentPos + startOffset, goodPos + startOffset, !clockwise);
    ctx.stroke();

    // other
    ctx.strokeStyle = "#d0d0d0";
    ctx.beginPath();
    ctx.arc(x, y, radius, goodPos + startOffset, otherPos + startOffset, !clockwise);
    ctx.stroke();

    ctx.fillStyle = "#326650";
    ctx.font = "bold 20px Arial";
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";
    ctx.fillText(excellent + good + "%", 50, 50);

}

function drawShape(angles, colors){
  // get the canvas element using the DOM
  var canvas = document.getElementById('rating');
    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 20;
    var x = 50, y = 50;
    var startAngle = 0;
    var clockwise = true;
    var radius = 40;
    var nextStart = startAngle;
    var startOffset = -0.5 * Math.PI;
    for(var i = 0; i < angles.length; i++) {
        var percentage = angles[i] / 100;
        var radians = percentage * 2 * Math.PI;
        ctx.strokeStyle = colors[i];
        console.log(ctx.strokeStyle);
        ctx.beginPath();
        ctx.arc(x, y, radius, nextStart + startOffset, nextStart + startOffset + radians, !clockwise);
        ctx.stroke();
        nextStart =...