Abstract form

Canvas Intellisense in Visual Studio

Posted in Coding, Internet, JavaScript by Homam Hosseini on February 18, 2010

I was playing with HTML5 Canvas element to see how it could be useful in future web based game developments. I like that it is easier than GDI. I haven’t yet done much performance testing but it is definitely faster than making games by animating DOM elements.

Recently I had some free time so I decided to create vsdoc documention for Canvas element interface for Visual Studio. I added intellisense (auto competition) and some helps and tips.

Download canvas-vsdoc.js and canvas-utils.js from CodePlex.

It is tuned to work with VS2010, but we can make it work with VS2008 too.

canvas-vsdoc.js contains the intellisense documentation.

canvas-utils.js has a few utility functions (like detecting if the browser supports Canvas) and some enumeration types for things like Line Joins, Repeations, Text Aligns, etc.

To use the intellisense you need to reference canvas-vsdoc.js in the beginning of your JavaScript file, like this:

/// <reference path=”canvas-vsdoc.js” />

Note you can just drop the .js file and Visual Studio will write the reference.

Then use a utility method to get a reference to canvas element:

var canvas = Canvas.vsGet(document.getElementById("canvas1"));

Canvas.vsGet(element) receives a HTML element and returns the given element itself if it is in runtime. But in design time it returns Canvas.vsDoc.VSDocCanvasElement object that contains the documentations.

Then you can use the canvas element as usual:

var ctx = canvas.getContext("2d");
ctx.arc(50, 50, 25, 0, Math.PI, true);
…

Please note canvas-vsdoc.js must not be included  in runtime but canvas-utils.js should be included (if you want to use Canvas.vsGet() and other utilities).

In VS2008 you should trick the environment by assigning the variable that refers the 2D context to Canvas.vsDoc.Canvas2dContext, by something like this:

var ctx = canvas.getContext("2d");
if (typeof DESIGN_TIME != "undefined" && DESIGN_TIME)
ctx = Canvas.vsDoc.Canvas2dContext;

DESIGN_TIME global variable is defined inside canvas-vsdoc.js. In runtime it should be undefined or false.

Just a note: if you still want to work in IE, you will find this Google extension very interesting: http://code.google.com/chrome/chromeframe/

Update: Visual Studio 11 natively supports canvas intellisense.

 

 

 

 

 

 

About these ads

10 Responses

Subscribe to comments with RSS.

  1. Anonymous said, on February 25, 2010 at 8:13 pm
  2. Anonymous said, on March 16, 2011 at 9:11 pm

    Works well – thanks!

  3. latest pc games said, on April 25, 2011 at 12:01 pm

    you are inspiring us to write such a nice article well done keep it up thanks for sharing us .for free games try my blog usagamezone.blogspot.com

  4. myegy ماى ايجى said, on May 18, 2011 at 6:32 am

    thanks nice post with nice resouce
    see my blog m-yegy.blogspot.com

  5. crsplace said, on May 18, 2011 at 6:33 am

    I’ll be comeback ,your post inspiring thanks

  6. Short Jokes Of The Day said, on July 28, 2011 at 2:15 pm

    Hi friend thanks 4 diz post, i’ve easly implement.

  7. Corey Mitchell said, on September 29, 2011 at 4:46 am

    Thanks for the vsdoc. Only trouble is toggling it on/off when refreshing the browser, but no biggie.

  8. Nitin Herdeniya said, on November 30, 2011 at 10:02 pm

    Hey man vosdoc is super duper awsome thing.. I was struggling searching for the functions for canvas object but this vosdoc rocks.. thanx..

    NOTE: The vosdoc works fine in visual studio 11 express for Windows Developer Preview too

  9. Gary Parkin said, on March 11, 2013 at 5:52 pm

    Where did you reference the canvas-vsdoc.js? If I reference it by draging it to the top of the VS aspx file, it gives me an error when the program is run but I get intellisense.
    If I don’t reference it, I get no intellisense. I’m using VS2010 with Master Pages. I see it’s referenced IN the actual canvas-utils.js file but it doesn’t seem to work. Any help would be great.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: