En el gráfico, la idea era poner una sombra solo en el círculo blanco, pero parece que el efecto de sombra se aplicó al texto, lo que no debería suceder.

Lienzo:

 <canvas class="gradient" id="canvas_gradient_chart" height="70"></canvas>

JavaScript:

 drawChartGradient(canvas, radian, height, metric) { const rect = canvas.getBoundingClientRect(); const ctx = canvas.getContext("2d"); canvas.width = rect.width; canvas.height = height; ctx.beginPath(); const centerY = canvas.height / 2; const centerX = this.positionXChart(canvas.width, metric, 20); ctx.arc(centerX, centerY, radian, 0, Math.PI * 2, false); ctx.fillStyle ="#ffffff"; ctx.filter = 'drop-shadow(2px 2px 5px rgba(0,0,0,0.6))'; ctx.fill(); ctx.font = 'bold 14pt sans-serif'; ctx.textAlign = 'center'; ctx.strokeStyle ='#ffffff' ctx.stroke(); ctx.fillStyle ="#622BCF"; // <-- Text colour here ctx.shadowBlur=0; ctx.shadowColor='transparent'; ctx.fillText(`${metric ? metric : 0}`, centerX, centerY+8); //ctx.globalCompositeOperation = 'destination-over'; ctx.globalCompositeOperation = 'source-over'; canvas.addEventListener('mousemove', (e) => { const relativeCoodinates = { x:parseInt(`${centerX}`), y:parseInt(`${centerY}`), r:radian } }); ctx.globalCompositeOperation = 'destination-over'; ctx.save(); ctx.restore(); } positionXChart(size, number, distance) { return size/(200 + distance) * (parseInt(`${number}`) + 100 + distance / 2); }

Canvas renderizaría: