Как убрать тень от текста в круге?

На графике идея заключалась в том, чтобы наложить тень только на белый круг, но похоже, что эффект тени был применен к тексту, чего быть не должно.

Холст:

   <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);
      }

Холст будет отображать:

Как убрать тень от текста в круге?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны сбросить фильтр, иначе он будет применяться ко всем элементам:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter#value

См. рабочий образец:

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>

И textBaseline = "middle" я думаю, хорошо справляется с удержанием текста по центру

Я потерялся здесь, большое спасибо!

Ivan Ferrer 16.05.2022 20:32

@IvanFerrer Рад, что смог помочь... смотрите мое последнее дополнение textBaseline

Helder Sepulveda 16.05.2022 20:34

Другие вопросы по теме