[解決済み] HTML5のcanvasの幅と高さを取得する方法は？

質問

JavaScriptでcanvas要素の幅と高さを取得するにはどうすればよいですか？

また、私が読み続けているcanvasの"context"とは何ですか？

どのように解決するのですか？

チュートリアルを見てみるのもいいかもしれません。 MDN Canvas チュートリアル

canvas 要素の幅と高さは、要素のプロパティにアクセスすることで簡単に取得できます。例えば

var canvas = document.getElementById('mycanvas');
var width = canvas.width;
var height = canvas.height;

canvas 要素に width 属性と height 属性が存在しない場合、デフォルトの 300x150 サイズが返されます。正しい幅と高さを動的に取得するには、次のコードを使用してください。

const canvasW = canvas.getBoundingClientRect().width;
const canvasH = canvas.getBoundingClientRect().height;

あるいは、より短いオブジェクトの再構築構文を使用します。

const { width, height } = canvas.getBoundingClientRect();

は context は、キャンバスに描画できるようにするためにキャンバスから取得するオブジェクトです。このオブジェクトは context は canvas の API であり、canvas 要素に描画するためのコマンドを提供するものであると考えることができます。