Canvas의 shadowOffset은 스케일에 영향을받지 않습니다.

Canvas의 shadowOffsetX/Y가 scale에 영향을 받지 않는 경우에 빠졌습니다. 똑같이 빠지는 사람이 아닌 것을 바라며 기사로 둡니다.
ctx.scale(5, 5);

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowOffsetY = 100;

ctx.fillStyle = "#222";
ctx.fillRect(50, 50, 100, 100);

이것을 1000x1000의 Canvas에서 실행하면 다음과 같습니다. Chrome과 Firefox에서 확인했습니다.



스케일로 5배 하고 있습니다만 그림자의 어긋남은 100px입니다. 왜 영향을 받지 않는가? 이것은 shadowOffset 값에 scale 값을 곱하여 피할 수 있습니다.
ctx.shadowOffsetY = 100 * 5;

좋은 웹페이지 즐겨찾기