How to fix VS Code Canvas IntelliSense problem

Visual Studio and VS Code IntelliSense Canvas Context Problem

When working on JavaScript files that use HTML Canvas Context in either VS Code editor or Visual Studio IDE, we might notice that IntelliSense is not able to provide us with the AutoComplete suggestions for the "Canvas Context" type. In this post, we are going to learn two solutions to this problem.

Note: This article used VS Code 1.73 & Visual Studio 2022 on Windows System.

The canvas IntelliSense issue exists in both Visual Studio Code and Visual Studio IDE.

VS Code Canvas Intellisense problem with context variable
VS Code
Visual Studio Canvas Intellisense problem with context variable
Visual Studio
With Visual Studio, we also get a bit of additional information about IntelliSense's inability to determine what to suggest.
IntelliSense is unable to determine the accuracy of this completion item.

We can fix this problem in two ways. The solutions are the same for both VS Code and Visual Studio IDE.

Solution 1 - Help IntelliSense know the type by using JSDoc

JSDoc is a JavaScript API documentation tool that allows us to document JavaScript source code using comments. It is most commonly used to document the API of JavaScript libraries. The JSDoc comment must begin with /** and end with */ and it refers to JavaScript code that immediately follows that comment.

Inside the comments, we can use JSDoc tags that provide additional information about the code. For our purposes, we can use the @type JSDoc type to let the IntelliSense know the type of the canvas variable.

/** @type {HTMLCanvasElement} */
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

The JSDoc comment in the example above lets IntelliSense know that the canvas variable contains the HTMLCanvasElement type.

If we now try to type ctx., the IntelliSense should now be able to detect it contains the drawing context on the canvas and provide code completion for the CanvasRenderingContext2D. This is due to the "2d" ContextType argument when calling getContext("2d") method in line 3.

VS Code Canvas IntelliSense problem with context variable after the fix
VS Code
Visual Studio Canvas IntelliSense problem with context variable after the fix
Visual Studio
Note: Aside from "2d", there are three other argument values for the getContext() method.

Solution 2 - Create Canvas Element using JavaScript

Another solution that also works is instead of getting canvas element from the document.getElementById() method, we create canvas element using JavaScript document.createElement() method.

So, in HTML code, we remove or comment out the canvas element:

<body>
<!--<canvas id="canvas"></canvas>-->
...

And then, we create the <canvas> element in JavaScript and append it into the <body> element.

var canvas = document.createElement('canvas');
canvas.id = "canvas";
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

The ctx variable will be the type of CanvasRenderingContext2D and the IntelliSense should now work for both of the VS Code and Visual Studio IDE.

Conclusion

When working on JavaScript code that uses HTML5 Canvas element using Visual Studio Code or Visual Studio IDE, the IntelliSense might not work as expected when suggesting code completion for the variable holding the canvas context. In this article, we learned two ways to fix this, by either using JSDoc comments that let IntelliSense know the type of the canvas variable or by creating a canvas element directly in JavaScript.

This article was first published in September 2016 and has since then been republished and updated.

3 Comments

  1. ram
    October 6, 2017
    • admin
      October 6, 2017
    • Rian Ariona
      March 26, 2018

Write a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.