How to remove shadow from text in circle?-CodePudding

In the graphic the idea was to put a shadow only on the white circle, but it looks like the shadow effect was applied to the text, which shouldn't happen.

Canvas:

   <canvas  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 would render:

CodePudding user response：

You have to reset the filter or the same will be applied to all elements:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter#value

See working sample:

const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")

ctx.beginPath()
ctx.arc(50, 50, 40, 0, Math.PI * 2)
ctx.fillStyle = "#ffffff"
ctx.filter = 'drop-shadow(2px 2px 5px)'
ctx.fill()

ctx.beginPath()
ctx.font = 'bold 30pt sans-serif'
ctx.textAlign = 'center'
ctx.textBaseline = "middle"
ctx.fillStyle = "#622BCF" // <-- Text colour here
ctx.filter = 'none'
ctx.fillText("80", 50, 50)

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

And the textBaseline = "middle" I think does a good job at keeping the text centered