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.

<script>
artisan.drawCircle(’draw_on_me’, 150, 150, 30, ‘#809CA7’);
</script>

How-to Articles About Artisan

Documentation

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

artisan.create.stack();
This adds a stack, containing a layer and one level of history.

artisan.create.layer(stack);
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

artisan.closePath(target);
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'.

artisan.clearCanvas(target);
Erases the current canvas.

Known Issues

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

Licensing

Artisan is released under the GPL and MIT licenses.