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:
Works well - thanks!
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
thanks nice post with nice resouce
see my blog m-yegy.blogspot.com
I'll be comeback ,your post inspiring thanks
Hi friend thanks 4 diz post, i've easly implement.
Thanks for the vsdoc. Only trouble is toggling it on/off when refreshing the browser, but no biggie.
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
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.
[…] http://abstractform.wordpress.com/2010/02/18/canvas-intellisense-auto-completion-in-visual-studio/ […]
Post a Comment