JavaScriptでCanvasに塗り潰した長方形（矩形）を描く・色を変える方法/fillRectメソッド・fillStyleプロパティの使い方

Canvasに長方形・四角形を描く方法として、デフォルトでいくつかのメソッドが用意されています。ここではそのうち一色で塗り潰した四角を描くfillRectメソッドに言及しています。

fillRectメソッドの使い方
塗り潰しの色を変えたい

fillRectメソッドの使い方

Canvas領域の作り方のほうでも言及しましたが、改めて。

塗りつぶした四角形を描画
fillRect(x,y,w,h);
x=始点（横） y=始点（縦） w=width h=height

実際動かしてみるとわかりやすいかな、と思うので作りました。ちなみに↓にcanvas作ってますが、「代替コンテンツ」と表示されてるようならお使いのブラウザがcanvas未対応ですので、別のブラウザでお試しください。

widthまたはheightどちらかが0の場合は何も描画されません。またcanvasが小さ過ぎるとうまく動かないようです。

<！-- html -->
<canvas id="testcanvas"></canvas>

//JavaScript
function canvasClick1() {
var cvs = document.getElementById('testcanvas');
var byouga = cvs.getContext('2d');
byouga.fillRect(0, 0, 30, 30);
}

塗り潰しの色を変えたい

色を変える場合には、fillStyleプロパティを変更します。

塗り潰しの色を変更
fillstyle = “色”;
※正確にはfillStyleは色以外も変更できるが、ここでは簡易的に色のみの変更とする

//赤
//JavaScript
function canvasClickaka() {
var cvs = document.getElementById('testcanvas2');
var byouga = cvs.getContext('2d');
byouga.fillStyle = "red";
byouga.fillRect(50, 50, 70, 70);
}

fillRectおよびfillStyleについては以上です。