JavaScriptのCanvas APIのclearRect()メソッドで、指定領域を消去する方法を解説します。

目次 [ close ]
  1. 下準備
  2. clearRect()で指定領域を消去

下準備

まずは下準備から。htmlの<body></body>内に以下のcanvas要素を配置します。

<canvas id="canvas"></canvas>

jsにてキャンバスの背景を水色に塗りつぶします。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'skyblue';
ctx.fillRect(0, 0, canvas.width, canvas.height);
背景を塗りつぶし

canvas.width、canvas.heightで幅と高さにキャンバスのサイズを指定しています。

clearRect()で指定領域を消去

jsに以下のコードを追加すると一部が消去されます。

ctx.clearRect(0, 0, 100, 100);
背景の一部を消去

clearRect(x, y, width, height)もfillRect()と同様の引数を取ります。2つの違いは、fillRect()では指定範囲を指定色で塗りつぶすのに対し、clearRect()では指定範囲を透過することです。

キャンバスは初期状態で全体が透過されているため、その状態に戻したい場合が多々あります。そういう場合は以下のように全体を消去することで初期状態に戻すことができます。

ctx.clearRect(0, 0, canvas.width, canvas.height);