Homam's Mind

Thursday, February 18, 2010

Canvas Intellisense in Visual Studio

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.

 

 

 

 

 

 

9 comments:

Anonymous said...

Works well - thanks!

latest pc games said...

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

myegy ماى ايجى said...

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

crsplace said...

I'll be comeback ,your post inspiring thanks

Short Jokes Of The Day said...

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

Corey Mitchell said...

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

Nitin Herdeniya said...

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

Gary Parkin said...

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.

HTML5 Javascript API Intellisense support in visual studio - Javascript Solution - Developers Q & A said...

[…] http://abstractform.wordpress.com/2010/02/18/canvas-intellisense-auto-completion-in-visual-studio/ […]