How to fix IntelliSense canvas context problem in Visual Studio

Last updated: October 6, 2017
Visual Studio IntelliSense Canvas Context Detection Problem - thumbnail

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:

IntelliSense was unable to determine an accurate completion list for this expression.
The provided list contains all identifiers in the file.
Visual Studio IntelliSense Canvas Context Detection Problem

Visual Studio IntelliSense Canvas Context Detection Problem

It was as if it was unable to detect the variable is of context type. I found two ways to fix the problem:

Note: Visual Studio 2015 Community Edition was used for this article.

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.

    <canvas id="canvas"></canvas>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

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.

Visual Studio IntelliSense Canvas Context Detection Problem - Solution 1

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:

    <canvas id="canvas"></canvas>
    <script src="test.js"></script>
  • And getting the reference for that element in JavaScript file:

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

We do the following:

  1. We remove or comment out the canvas element inside <body> tag of HTML file:

    <!--<canvas id="canvas"></canvas>-->
    <script src="test.js"></script>
  2. Then in JavaScript, we create a <canvas> element and append it to <body> tag like this:

    var canvas = document.createElement('canvas'); = "canvas";
  3. 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:
    Visual Studio JavaScript Canvas getcontext Intellisense example

Now all that is left is to use the context. As we type ctx., the IntelliSense should recognize it as context as shown below:

Visual Studio IntelliSense Canvas Context Detection Problem - Solution 2


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.

Share this page


Add a Comment

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

Back to Top