JavaScript | Canvasの背景色を描画する方法
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);