【JS】Canvasで丸や四角で「消す」方法

こんにちはー。
題名のとおり、Canvas の「消す」機能で、丸などに形を変える方法を紹介します。

「消す」機能について

まずはじめに、消す方法としてのルールを書いておきます。

• 白く塗る はダメ！（背景が白でない場合があるため）
• 消した部分は透明になるようにする。

実装のポイント

context の globalCompositeOperation を、destination-out に変更すると、
fill や stroke で指定した領域を 切り取る ことができます。

また、このプロパティは、その他いろいろな値に変更できます。

サンプル：円形で消す

globalCompositeOperationを変更した状態で、arc メソッドを呼ぶことでできます。

var ctx = document.getElementById("xxx").getContext("2d");
function eraseArc() {
  ctx.globalCompositeOperation = "destination-out";
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, Math.PI*2, false);
  ctx.fill();
}

arc() の引数

arc(中心x, 中心y, 半径, 開始角度(ラジアン), 終了角度(ラジアン), どっち回りか(true→反時計回り))

応用例

See the Pen Canvas Erase By Arc by shundroid (@shundroid) on CodePen.

• チェックボックス ON：描く、OFF：消す（globalCompositeOperation で切り替えています）
• 背景色を変更で、消した部分が透明になっていることを確認できます

掲載したサンプルコードでは、ctx.arc で描画していますが、
このサンプルは mousemove で動いた時に描いているので、arc で描くと円が散らばってしまい、うまく描けません。
そのため、moveTo と、lineTo を使って描いています。

この方法については、次回ブログで書きたいと思います。

「消す」モードを戻したい

このままでは、常に stroke や fill した部分が切り取られてしまうため、
元の値に戻しておきましょう。
デフォルトの値は、source-over です。

var ctx = document.getElementById("xxx").getContext("2d");
ctx.globalCompositeOperation = "source-over";