We usually use getContext() method to manipulate a canvas element on html document, when using this method in TypeScript you may get the error “Property ‘getContext’ does not exist on type ‘HTMLElement'” , the cause of the error is that the HTMLElement object doesn’t have a getContext() method for us to use. This article will show you how to fix it using Type Assertion
Cause of the error “Property ‘getContext’ does not exist on type ‘HTMLElement'”
The cause of this error is that we access the getContext() method, which is not present in the HTMLElement object when you use the document.getElementById() method to get the canvas element on the DOM tree, it will encounter this error because this method will return the HTMLElement object.
Error Example:
// Use the document.getElementById() method to get the canvas element
const myCanvas = document.getElementById("my-canvas");
// Use the getContext() method on the HTMLElement object
const context = myCanvas.getContext("2d");Error Output:
Property 'getContext' does not exist on type 'HTMLElement'.In the above example, we are getting the my-canvas element on the DOM. We use the document.getElementById() method to get the element by referring to its id. The problem is for TypeScript, the return data type of this method is HTMLElement, then we use the getContext() method on the context object whose data type is HTMLElement, and so an error occurs because the HTMLElement object does not exist the getContext() method, which exists on the HTMLCanvasElement object
Solution for the error Property ‘getContext’ does not exist on type ‘HTMLElement’
To solve this error, we need to let TypeScript understand that we are working on the HTMLCanvasElement object and not the HTMLElement object by using a technique called Type Assertion, this way we will convert the HTMLElement to HTMLCanvasElement.
Example:
// Use Type Assertion to convert to HTMLCanvasElement
const myCanvas = document.getElementById(
"my-canvas"
) as HTMLCanvasElement | null;
// Now we can use getContext() method
const context = myCanvas?.getContext("2d");
console.log(context);Output:
CanvasRenderingContext2D {canvas: canvas#my-canvas, globalAlpha: 1, globalCompositeOperation: 'source-over', filter: 'none', imageSmoothingEnabled: true, …}In the above example, we use the keyword "as" followed by a union type consisting of HTMLCanvasElement and null type. The reason we add the null type is that maybe the html document does not have a my-canvas element and will raise an error, so we have to add null. Once converted to HTMLCanvasElement type, we can use the getContext() method on this object.
Summary
So we have solved the error “Property ‘getContext’ does not exist on type ‘HTMLElement'”, the cause of this error is that we use the getContext() method on an HTMLElement object which has no method. there. By using Type Assertion, the error was solved easily.
Carolyn Hise has three years of software development expertise. Strong familiarity with the following languages is required: Python, Typescript/Nodejs, .Net, Java, C++, and a strong foundation in Object-oriented programming (OOP).