When coding in JavaScript, I prefer using Visual Studio IDE due to its JavaScript IntelliSense and debugging capabilities. But recently, when I started to experiment with canvas, I noticed something strange. As you might know, to draw and manipulate graphics on canvas element, you first need to get the canvas context. In some instances, the IntelliSense is not working on canvas context and as a result, the list of suggestions is missing all the context methods and properties you would expect. This article will show how to fix that.
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
One way to solve this problem is instead of having JavaScript in external .js file, simply add the code inside <script> of the HTML file containing the <canvas> element. Just make sure, the JavaScript code is added after canvas element.
<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.
This might be fine for some simple coding, but for anything more serious, it is not really practical. What if you want to use external JavaScript files? In this case, try the next solution.
2.) Create canvas element inside an external JavaScript file
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 document.getElementById function, we remove it from the HTML file and instead create canvas element with JavaScript in the external .js file.
So instead of having:
-
In HTML file canvas element:
<body> <canvas id="canvas"></canvas> <script src="test.js"></script> </body>
-
And getting the reference for that element in JavaScript file:
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>
-
Then in JavaScript, we create a <canvas> element and append it to <body> tag like this:
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:
Click image to enlarge
Now all that is left is to use the context. As we type ctx., the IntelliSense should recognize it as context as shown below:
Conclusion
When using Visual Studio for JavaScript coding on canvas, you might notice that IntelliSense is not working when creating a context for the canvas. In this article, we listed two ways to fix that. Either add JavaScript code inside HTML file or create a canvas element in the external JavaScript file.
Have you had any problem with Visual Studio when working with canvas or the JavaScript in general? Drop a comment and let us know.
ram
October 6, 2017I doubt it works. Give us an image which shows getContext() for ctx.
admin
October 6, 2017Thank you for your comment.
I have updated the article to show the Intellisense example when using
getContext()method.Rian Ariona
March 26, 2018This work for me, by creating canvas element within the js give me the intellisense. 😀