以下のサンプル画像にあるように、文字の部分を透過して背景を透けるようにしたいです。
globalCompositeOperation
を使ってみましたが、canvasそのものに作用してしまうようで、文字部分が白く透けてしまいます。
<canvas>
タグをdisplay:none;
にしてそこで文字を描画し、後からcanvas
同士を合成するような方法しかないでしょうか?
背景画像、文字抜きの青四角ともに一つの<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>