ArtisanJS – A Generative Art And Canvas Extension
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>
2. And 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>
Artisan JS in the Wild
- Romance has lived too long upon this river: A London Companion
- ThousandWires.com – From Studio to Stage, we help manage your equipment
How-to Articles About Artisan
Documentation
Standard Variables
All of the functions use the same general variables. Here is a brief summary:
- target – (string) This is the ID of the canvas element on which you’d like to draw.
- placex – (number or ‘random’) The coordinate on the x-axis
- placey – (number or ‘random’) The coordinate on the y-axis
- radius – (number or ‘random’) Used in circles, this is how wide your circle will be.
- height – (number or ‘random’) Measured in pixels
- width – (number or ‘random’) Measured in pixels
- src – (‘string’) The location of an image file.
- fill_color – (‘string’, array or ‘random’) You can pass in either rgb, rgba or hex formatted colors.
- line_width – (number or ‘random’) If you want your shape traced, or your line to have a width, specify it here.
- stroke_color – (‘string’, array or ‘random’) You can pass in either rgb, rgba or hex formatted colors.
- alpha – (number or ‘random’) The level of transparency, measured 0 – 1
- shadow_blur – (number) The range of the shadow
- shadow_color – (string, array or ‘random’) You can pass in either rgb, rgba or hex formatted colors.
- shadow_offset_x – (number) How far away the shadow falls on the x-axis
- shadow_offset_y – (number) How far away the shadow falls on the y-axis
- text – (‘string’) Used when drawing text.
- font – (‘string’) Your chosen font stack. Default is ‘sans-serif’.
- type – (‘string’) The type of line to be used. Options are ”, ‘bezier’, ‘quadratic’
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.