[JavaScript] canvasの内容をクリアする（.clearRect）

投稿日：2017年11月9日更新日：2018年4月28日

canvasの内容をクリアするには、.clearRect()を使用します。

構文

（clearRect構文）: context.clearRect(w, y, w, h)

x	クリア開始位置のX座標
y	クリア開始位置のY座標
w	クリアする横幅
h	クリアする縦幅

サンプルソース

例）ボタンを押すとcanvasをクリアする

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
var cvs = null;
var ctx = null;

window.onload= function(){
  //2Dコンテキストのオブジェクトを生成する
  cvs = document.getElementById('cvs1');
  ctx = cvs.getContext('2d');

  //画像オブジェクトを生成
  var img = new Image();
  img.src = "inu.png";

  //画像をcanvasに設定
  img.onload = function(){
    ctx.drawImage(img, 0, 0, 200, 200);
  }
}

function cls(){
  //キャンバスの(0,0)～(200,200)の範囲をクリアする
  ctx.clearRect(0, 0, 200, 200);
}
</script>
</head>
<body>
  <canvas id="cvs1" width="200" height="200"></canvas>
  <input type="button" id="btn1" value="消す" onclick="cls();">
</body>
</html>

<!DOCTYPE html>

<head>

var cvs = null;

var ctx = null;

window.onload= function(){

//2Dコンテキストのオブジェクトを生成する

cvs = document.getElementById('cvs1');

ctx = cvs.getContext('2d');

//画像オブジェクトを生成

var img = new Image();

img.src = "inu.png";

//画像をcanvasに設定

img.onload = function(){

ctx.drawImage(img, 0, 0, 200, 200);

}

function cls(){

//キャンバスの(0,0)～(200,200)の範囲をクリアする

ctx.clearRect(0, 0, 200, 200);

}

</script>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、canvas領域に描画された画像をクリアします。

以下、枠内がcanvas領域です。

解説

クリアする範囲は明示的に指定する必要があります。
（canvas内を全てクリアするという指定はありません。）

執筆者：とら