A JavaScript library that aims to make in-browser drawing very, very easy.
It also adds support for layered data.
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>
All of the functions use the same general variables. Here is a brief summary:
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);
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.
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.
Artisan is not compatible with Internet Explorer. But, hopefully that will change with IE9.
