JRCharney.com

Jill: jQuery Illustrator

NEWS

9/2/12: Jill 2.0 alpha!

I'm happy to announce that Jill.2.0.a.js is available for download! I had initially called it Jill.1.3a.js but the structure of the file has changed. (Expect Poly.2.0a.js to come out soon too!)

Creating an HTML5 Canvas has never been easier.

<div id="contents"></div>
<script>
function drawingFunc(ctx){
 /* Drawing Function stuff */
}

makeCanvas("myDrawing","#contents",
 "600px","400px",
 drawingFunc);
</script>

<div id="contents"></div>
<script>
function drawingFunc(ctx){
 /* Drawing Function stuff */
}

var jill = new Jill("myDrawing");
jill.setDims("600px","400px");  // default is 600x400 so this is optional
jill.setFunc(drawingFunc).putIn("#contents");
</script>

As you can see new features include object-oriented construction, chainable setter functions, and the ability to apply cascading stylesheet styles. It's so good I've integrated Jill.js to be part of this blog's functionality.

A few more tweeks, and Jill should be complete.

FAQ

What is Jill?

Jill is short for "jQuery Illustrator". It is spelled "Jill" not "jIll". Jill makes creating HTML5 Canvas painlessly easy using jQuery. The rest of it is JavaScript.

Parts of Jill

Jill has been divide up into four parts. Each part has been given a codename.

• Jill for the setup elements.
• Poly for Object-Oriented Brush, Polygon, and Text classes.
• Evan for events and animation.
• Ingrid for interactivity and forms.

Jill and Poly are already stable enough to use.

Is Jill Free to download?

YES! Just about all my software on this site is under an MIT free-software license. It's free to distribute. If you use my software or modify it, please acknowledge me as the creator of Jill, Poly, Evan, and Ingrid. If you modify it let me know so we can share info and network. But don't make any money off of my software without my permission.

Do I need to use jQuery to get Jill to work?

Yes. But don't worry. I usually use the latest version of jQuery. I'll eventually create beta files set up to reference the latest stable version. For now everything is in alpha.

Do I need Jill to get Poly to work?

That's sort of the gist. Eventually, Poly, Evan, and Ingrid will merge into Jill. But for now they are separate. Instructions for how to use all four parts are included in their respective files.

How will I know when a new version of Jill or a Jill component will be available?

I'd like to get a mailing list or RSS feed set up. For now, You'll have to stop by here. I recommend visiting at least once a month.

OH NO! X broke! What do I do?

While I test things out to make sure that there is as little drama as possible, things eventually break. If you have such an instance, please submit it to my email. It might be something simple that can be fixed. Be nice. What I do is a free service. Unless of course you'd like hire me.

I'm using Internet Explorer and I'm not seeing anything. Why?

It's cause you are using Internet Explorer! Since Microsoft has yet to get with the program and accept HTML5 elements like figure and canvas like every other browser on the market including Firefox, Chrome, Safari, Opera, and Android, you're more than likely going to enjoy this project without Internet Explorer?

What about IE9?

Did you know IE9 is the last browser of all the other browsers that started using HTML5 elements? And even with the new version and great marketeting campaign, as of August 2012, IE9 only supports HTML5 partially.

Do you have any examples of Jill in action.

YES! I! DO!

There is more to come!

File List

This list contains all the latest files to date.