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.

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

 

Artisan JS in the Wild

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.

Licensing

Artisan is released under the GPL and MIT licenses.

About Northward Compass

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.

© Copyright 2010 - 2019 Northward Compass. All rights reserved.