David N Brooks Designer, Developer, Musician, Artist, and Writer

Hello! I’m David, an interactive designer, musician, artist, and writer living in Georgia.

Layers in Artisan JS

13 September 2010

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:


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.



Monkian said on Oct 27, 04:34 PM

Nice Library! I like the idea of adding this layer function. But how can you actually delete or reset a layer? Is there anything equal to the clearRect method? And how is the thing working with histories? It sounds very promising, but I can’t figure out the benefit of a history index, since it’s just slightly covered in this documentation. I would be thankful for some updates.


David Brooks said on Oct 30, 02:33 PM

Sure! To clear a layer you can call artisan.clear.layer(stack, layer); (So artisan.clear.layer(0, 0); if you wanted to clear the base layer of the base stack.) History was a feature that I never really explained well, or that most people will never find a reason for. It holds a previous version in place. You can use artisan.addToHistory(stack, layer, history_step, directive, information); The goal of it was to allow you to store a current version before adjustments incase you need to get back to where it was quickly. I really need to write that article, sorry for that!

Care to Leave a Comment?

Note: Off-topic or offensive comments will be removed.

About Me

I'm David Brooks, an interactive designer, generative artist, and electronic musician from Michigan. During the day I build things for Artletic, a great UX studio in Colorado. At night I create art and write music as Light The Deep and craft applications like Thousand Wires, JavaScript libraries like ArtisanJS, and build interesting things for the amazing clients of Northward Compass.

Read My Full Bio

You Also Might Like...

Technically Speaking

This site runs on the Textpattern content management system. CSS is precompiled by SASS, of course. Only a handfull of JavaScript libraries are in use, most notably Grunt. The visuals are done (by me) in Processing and Modo. The fonts are delivered with love by Typekit.


365 Days of Paleo/Progress

On July 1, 2014 I started into a year of Paleo and better health.
Here's my progress at a glance.

-18.2 lb. Weight

72 oz. Water Per Day

1787 Ave. Calories

See the progress

© Copyright 2005 - 2017 David Brooks. All rights reserved.