JavaScript | Canvasの背景色を描画する方法

JavaScript Canvas 2D,JavaScript

JavaScriptでCanvasで背景色を描画する方法を紹介しています。

Canvasの背景色を描画する

JavaScriptでCanvasの背景色を描画するサンプルコードになります。

See the Pen JavaScript Canvas draw text positions by yochans (@yochans) on CodePen.

HTMLはcanvas要素にid=canvasを指定しています。

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

Canvasは背景色を指定するオプションはありません。

Canvasに背景色を付ける場合は、Canvasのサイズと同じサイズの四角形を最初に描画する事で実装可能となっています。

サンプルでは、Canvasの縦、横のサイズと同じサイズの黒色の四角形を左上(0, 0)を基準に配置しています。

CanvasのサイズはCanvas、heightにて取得する事が可能です。

let canvas = document.querySelector('#canvas');
let context = canvas.getContext('2d');

//background color
context.beginPath();
context.fillStyle = 'rgb( 0, 0, 0)';
context.fillRect(0, 0, canvas.width, canvas.height);