how to make donut to start from top in html canvas

Question

I am making a donut chart with HTML canvas.

it has 550 different colors to display.

My question is: how to make sure that first color in array is displayed on top?

lenArr is array of 550 values. all values are "1"

rgbArr is array of 550 colors in hex codes.

var canvas = document.getElementById("chart");
var chart = canvas.getContext("2d");

function drawdountChart(canvas) {

  this.x, this.y, this.radius, this.lineWidth, this.strockStyle, this.from, this.to = null;
  this.set = function(x, y, radius, from, to, lineWidth, strockStyle) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.from = from;
    this.to = to;
    this.lineWidth = lineWidth;
    this.strockStyle = strockStyle;
  }

  this.draw = function(data) {
    canvas.beginPath();
    canvas.lineWidth = this.lineWidth;
    canvas.strokeStyle = this.strockStyle;
    canvas.arc(this.x, this.y, this.radius, this.from, this.to);
    canvas.stroke();
    var numberOfParts = data.numberOfParts;
    var parts = data.parts.pt;
    var colors = data.colors.cs;
    var df = 0;
    for (var i = 0; i < numberOfParts; i++) {
      canvas.beginPath();
      canvas.strokeStyle = colors[i];
      canvas.arc(this.x, this.y, this.radius, df, df + (Math.PI * 2) * (parts[i] / 100));
      canvas.stroke();
      df += (Math.PI * 2) * (parts[i] / 100);
    }
  }
}


var drawDount = new drawdountChart(chart);
drawDount.set(60, 60, 40, 0, Math.PI * 2, 40, "#000");
var data = {
  numberOfParts: 550,
  parts: { "pt": [20,20,20,20,20] }, //percentage of each parts 
  colors: { "cs": ["red", "blue", "yellow", "pink", "cyan"] } //color of each part
};
drawDount.draw(data);

<canvas id="chart"></canvas>

Answer 1

You are not using the from parameter in your code for drawing the color arcs...
Below I simplified your code so it fits better in the snippet, as you can see I'm using the from as the initial value var df = from; and that is where the first color starts if you want it to start on top you can use: Math.PI*1.5 in my sample below I'm drawing multiple showing different values on the from.

var canvas = document.getElementById("chart");
var chart = canvas.getContext("2d");

function drawdountChart(canvas) {
  this.draw = function(x, y, radius, from, lineWidth, data) {
    canvas.lineWidth = lineWidth;
    var parts = data.parts.pt;
    var df = from;
    for (var i = 0; i < data.numberOfParts; i++) {
      canvas.beginPath();
      canvas.strokeStyle = data.colors.cs[i];
      canvas.arc(x, y, radius, df, df + (Math.PI * 2) * (parts[i] / 100));
      canvas.stroke();
      df += (Math.PI * 2) * (parts[i] / 100);
    }
  }
}

var data = {
  numberOfParts: 550,
  parts: { "pt": [20, 20, 20, 20, 20] }, //percentage of each parts 
  colors: { "cs": ["red", "blue", "yellow", "pink", "cyan"] }
};
var drawDount = new drawdountChart(chart);
drawDount.draw( 50, 60, 25,       0     , 40, data);
drawDount.draw(140, 60, 25, Math.PI     , 40, data);
drawDount.draw(230, 60, 25, Math.PI*1.5 , 40, data);

<canvas id="chart"></canvas>