[JavaScript] canvasに四角形を描画する（strokeRect、fillRect）

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

canvasに四角形を描画するには、strokeRect、fillRectを使用します。

サンプルソース

例）canvasに四角形を描画する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
window.onload=function(){
  //コンテキストを生成
  var cvs = document.getElementById("cvs1");
  var ctx = cvs.getContext("2d");

  //色を指定
  ctx.strokeStyle="blue";  //線の色を青に指定
  ctx.fillStyle="red";     //塗りつぶしの色を赤に指定

  //四角形（輪郭）
  ctx.strokeRect(10, 10, 100, 100);

  //四角形（塗りつぶし）
  ctx.fillRect(150, 10, 100, 100);
}
</script>
</head>
<body>
  <canvas id="cvs1" width="300" height="150"></canvas>
</body>
</html>

<!DOCTYPE html>

<head>

window.onload=function(){

//コンテキストを生成

var cvs = document.getElementById("cvs1");

var ctx = cvs.getContext("2d");

//色を指定

ctx.strokeStyle="blue"; //線の色を青に指定

ctx.fillStyle="red"; //塗りつぶしの色を赤に指定

//四角形（輪郭）

ctx.strokeRect(10, 10, 100, 100);

//四角形（塗りつぶし）

ctx.fillRect(150, 10, 100, 100);

}

</script>

</head>

<body>

</body>

</html>

実行サンプル

上記サンプルの実行結果です。

構文

strokeRectとfillRectの構文です。

（strokeRect構文）: strokeRect(開始x座標, 開始y座標, 描画幅, 描画高さ)

（fillRect構文）: fillRect(開始x座標, 開始y座標, 描画幅, 描画高さ)

解説

枠のみの四角形を描画したい場合は、strokeRectを使用します。
塗りつぶした四角形を描画したい場合は、fillRectを使用します。

執筆者：とら