CanvasRenderingContext2D: clearRect() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CanvasRenderingContext2D.clearRect() はキャンバス 2D API のメソッドで、矩形領域のピクセルを、透明な黒に設定することで消去します。

メモ: clearRect() は、正しいパスの使用を行わないと、意図しない副作用が発生することがあることに注意してください。 clearRect() を呼び出した後、必ず新しいアイテムを描画し始める前に beginPath() を呼び出してください。

構文

clearRect(x, y, width, height)

clearRect() メソッドは、矩形領域のピクセルを透明な黒 (rgb(0 0 0 / 0%)) に設定します。矩形の左上の角は (x, y) にあり、大きさは width と height で指定されます。

引数

x: 矩形領域の始点の X 座標を指定します。
y: 矩形領域の始点の Y 座標を指定します。
width: 矩形領域の幅を指定します。
height: 矩形領域の高さを指定します。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

キャンバスの一部を消去

この例では、黄色っぽい背景の上に青い三角形を描きます。そして clearRect() メソッドでキャンバスの一部を消去しています。

HTML

html

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

JavaScript

消去する領域はの形状は矩形で、左上の角が (10, 10) になっています。幅は 120、高さは 100 です。

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

// 黄色い背景を描画
ctx.beginPath();
ctx.fillStyle = "#ff6";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 青い三角形を描画
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.lineTo(130, 130);
ctx.closePath();
ctx.fill();

// キャンバスの一部を消去
ctx.clearRect(10, 10, 120, 100);

結果

仕様書

Specification
HTML Standard # dom-context-2d-clearrect-dev

ブラウザーの互換性

BCD tables only load in the browser