1

以下のサンプル画像にあるように、文字の部分を透過して背景を透けるようにしたいです。
globalCompositeOperationを使ってみましたが、canvasそのものに作用してしまうようで、文字部分が白く透けてしまいます。

[図] こうしたい
画像の説明をここに入力

[図」こうなってしまう
画像の説明をここに入力

<canvas>タグをdisplay:none;にしてそこで文字を描画し、後からcanvas同士を合成するような方法しかないでしょうか?

1 件の回答 1

2

背景画像、文字抜きの青四角ともに一つの<canvas>に描く必要があって、文字抜きの青四角を事前に準備できないのなら、2つ <canvas> が必要になりそうです。1つは OffscreenCanvas でよいですが。

もし、背景画像は CSS の background-image で描画してもいいなら1つの <canvas> でできると思います。

const context = c.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(10, 100, 280, 100);

context.globalCompositeOperation = 'destination-out';
context.fillStyle = 'black';
context.font = '80px sans-serif';
context.fillText('あ', 120, 180);
#c {
  background-image: url(https://placehold.jp/60/703e56/ffffff/300x300.png);
}
<canvas id="c" width=300 height=300>
</canvas>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。