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.
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.
/// <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.