Edit in JSFiddle

//Configuracoes
var dashboard = document.getElementById('grafico_pizza');
var docHeight = document.documentElement.clientHeight - 20; // - 20 jsFiddle hack
var docWidth = document.documentElement.clientWidth - 20;
dashboard.height = docHeight;
dashboard.width = docWidth;
var ctx;
// objeto para ser preenchido do tipo Grafico de Pie(Pizza)
var grafico = {
    espessura: 20,
    corLinha:'#fff',
    cores: ['#616161','#D70060','#98C73D','#F18D05','#61AE24','#00A9E0'],
    gap: 5,
    dataProvider: [],
    init: function () {
        var total = 0;
        var anguloAntigo =0;
        for(var i=0;i<this.dataProvider.length;i++)
        {
            total +=this.dataProvider[i];
        }
        ctx = dashboard.getContext('2d');
        
        for(var i=0;i<this.dataProvider.length;i++)
        {
           var proporcao = this.dataProvider[i]/total;
           var  fatia = 2 * Math.PI * proporcao;
            ctx.beginPath(); 
            var  angulo = anguloAntigo+fatia;
            ctx.fillStyle= this.cores[i];
            ctx.arc(docWidth/2,docHeight/2,docWidth/4,anguloAntigo,angulo);
            ctx.lineTo(docWidth/2,docHeight/2);
            ctx.lineWidth = this.gap;
            ctx.strokeStyle = this.corLinha;
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            anguloAntigo += fatia;
        }
    }
}

function coresAleatorias()
{
    return "#" + Math.random().toString(16).slice(2, 8);
}
grafico.dataProvider = [15,60,25,45,80,20];
grafico.columnHeight = 20; // seta largura da coluna
grafico.init(); // inicializa<canvas width="100" height="100" id="grafico_area"></canvas>

canvas {
    background:#f3f3f3;
    overflow:scroll !important;
    transform: translate3d(0, 0, 0);
}

<canvas width="100" height="100" id="grafico_pizza"></canvas>