canvas chart-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas</title>
</head>
<body>
    <canvas id="mycanvas" width="500" height="500"></canvas>
    <script>
        var c = document.getElementById("mycanvas");
        var ctx = c.getContext("2d");
        var editors = ["Dreamweaver","SublimeText","Brackets","Notepad++","Atom"];
        var colors = ["#00A9DB", "#D500DB", "#0062DB", "#DBA100", "#4A4A4A"]
        var rates = [20,45,30,17,15];
        var total = 0;
        for(var i=0; i<rates.length; i++){
            total += rates[i];
        }
        var start = 0;
        var end = 0;
        for(var j=0; j<rates.length; j++){
            ctx.beginPath();
            ctx.moveTo(250,250);
            end = start + ( (rates[j]/total)*2*Math.PI );
            ctx.arc(250,250,250,start,end);
            ctx.fillStyle = colors[j];
            ctx.fill();
            var angle = start + 2*Math.PI*((rates[j]/total)/2);
            var pos = getTextPos(250,250,250/2,angle);
            ctx.fillStyle = "white";
            ctx.font = "15px Arial";
            ctx.textAlign = "center";
            ctx.fillText(editors[j],pos[0],pos[1]);
            console.log(pos[0] + "/" + pos[1]);
            start = end;
        }

        function getTextPos(x,y,r,angle){
            var tx = x + Math.cos(angle)*r;
            var ty = y + Math.sin(angle)*r;
            return [tx, ty];
        }


    </script>
</body>
</html>