javascript - Labels inside canvas pie charts -

i making pie chart canvas unable put labels canvas. tried many things... can me?

html

<canvas id="can" width="200" height="200" /> 

js

var d1 = 15; var d2 = 15; var d3 = 45; var d4 = 25; var canvas = document.getelementbyid("can"); var ctx = canvas.getcontext("2d"); var lastend = 0; var data = [d1,d2,d3,d4]; // if add more data values make sure add more colors var mytotal = 0; // automatically calculated don't touch var mycolor = ["#ecd078","#d95b43","#c02942","#542437"]; var labels = ["25%","25%","25%","25%"];  (var e = 0; e < data.length; e++) {   mytotal += data[e];   ctx.font = 'bold 15pt calibri';   ctx.filltext(labels[e],15,15); }  (var = 0; < data.length; i++) {   ctx.fillstyle = mycolor[i];   ctx.beginpath();   ctx.moveto(canvas.width / 2, canvas.height / 2);   // arc parameters: x, y, radius, startingangle (radians), endingangle (radians), anticlockwise (boolean)   ctx.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (math.pi * 2 * (data[i] / mytotal)), false);   ctx.lineto(canvas.width / 2, canvas.height / 2);   ctx.fill();   lastend += math.pi * 2 * (data[i] / mytotal); } 

my intention put labels[] number in order, inside pie chart.

if not late, may try this: https://jsfiddle.net/rradik/kuqdwuyd/

<canvas id="canvas" width="200" height="200" />   var canvas;         var ctx;         var lastend = 0;         var piecolor = ["#ecd078","#d95b43","#c02942","#542437","#53777a"];     var piedata = [10,30,20,60,40];         var pietotal = 10 + 30 + 20 + 60 + 40; // done manually demo          canvas = document.getelementbyid("canvas");         ctx = canvas.getcontext("2d");          ctx.clearrect(0, 0, canvas.width, canvas.height);          var hwidth = ctx.canvas.width/2;         var hheight = ctx.canvas.height/2;           (var = 0; < piedata.length; i++) {                 ctx.fillstyle = piecolor[i];                 ctx.beginpath();                 ctx.moveto(hwidth,hheight);                 ctx.arc(hwidth,hheight,hheight,lastend,lastend+                   (math.pi*2*(piedata[i]/pietotal)),false);                   ctx.lineto(hwidth,hheight);                 ctx.fill();                  //labels on pie slices (fully transparent circle within outer pie circle, middle of pie slice)                 //ctx.fillstyle = "rgba(255, 255, 255, 0.5)"; //uncomment debugging     //          ctx.beginpath();     //          ctx.moveto(hwidth,hheight);     //          ctx.arc(hwidth,hheight,hheight/1.25,lastend,lastend+     //            (math.pi*(piedata[i]/pietotal)),false);  //uncomment debugging                   var radius = hheight/1.5; //use suitable radius                 var endangle = lastend + (math.pi*(piedata[i]/pietotal));                 var setx = hwidth + math.cos(endangle) * radius;                 var sety = hheight + math.sin(endangle) * radius;                 ctx.fillstyle = "#ffffff";                 ctx.font = '14px calibri';                 ctx.filltext(piedata[i],setx,sety);      //          ctx.lineto(hwidth,hheight);                 //ctx.fill(); //uncomment debugging                  lastend += math.pi*2*(piedata[i]/pietotal);     }    

may not perfect , efficient one, job nevertheless