function degToRad(degree) { return degree / 180 * Math.PI; };

function drawFilledSector(ctxObject, centerX, centerY, radius, startDegree, endDegree, style) {
  ctxObject.fillStyle = style;
  ctxObject.beginPath();
  ctxObject.arc(centerX, centerY, radius, degToRad(startDegree), degToRad(endDegree));
  ctxObject.lineTo(centerX, centerY);
  ctxObject.fill();
}

function draw() {
  var canvasElement = document.getElementById('main-canvas');
  if (canvasElement.getContext('2d')) {
    /* Examples of drawing pie chart - Most Popular Browser Statistics in December 2016 */
    var ctx = canvasElement.getContext('2d');
    var startRadian, endRadian;
    /* Chrome - 73.7% */
    startDegree = 270;
    endDegree   = 0.737 * 360 - 90;
    drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#56ff22')

    /* Firefox - 15.5% */
    startDegree = endDegree;
    endDegree   = (0.737 + 0.155) * 360 - 90;
    drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#4de51e')

    /* IE - 4.8% */
    startDegree = endDegree;
    endDegree   = (0.737 + 0.155 + 0.048) * 360 - 90;
    drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#44cc1b')

    /* Safari - 3.5% */
    startDegree = endDegree;
    endDegree   = (0.737 + 0.155 + 0.048 + 0.035) * 360 - 90;
    drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#3cb217')

    /* Opera - 1.1% */
    startDegree = endDegree;
    endDegree   = (0.737 + 0.155 + 0.048 + 0.035 + 0.011) * 360 - 90;
    drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#339914')

    /* Other */
    startDegree = endDegree;
    endDegree   = 270;
    drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#2b7f11');
  }
}