JavaScript | Canvasのサイズを変更する方法

2021-07-11JavaScript Canvas 2D,JavaScript

JavaScriptでCanvasのサイズ（幅と高さ）を変更する方法を紹介しています。

Canvasのサイズを変更する

JavaScriptでCanvasのサイズを変更するサンプルコードになります。

See the Pen JavaScript Canvas background color by yochans (@yochans) on CodePen.

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

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

Canvasのサイズはwidth、heightにて変更・取得する事が可能となっています。
pxでの指定ではなく、数値のみを指定します。

let canvas = document.querySelector('#canvas');

canvas.width = 横幅;
canvas.height = 高さ;

サンプルでは背景色としてCanvasと同じサイズの四角形を描画しています。

let canvas = document.querySelector('#canvas');

//canvas size
canvas.width = 500;
canvas.height = 200;

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

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