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.

Download on Github

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.

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

Artisan JS in the Wild

How-to Articles About Artisan


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

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.


Artisan is released under the GPL and MIT licenses.

Work With Us

We would love to tell your story. To explore what that might look like, just send us a note!

Northward Compass: Orlando, Florida

Founded by David Brooks in 2010, Northward Compass is a small, distributed design shop that claims Orlando, Florida as home. We specialize in dynamic, interactive, and modern web sites, applications, and games.