Property 'getContext' does not exist on type 'HTMLElement'

avatar

Borislav Hadzhiev

Last updated: Mar 29, 2022

banner

Photo from Unsplash

Property 'getContext' does not exist on type 'HTMLElement' #

The error "Property 'getContext' does not exist on type 'HTMLElement'" occurs when we try to call the getContext() method on an element that has a type of HTMLElement. To solve the error, use a type assertion to type the element as HTMLCanvasElement before calling getContext.

property getcontext not exist type htmlelement

This is the index.html file for the examples in this article.

index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script src="./src/index.ts"></script> </body> </html>

And here is an example of how the error occurs in the index.ts file.

src/index.ts
// 👇️ const canvas: HTMLElement | null const canvas = document.getElementById('canvas'); // ⛔️ Property 'getContext' does not exist on type 'HTMLElement'.ts(2339) const ctx = canvas?.getContext('2d'); console.log(ctx);

The reason we got the error is that the return type of the document.getElementById method is HTMLElement | null and the getContext method doesn't exist on the HTMLElement type.

To solve the error, use a type assertion to type the element as an HTMLCanvasElement.

src/index.js
const canvas = document.getElementById('canvas') as HTMLCanvasElement | null; const ctx = canvas?.getContext('2d'); console.log(ctx); // 👉️ CanvasRenderingContext2D {...}

Type assertions are used when we have information about the type of a value that TypeScript can't know about.

We effectively tell TypeScript that the canvas variable stores anHTMLCanvasElement or a null value and not to worry about it.

We used a union type to specify that the variable could still be null, because if an HTML element with the provided id does not exist in the DOM, the getElementById() method returns a null value.

We used the optional chaining (?.) operator to get around the possibly null value in the example.

src/index.ts
const canvas = document.getElementById('canvas') as HTMLCanvasElement | null; // 👇️ optional chaining (?.) const ctx = canvas?.getContext('2d'); console.log(ctx); // 👉️ CanvasRenderingContext2D {...}

The optional chaining operator short-circuits returning undefined if the reference is equal to null or undefined.

In other words, if the canvas variable stores a null value, we won't attempt to call the getContext() method on null and get a runtime error.

Alternatively, you can use a simple if statement that serves as a type guard.

src/index.ts
const canvas = document.getElementById('canvas') as HTMLCanvasElement | null; // 👉️ canvas has type HTMLCanvasElement | null here if (canvas != null) { // 👉️ canvas has type HTMLCanvasElement here const ctx = canvas.getContext('2d'); console.log(ctx); }

We explicitly check that the canvas variable does not store a null value.

TypeScript knows that the canvas variable has a type of HTMLCanvasElement in the if block and allows us to directly call the getContext() method.

Which approach you pick to exclude null from the type before calling the getContext method is a matter of personal preference.

However, it's always a best practice to include null in the type assertion, because the getElementById method would return null if no element with the provided id was found.

Conclusion #

The error "Property 'getContext' does not exist on type 'HTMLElement'" occurs when we try to call the getContext() method on an element that has a type of HTMLElement. To solve the error, use a type assertion to type the element as HTMLCanvasElement before calling getContext.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.