An Introduction to Artisan JS
9 September 2010
It’s not that Canvas is hard to use, in fact, it’s actually rather easy. But as you create larger projects it’s often tedious to write the same things over and over. Plus, there are some subtle issues that creep up if things aren’t handled in a certain order. Being an advocate for Canvas, and in-browser drawing in general, I created Artisan JS, a library that aims to make in-browser drawing very easy.
Setting Up the Canvas Itself
The first thing you have to do with standard Canvas scripts is define the context. A typical Canvas will be defined like this:
<pre>var canvas = document.getElementById(target);</pre>
<pre>var context = canvas.getContext('2d');</pre>
It’s not a difficult thing to do, but Artisan does away with that need. You simply issue your declarations to the ID of the canvas itself and Artisan figures out what you mean. If the canvas hasn’t already been issued a context it creates one and moves on.
One Line Declarations
<pre>context.fillStyle = fill_color;</pre>
<pre>context.strokeStyle = stroke_color;</pre>
<pre>context.lineWidth = line_width;</pre>
<pre>context.globalAlpha = alpha;</pre>
<pre>context.shadowOffsetX = shadow_offset_x;</pre>
<pre>context.shadowOffsetY = shadow_offset_y;</pre>
<pre>context.shadowBlur = shadow_blur;</pre>
<pre>context.shadowColor = shadow_color;</pre>
<pre>context.fillRect(start_x, start_y, width, height);</pre>
<pre>context.strokeRect(start_x, start_y, width, height);</pre>
Again, it’s not difficult, but over time this can get old. Using Artisan we can write this:
<pre>artisan.drawRectangle(target, start_x, start_y, width, height, fill_color, line_width, stroke_color, alpha, shadow_blur, shadow_color, shadow_offset_x, shadow_offset_y);</pre>
And while that looks a bit scarier, it’s more succinct. You can also leave out what you don’t need. So, if you don’t care about shadow blurring, or maybe you just want a rectangle at a certain position on the canvas, you could declare it like this:
<pre>artisan.drawRectangle(target, start_x, start_y, width, height, fill_color);</pre>
Stacks and Layering
Canvas, by nature, acts like a flattened PNG. So once the circles and rectangles have been rendered they’re stuck in place. You can’t do anything with them other than cover them with something else.
With Artisan, I’ve created the concept of stacks and layers. Layers are much like what you would use in Photoshop. A stack is simply something to hold your layers as a collection.
At any time, you can add shapes to a layer and then render the layers of a stack individually. So, imagine you have created a multi-layered bar graph. You could have a link to the right side of the Canvas that re-renders the Canvas with only a certain layer showing. Or, you could render the same data to multiple canvas elements at the same time with subtle variations.
In version 1, there’s also a minimal concept of history. To compare it with PhotoShop, imagine if each of your layers had their own series of undos.
That’s how Artisan works.
So to back up to something you just rendered, you can re-render the layer with the “previous” history. That’s useful especially when you’re calling sets of randomized data and you liked a certain layer but not the rest.
Because it’s version 1, the history is there, it’s just a bit difficult to access. In future versions I’ll be expanding on it and making it a bit more useful.
The Wrap Up
So there you have it, the quick overview of what Artisan JS is, and what it can do. I have a lot of ideas for where I’d like to see it go over its lifespan. At the moment, I’m really interested in feedback. If you use it, and want to give me your opinions, critiques, whatever, I’m all ears.