<canvas id="canvas1" width="300" height="300"></canvas>

body {
  background-color: #fafafa;
}

canvas {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #333;
  background-color: #eee;
}

(function(){
  var canvas1 = document.getElementById('canvas1');
  
  var datas = [
    [10, 'red'], [60, 'yellow'], [20, 'blue'], [10, 'green']
  ];
  var pieChart_opts = {
    center_x: canvas1.width/2, 
    center_y: canvas1.height/2,
    r: canvas1.width/3
  };
  pieChart(canvas1, datas, pieChart_opts);
  
  function pieChart(canvas_obj, datas, opts){
    var c = canvas_obj.getContext('2d');

    // circle
    var pos1 = 0;
    var pos2;
    
    for(var i = 0; i < datas.length; i++){
      circle(c, datas[i][0], datas[i][1], opts);
    }
    
    function circle(context, ratio, color, opts) {
      context.beginPath();
      context.moveTo(opts.center_x, opts.center_y);
      pos2 = pos1 + ratio/100 * 2 * Math.PI;
      //円
      context.arc(opts.center_x, opts.center_y, opts.r, pos1 - 0.5 * Math.PI, pos2 - 0.5 * Math.PI, false);
      context.closePath();
      context.fillStyle = color;
      context.fill();
      pos1 = pos2;
    }
  }
  
})();