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

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

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

Among the many things that ActionScript does well is their use of single-line declarations. Canvas, on the other hand, has a series of steps that you go through for each item you want to create. Here’s an example of some JavaScript you could write to draw a rectangle:

<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.

History

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.

Comments

1

John (8BIT) said on Jun 16, 12:11 PM

This is great! thanks for releasing it into the wild!

2

David Brooks said on Jun 16, 12:11 PM

You’re welcome! I hope that people find some really cool uses for it.

3

bolaoch8 said on Jun 16, 12:12 PM

Hi!

I’m using Firefox 3.6.10 and Google Chrome but I’m having some problems with the basic drawing. I’ve followed all the steps but I can’t seem to get a simple circle… I’ve been investigating and when I call an alert of the “var targeted = document.getElementById(target);” in the artisan.js it gets a ‘null’ result.

What can be the problem?

4

David Brooks said on Jun 16, 12:13 PM

Artisan never actually exposes the targeted value, unless you have added the JavaScript within Artisan’s module pattern. Within Artisan, targeted is only used to return the canvas object itself just before drawing. What are you trying to accomplish?

5

Adrian said on Jun 16, 12:15 PM

Hi,

How will you differentiate from Raphael (http://raphaeljs.com/)? Why not take any ideas that are unique and contribute to that project?

Cheers

6

David Brooks said on Jun 16, 12:16 PM

Hello Adrian,

That’s a good question for sure. I think raphael is a great library and I’m especially a fan of g.raphael. And it’s funny that you mention giving back to that community, I have a chunk of JavaScript that I’ve been meaning to send their way.

That being said, the foundation of Artisan JS and raphael are a bit different. Raphael is built on SVG and Artisan on Canvas. One of the reasons I decided to create Artisan was because of the difference between the functionality and purpose of SVG and canvas. What I needed was the ability to create things in browser and then quickly export them to a standard image format. Someone may have a way to do that with SVG, but I haven’t seen it yet. The strength of SVG is in its ability to quickly add interaction, canvas is good at creating real images.

Hope that clears things up a bit.

7

Chronos said on Jun 16, 07:14 PM

Hi,

Thanks for great work!

Did you try to use your library with wordpress?

8

David Brooks said on Jun 16, 07:22 PM

You’re welcome!

No, but I did try it with Drupal and TextPattern. The library should work just fine with WordPress, assuming the way you’re handling your theme and content supports the Canvas tag and some JavaScript. But I’d say for most cases there shouldn’t be much of an issue.

9

Anders said on Sep 13, 04:13 AM

Hi

I’m trying to draw the blue circle following the three steps, but having some issues. I can tell the canvas is being added to my page but I can’t seem to draw anything on to it.

Where do I place the artisan.drawCircle script? Do I need to add anything other the artisan.js, the canvas object and the draw script?

Thank you!

10

David Brooks said on Sep 13, 12:12 PM

Hi Anders,

If you have ArtisanJS referenced, you should be able to start drawing as soon as your canvas element is ready. So what I typically do is load ArtisanJS either in the <head> or right before the body closes with a standard <script> tag, and then put my Artisan declarations in another script file that runs its contents whenever the document is ready. So, if you’re using jQuery, it would be:

$(document).ready(function(){

// do things here

});

If your canvas is loaded and ArtisanJS is actually being called, you should be able to use anything out of the library. Feel free to take a look at the way I’ve written things either on ArtisanJS.com, or here at this site. Both use Artisan. Good luck, and I can’t wait to see what you come up with.

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.

Whew!

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.