Skip to main content

How to Resolve "TypeError: getContext is not a function" Error in JavaScript

The TypeError: getContext is not a function is a specific error that occurs when you try to call the .getContext('2d') method on a value that is not a single <canvas> DOM element. This almost always happens for one of two reasons: the variable holds null because the element wasn't found, or it holds a collection of elements instead of just one.

This guide will walk you through the common causes of this error and show you the correct, modern solutions for each scenario.

The Core Problem: .getContext() is a <canvas> Element Method​

The .getContext() method is a function that exists exclusively on individual <canvas> element objects. It is used to get the rendering context for drawing (e.g., '2d' for the 2D canvas API). It does not exist on plain objects, strings, null, or collections of elements. When you try to call it on any of these non-canvas types, JavaScript throws a TypeError.

Cause 1 (Most Common): The Variable is null (Element Not Found)​

This happens when your JavaScript code runs before the <canvas> element it's trying to select has been created by the browser, or when there is a typo in your selector. If a selector like getElementById() or querySelector() doesn't find a matching element, it returns null.

Problem: Your <script> tag is in the <head> of your HTML, but the <canvas> is in the <body>.

<head>
  <script src="index.js"></script> <!-- Runs too early! -->
</head>
<body>
  <canvas id="my-canvas"></canvas>
</body>
// index.js
// `canvas` will be `null` because the element hasn't been parsed yet.
let canvas = document.getElementById('my-canvas');

// ⛔️ TypeError: Cannot read properties of null (reading 'getContext')
let ctx = canvas.getContext('2d');

Solution: ensure your script runs only after the DOM is ready. There are two standard ways to do this:

1. Move the <script> Tag (Simple Solution): Move your <script> tag to the very end of the <body>.

<body>
  <canvas id="my-canvas"></canvas>
  <!-- ✅ Correct: Script runs after the DOM is ready. -->
  <script src="index.js"></script>
</body>

2. Use the DOMContentLoaded Event (Robust Solution): Wrap your code in an event listener that waits for the DOM to be fully loaded.

document.addEventListener('DOMContentLoaded', () => {
  // ✅ Correct: This code is guaranteed to run only after the DOM is ready.
  let canvas = document.getElementById('my-canvas');
  let ctx = canvas.getContext('2d');
});

Cause 2: The Variable is a Collection (e.g., from querySelectorAll)​

Methods like querySelectorAll() or getElementsByClassName() return a collection of elements (a NodeList or HTMLCollection), not a single element. These collection objects do not have a .getContext() method.

Example of problem:

// Problem: `canvases` is a NodeList, not a single element.
let canvases = document.querySelectorAll('.my-canvas-class');

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

Solution: you must first get a reference to the single, specific canvas element you want to work with from the collection.

1. Use querySelector() Instead (Recommended): If you only expect one canvas, use querySelector() instead of querySelectorAll(). It returns the first matching element.

// ✅ Correct: `querySelector` returns a single element.
let canvas = document.querySelector('.my-canvas-class');
let ctx = canvas.getContext('2d');

2. Access an Element by Index: If you intentionally selected a collection, you must access an individual element from it using its index.

let canvases = document.getElementsByClassName('my-canvas-class');

// ✅ Correct: Access the first element in the collection.
let firstCanvas = canvases[0];
let ctx = firstCanvas.getContext('2d');

A Note on jQuery​

If you are using the jQuery library ($), the selector $('.my-canvas') returns a jQuery object, not a raw DOM element. jQuery objects do not have a .getContext() method. You must access the underlying DOM element first.

// Get the raw DOM element from the jQuery object using index `[0]` or `.get(0)`.
let canvas = $('.my-canvas')[0];
let ctx = canvas.getContext('2d');

Practical Example: A Robust Canvas Setup​

This example combines the best practices to safely initialize a canvas context, guarding against both common errors.

HTML:

<body>
  <canvas id="main-canvas" width="500" height="300"></canvas>
  <script src="app.js"></script>
</body>

JavaScript (app.js):

document.addEventListener('DOMContentLoaded', () => {
  let canvas = document.getElementById('main-canvas');
  
  // Guard against a null element (in case of a typo in the ID)
  if (canvas && typeof canvas.getContext === 'function') {
    let ctx = canvas.getContext('2d');
    
    // Now you can safely draw on the context
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 150, 100);
  } else {
    console.error('Failed to find the canvas element.');
  }
});

Conclusion​

The TypeError: getContext is not a function is a clear signal that the variable you are working with is not the individual <canvas> element you think it is.

To solve it, follow this diagnostic process:

  1. Is your variable null? If so, your script is likely running before the DOM element exists. Move your <script> tag to the end of the <body> or wrap your code in a DOMContentLoaded listener.
  2. Is your variable a collection? If you used querySelectorAll or getElementsByClassName, you must select a single element from the collection (e.g., with [0]) or use querySelector instead.
  3. Are you using jQuery? If your variable is a jQuery object, you must access the raw DOM element first with [0] or .get(0).

Table of Contents