[JavaScript] Canvas 글자에 그림자 효과

---

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

Canvas 이용해서 열심히 동적 썸네일을 그리고 있는데 .. 텍스트에 그림자 효과를 넣어달라고 하더라.

뭐 당연하게 그냥 기존에 작성해뒀던 코드를 재활용했다.

context.shadowColor = "rgba(0, 0, 0, 0.5)"; // 50% 투명도의 검은색 그림자
context.shadowBlur = 10; // 흐림의 정도
context.shadowOffsetX = 5; // 그림자의 x 방향 오프셋
context.shadowOffsetY = 5;
context.fillText(text, textX, textY);

오 .. 근데 그림자를 넣었더니 전체 텍스트에 그림자 효과가 생겨버렸다 ㅋㅋ

순서가 문제였을까 싶어서 순서를 조정해줬는데도 바뀌는게 하나도 없었다.. 그래서 열심히 크롤링을 하고 찾아보니

context.shadowColor, context.shadowBlur 및 기타 관련 속성들이 전역적으로 작용하기 때문에 발생한다.
이러한 그림자 속성들을 설정하면, 그 이후의 모든 드로잉 연산에 영향을 준다.

키야 .. 역시 사람은 뭘 쓰기전에 내가 뭘 쓰고있는지를 잘 알아봐야하는데 .. 나는 그럴 시간이 없어서

필요한 정보를 찾아보면서 개발했더니 문제가 발생한것 같다 ㅎ

지금이라도 열심히 찾아보면서 개발하니까 다행인가 싶기도하고 .. 미리 다 알고있는 사람들이 부럽기도 하고 ..

아무튼 이 문제를 해결해주려면 그림자를 넣고 바로 그 다음에 해제 시켜주면된다.

context.shadowColor = "rgba(0, 0, 0, 0)";
context.shadowBlur = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;

전체코드를 보면

context.fillStyle = "#ffffff";
context.font = "700 51px Arial";

context.shadowColor = "rgba(0, 0, 0, 0.5)";
context.shadowBlur = 10;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;

await document.fonts.ready;
context.fillText(text, textX, textY);

context.shadowColor = "rgba(0, 0, 0, 0)";
context.shadowBlur = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;

이런느낌으로 fillText 로 넣어주고 바로 그림자를 해제해주고 이어서 필요한 부분을 그려주면된다.