TypeError: getContext is not a function in JavaScript

# TypeError: getContext is not a function in JavaScript

The "TypeError: getContext is not a function" error occurs when the getContext() method is called on a value that is not a canvas DOM element.

To solve the error, make sure to only call the getContext method on canvas elements.

typeerror getcontext is not a function

Here is an example of how the error occurs.

index.js

Copied!
const canvas = document.getElementsByClassName('canvas');
console.log(canvas); // 👉️ [canvas.canvas]

// ⛔️ TypeError: getContext is not a function
const ctx = canvas.getContext('2d');

We called the getContext method on a NodeList instead of a canvas element.

# Only call the `getContext` method on `canvas` elements

To solve the error, console.log the value you're calling the getContext() method on and make sure it's a canvas element.

Here is a complete working example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <canvas class="canvas" width="500" height="500"></canvas>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

move js script tag to bottom of body tag

The code for this article is available on GitHub

Notice that we placed the JS script tag at the bottom of the body tag, after all the DOM elements have been declared.

Had we placed the script tag above the code that declares the DOM elements, we wouldn't be able to access the canvas element.

Here is the related JavaScript code.

index.js

Copied!
const canvas = document.getElementsByClassName('canvas');
console.log(canvas); // 👉️ [canvas.canvas]

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

console.log(ctx); // 👉️ CanvasRenderingContext2D

calling getcontext method on canvas elements

The code for this article is available on GitHub

The getElementsByClassName method returns a NodeList and not a DOM element.

We had to access the element at index 0 to get a DOM element, on which we called the getContext method.

If the error persists, console.log the value you're calling the getContext method on and make sure it's a canvas element.

If it's a jQuery object, you have to convert it to a DOM element before calling the getContext method.

index.js

Copied!
const canvas = $('.canvas');
console.log(canvas); // 👉️ [canvas.canvas]

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

console.log(ctx); // 👉️ CanvasRenderingContext2D

If you still get the error, make sure you aren't misspelling getContext (method names are case-sensitive).

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

TypeError: getContext is not a function in JavaScript

# TypeError: getContext is not a function in JavaScript

# Only call the getContext method on canvas elements

Borislav Hadzhiev

# Only call the `getContext` method on `canvas` elements