HTMLキャンバス clearRect() メソッド

定義と使用方法

clearRect() 指定された矩形内の指定されたピクセルをクリアする方法。

指定された矩形内をクリアする:

ブラウザはHTML5キャンバスタグをサポートしていません。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

実際に試してみる

文法

context.clearRect(x,y,width,height);

パラメータの値

パラメータ 説明
x クリアする矩形の左上角的 x 座標
y クリアする矩形の左上角的 y 座標
width クリアする矩形の幅(ピクセル単位)
height クリアする矩形の高さ(ピクセル単位)

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注記:Internet Explorer 8 以前のバージョンでは <canvas> 要素をサポートしていません。