TypeError: getContext Is Not A Function In JavaScript – How To Fix It?

Posted on by Cora Lopez
TypeError: getContext is not a function in JavaScript

Sometimes the TypeError: getContext is not a function in JavaScript error will appear when you use canvas to draw shapes, lines, or add motion to images on the web interface. So in this article, we will work with you to find the cause and how to fix the error. Read on for details. 

Why does the TypeError: getContext is not a function in JavaScript occur?

This error appears when you use the getContext() function to access a variable that is not an HTML5 canvas element. See the example below to understand the error better.

Index.html:

<body>
  <main id="app">
    <canvas class="canvas" width="450" height="200"></canvas>
  </main>
  <script src="main.js"></script>
</body>

Main.js:

// The getElementsByClassName() return a HTMLCollection
let canvas = document.getElementsByClassName("canvas");
console.log(canvas); // Output: HTMLCollection
let ctx = canvas.getContext("2d"); // Error here

Error:

Uncaught TypeError: canvas.getContext is not a function.

In the above example, getElementsByClassName() does not return a canvas object but an HTMLCollection object. That’s what caused the error.

Like the getElementsByClassName(), many functions do not return one element but many elements. For example: getElementsByTagName(), querySelectorAll(), and more… We should be careful when using them to get a canvas object.

So, how to fix the error?

Using the index of array

To correct the above example, we will use index 0 to access the first element of the HTMLCollection, which is also our canvas object.

// The getElementsByClassName() return a HTMLCollection
let canvases = document.getElementsByClassName("canvas");

// Use index 0 to get the canvas object
let canvas = canvases[0];
console.log(canvas); // Output: canvas object

// Use getContext() without error
let ctx = canvas.getContext("2d");

// BELOW IS AN EXAMPLE OF FILL GRADIENT FOR THE TEXT

// Set the font
ctx.font = "60px Verdana";

// Create the gradient object
let gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);

// Draw the gradient
gradient.addColorStop("0", " #0F2027");
gradient.addColorStop("0.5", " #203A43");
gradient.addColorStop("1", "#2C5364");

// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("LearnShareIT", 20, 100);

Output:

Using getElementById()

We’ve written an article that uses the getElementById() syntax. You can read more if you want.

The best solution for this error is to use methods that only return 1 element, like getElementById(), querySelector(), and more. Here we only show how to use the getElementById() function to fix the problem. The same functions still return the same results.

Before writing JavaScript code, we must add the id attribute to the canvas tag. Like this:

<canvas id="my-canvas" class="canvas" width="450" height="200"></canvas>

In the js file, we need to use getElementById() instead of getElementsByClassName(), and that’s it.

// The getElementById() return a canvas object
let canvas = document.getElementById("my-canvas");
console.log(canvas); // Output: canvas object

// Use getContext() without error
let ctx = canvas.getContext("2d");

// BELOW IS AN EXAMPLE OF FILL GRADIENT FOR THE TEXT

// Set the font
ctx.font = "60px Verdana";

// Create the gradient object
let gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);

// Draw the gradient
gradient.addColorStop("0", " #FC466B");
gradient.addColorStop("1", "#3F5EFB");

// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("LearnShareIT", 20, 100);

Output:

Summary

In summary, the TypeError: getContext is not a function in JavaScript is a common error when using canvas. After reading this article, we hope you will not be confused when you see it again.

Have a lucky day!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *