title: HTML5 Canvas pie chart
body: <p>I'm attempting to create a simple pie chart like shown in the graphic below:</p>
  <p><img src="https://i.stack.imgur.com/dwMB0.png" alt="enter image description here" /></p>
  <p>The chart will show the results for a quiz where a user can choose either a, b or c. They're 10 questions and the user can only choose one option per question.</p>
  <p>What I want to do is show the pie chart with each segment being a percentage of 100% by passing in the values for either a,b, or c.</p>
  <p>I have the following so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var greenOne = "#95B524";
  var greenTwo = "#AFCC4C";
  var greenThree = "#C1DD54";
  
  function CreatePieChart() {
    var chart = document.getElementById('piechart');
    var canvas = chart.getContext('2d');
    canvas.clearRect(0, 0, chart.width, chart.height);
  
    var total = 100;
  
    var a = 3;
    var b = 4;
    var c = 3;
  
    for (var i = 0; i &lt; 3; i++) {
      canvas.fillStyle = "#95B524";
      canvas.beginPath();
      canvas.strokeStyle = "#fff";
      canvas.lineWidth = 3;
      canvas.arc(100, 100, 100, 0, Math.PI * 2, true);
      canvas.closePath();
      canvas.stroke();
      canvas.fill();
    }
  }
  CreatePieChart();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="piechart" width="200" height="200"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The colors are specific to the size of the segment, so green one is used for the largest and green three for the smallest.</p>