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 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.
At the moment, this appear to be the heart of Jill: The
makeCanvas() uses a callback function that fetches a drawing function, like
drawSquare(ctx), and substitutes
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!