javascript エラー「Uncaught TypeError: xxx.getContext is not a function」の解決方法

作成日 2023.02.07
javascript
javascript

javascriptで、エラー「Uncaught TypeError: xxx.getContext is not a function」が発生した場合の原因と解決方法を記述してます。「canvas」タグ以外に「getContext」を使用したり、指定する要素が間違っていた場合に発生します。「chrome」や「firefox」や「safari」の各ブラウザのエラーメッセージの画像もキャプチャしてます。

1. 環境
2. エラー内容
3. 原因
4. 解決方法

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 109.0.5414.120

Javascript サンプル集はこちら

エラー内容

以下の、真偽値を使用したコードで発生。

<canvas class="cvs" width="250" height="250"></canvas>

<script>

const canvas = document.getElementsByClassName('cvs');

const ctx = canvas.getContext('2d');

console.log(ctx);

</script>

エラーメッセージ

Uncaught TypeError: canvas.getContext is not a function

画像

firefox106の場合では、以下のエラーが発生します。

Uncaught ReferenceError: True is not defined

画像

safari15.5では、以下のエラーとなります。

TypeError: canvas.getContext is not a function. (In 'canvas.getContext('2d')', 'canvas.getContext' is undefined)

画像

原因

「getContext()」ではないものに対して使用するとエラーとなる。「div」タグに使用した場合なども同様のエラーとなります。

<div class="cvs" width="250" height="250"></div>

<script>

const canvas = document.getElementsByClassName('cvs');

const ctx = canvas[0].getContext('2d');
// Uncaught TypeError: canvas[0].getContext is not a function

console.log(ctx);

</script>

解決方法

この場合「getElementsByClassName」は「HTMLCollection」なので、要素のインデックス番号を指定する必要があります。

<canvas class="cvs" width="250" height="250"></canvas>

<script>

const canvas = document.getElementsByClassName('cvs');

const ctx = canvas[0].getContext('2d');

console.log(ctx);

</script>