JRCharney.com

June 8, 2012

Jill v1.0: jQuery + HTML5 Canvas

Since I can't really call my project "jCanvas" or "jDraw", I've decided to call this project that I am working on that makes using HTML5 Canvas with jQuery much more intuitive.

Thus the name of this project will be called Jill. Why bother making it "jIll" since "Jill" seems so much more idea. Jill is short for jQuery Illustrator and it has no relationship to Adobe Illustrator.

Jill works with jQuery to make using HTML5 Canvas easy to use. For now, Jill is designed to draw elements. Eventually more interactivity (events) will work there way into the programming part. For now, I've used Jill to illustrate a couple of examples from O'Reilly's Canvas Pocket Reference by David Flanagan.

Using Jill should make drawing Canvas elements as easy as using jQuery. For instance, I've read almost ever book that is on the market on the subject of how to use the HTML5 element. Some used a library like jCanvas, Modernizer, or some other library where they implement their own style of using JavaScript. This is not how one learns JavaScript nor how to use HTML5 Canvas. Most of these libraries don't even use jQuery to create a program that works on all platforms. Events in JavaScript are probably the most frustrating of these examples because everyone has their own style of handling events, especially for different browsers. Think of it as learning Spanish with the vernacular used in Spain (which is used in most Spanish Dictionaries and probably should be called "The Queen's Spanish" as they still have a monarchy) but not understanding the dialect or slang used in Mexico or the South American countries.

Just as jQuery has made using JavaScript easy to use, my plan is to do the same for HTML5 Canvas and possibly JavaScript events (interactivity and animation especially) used with Canvas.

Using Jill should also allow for multiple instances of Canvas contexts to be used without having to think of a new name for the context feature that can only be used once per Canvas element. Here we can use the same one but as a variable for a drawing function. It is my intention in the near future to apply Jill's functionality to previous blog entries that used canvas elements so that when I finally get the tagging system set up, the page that shows multiple canvases doesn't return an error. This was sort of a mental block for me for the past few months. But because Jill works, I can now proceed setting up such a system. (Also, have you noticed the Todo widget is back up. I'm still working out a few issues, but at least my list has bullets again and isn't some messy blob of text.)

One of the first issues I ran into when using jQuery to create a Canvas element was that the Canvas width and height attributes were misinterpreted as CSS attributes. Fortunately, jQuery offers a solution to fix that.

 // WRONG! width and height are process as the CSS attributes
 var canvas = $('<canvas/>',{id: cid, width: cw, height: ch});
 // Interpreted as <canvas id="cid" style="width: cw; height: ch;"></canvas>
}

 // RIGHT! width and height are processes as the CANVAS attributes.
 var canvas = $('<canvas/>',{id: cid}).attr("width",cw).attr("height",ch);
 // Interpreted as <canvas id="cid" width="cw" height="ch"></canvas>
}

At the moment, this appear to be the heart of Jill: The makeCanvas() function

function makeCanvas(cid,inside,cw,ch,func){
 var canvas = $('<canvas/>',{id: cid}).attr("width",cw).attr("height",ch);
 $(inside).append(canvas);			// add the canvas to inside
 var can = document.getElementById(cid);	// still need to call the canvas like this
 var ctx = can.getContext("2d");		// context
 func(ctx);					// callback drawing function
}

makeCanvas() uses a callback function that fetches a drawing function, like drawSquare(ctx), and substitutes func with drawSquare. Eventually, I'll extend this for arguments. But for now, I like how this works.

So now that I've figured out how to use jQuery to create and use Canvas elements, there will likely be more examples in the near future. It's about time!