When the IntelliSense fails to work for context variable, it gives the following message:
The provided list contains all identifiers in the file.
It was as if it was unable to detect the variable is of context type. I found two ways to fix the problem:
1.) Add code inside the internal script of the HTML file
<body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); </script> </body>
Now, the IntelliSense should not have any trouble detecting the
ctx variable as being that of a canvas context, as is demonstrated in the image below.
Luckily, there is also a way to fix IntelliSense problem for external
.js files too. Instead of getting canvas element from HTML file by using
So instead of having:
In HTML file canvas element:
<body> <canvas id="canvas"></canvas> <script src="test.js"></script> </body>
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");
We do the following:
We remove or comment out the canvas element inside <body> tag of HTML file:
<body> <!--<canvas id="canvas"></canvas>--> <script src="test.js"></script> </body>
var canvas = document.createElement('canvas'); canvas.id = "canvas"; document.body.appendChild(canvas);
Next, we get the context.
var ctx = canvas.getContext("2d");
The Visual Studio Intellisense should give us the hints about the
getContext()method as shown below:
Now all that is left is to use the context. As we type
ctx., the IntelliSense should recognize it as context as shown below: