As I mentioned in an Introduction to Artisan JS, Artisan has the ability to layer things on the Canvas. Once rendered to the Canvas, those layers are flattened as you would expect, but the data stays intact. Why is that beneficial? Because if you want, you can continue to update your data over time, render it separately, correct one layer of a collection… The opportunities are pretty close to endless.

How Does it Work?

When you use Artisan, you could just render a circle to the Canvas with a quick declaration like this:

artisan.drawCircle(’draw_on_me’, 150, 150, 30, ‘#809CA7’);

And that would flatten a blue circle onto the canvas.

Or, you could create a stack and two layers like this:

artisan.create.stack();
artisan.create.layer(1);
artisan.create.layer(1);

By default, a stack already exists when you include Artisan. So you could just include the two layers as part of that stack… but I wanted to show how a stack was added for clarity’s sake.

So the first stack, the default stack, is stack 0. The new one you created is stack 1, and so on. When you add a layer, you need to tell Artisan to which stack you want to add the layer. In this case, we want both layers to be added to stack 1. Layers work the same way. The first layer you add to a stack is layer 0, the second, layer 1. And so on.

Now that the layers are created, we can add our circle using the same values from above.

var information = [150, 150, 30, '#809CA7'];
artisan.addToHistory(1, 0, 0, 'circle', information);

The first line is our information about the circle. It simply says that the circle is at 150 on the x-axis and 150 on the y-axis, has a radius of 30 pixels and is blue. And notice that there isn’t a Canvas ID anywhere in sight. That’s to separate the data from the Canvas itself, allowing maximum reuse.

The second line adds the circle to stack 1 at layer 0. The next 0 is the history point. I won’t get into histories here, there’s an entire article to be written about the concept. Unless you’re writing something that updates without a page refresh, history might not even be very useful for you anyway. When in doubt, leave it at 0.

The next declaration indicates that the element to be added to the history is a circle. Lastly, we pass in the information about the circle.

With that, we have added a circle.

If you wanted to draw the layer, you could issue this command, assuming you have a Canvas element with the ID of ‘draw_on_me’.:

artisan.drawLayer('draw_on_me', 1, 0, 0);

And the good news is, the data isn’t lost. You can add to it, remove it, alter it, whatever you want… then redraw the layer with the same command.

If you want to draw the entire stack, you can write:

artisan.drawStack('draw_on_me', 1, 0);

This could even be the basis for animation with Canvas. Set a drawStack or a drawLayer command on repeat every so often and update the data elsewhere in your script.

And there is certainly more to be said about stacks, layers and histories. There are quite a few more ideas floating around in my head about what they could do, and how they could be even more useful. Hopefully their existence will help bridge the gap between Canvas and other technologies that do have a concept of layering built in.