LoginSignup
2
0

More than 5 years have passed since last update.

CanvasのshadowOffsetはscaleに影響されない

Posted at

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で確認しました。

canvas-shadow1.png

scaleで5倍していますが影のズレは100pxです。なぜ影響されないのでしょうか。これはshadowOffsetの値にscaleの値をかけることで回避できます。

ctx.shadowOffsetY = 100 * 5;
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0