Artisan JS

A JavaScript library that aims to make in-browser drawing very, very easy.

It also adds support for layered data.

Getting Started With Artisan

1 Simply include artisan.js within the <head> of your page:

<script src="artisan.js"></script>

2And a canvas element in the <body> of your page:

<canvas id="draw_on_me" width="300" height="300"></canvas>

3 Once your canvas has been created, you can use any of Artisan’s built-in functions. This quick example will draw a blue circle on your canvas.

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

How-to Articles About Artisan


Standard Variables

All of the functions use the same general variables. Here is a brief summary:

Drawing Functions

artisan.drawCircle(target, placex, placey, radius, fill_color, line_width, stroke_color, alpha, shadow_blur, shadow_color, shadow_offset_x, shadow_offset_y);

artisan.drawImage(target, src, placex, placey, width, height, alpha, fill_color, line_width, stroke_color, shadow_blur, shadow_color, shadow_offset_x, shadow_offset_y);

artisan.drawLine(target, start_x, start_y, end_x, end_y, line_width, line_color, type, cp1_x, cp1_y, cp2_x, cp2_y)

artisan.drawPath(target, path, line_width, line_color, fill_color);
This draws a series of lines (specified as an array in 'path'), to the canvas.

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);

artisan.drawText(target, place_x, place_y, text, text_color, weight, size, font, align, alpha, line_width, line_color, baseline);

Layering Functions

This adds a stack, containing a layer and one level of history.

This adds a layer to the specified stack. (0 is the original stack, 1 is the first created, and so on.)

artisan.create.history(stack, layer);
This adds a history space to a layer. Both stack and layer numbers are required. (0 is the original stack, 0 is the first layer on the stack.).

artisan.addToHistory(stack, layer, history_step, directive, information);
With this, you can add an element to be rendered in a certain layer or stack.
directive: Possible values - 'circle', 'rectangle', 'path', 'image', 'line', 'text'.
information: This is the same information you would pass in when creating a single item. Do not pass in 'target'.

artisan.drawLayer(target, stack, layer, history);
This will draw only the specified layer to the canvas.

artisan.drawStack(target, stack, history)
This will draw the entire stack to the canvas.

Utility Functions

This closes a previously started path on a single canvas.

artisan.randomize(lower, higher);
Returns a number, somewhere between the lower and higher numbers.

artisan.rotateCanvas(target, amount);
Rotates the canvas by the number of degrees specified in 'amount'.

Erases the current canvas.

Known Issues

Artisan is not compatible with Internet Explorer. But, hopefully that will change with IE9.


Artisan is released under the GPL and MIT licenses.