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:
- TypeError: Cannot read property ‘filter’ of Undefined in JavaScript
- “TypeError: toISOString is not a function” in JavaScript
- TypeError: createPopper is not a function in Bootstrap

Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java