YouDrawIt.js
Download youdrawit.js

Fun and easy to use drawing tool written in JavaScript.

YouDrawIt aims to provide a fun and easy to use drawing tool for webapplications. Ideal for web 2.0, AJAX, and other buzzwordable websites. Some ideas for developers:

Let forum users draw their own avatars or smileys.
Include the possibility to draw images in a blogpost.
Reinvent the one million dollar page, where users can paint the pixels they buy.

Show me the application!

Okay, Click here to make a drawing!
Note the value of this textarea after you saved the image to the server.
As you can see the return text contains BBCode. Imagine this on a guestbook or forum. After saving this message, the image, which is just drawed, will be displayed too!

How to implement

First include the correct JavaScript file into your webapplication. Add something like this to the head of your page:

<script type="text/javascript" src="youdrawit.js"></script>

Then you can start the first test with the following JavaScript code:

myDrawingBoard = new YouDrawIt();
myDrawingBoard.openWindow();

This will add a div with a running drawing application above the current website. The default settings provide a grid of 50 by 50 pixels. Because the drawing grid is placed in a 500px by 500px canvas, every pixel will be 10px by 10px. Remember that 50x50 = 2500. This means JavaScript has to generate 2500 div's. This is a hell on slow computers or with ~~Internet Explorer~~ a bad browser.

Ofcourse there are a lot of properties and methods to tweak YouDrawIt to your needs.

More examples

More examples below. View the source of this page for the javascript code.

Open Example. A window with a canvas of 88 x 31. This geometry is used a lot for arty linkbuttons. Note the pixels, they are very small. This is because of the 500x500 canvas. The outputType is 'HTML'. The outputElement is this div:
Open Example. A window with a canvas of 20 x 20. The outputGeometry is set to 200 x 200. This will resize the picture serverside. The backgroundColor is set to 'transparent'. The outputElement is this div:
Implementation at YouStickIt.com. YouStickIt is a web-based guestbook and note taking service for friends, family, co-workers and visitors of your website or blog. You can also add drawings to a post-it note. Go to the YouStickIt Demo to stick a note with a drawing.

Methods

Below a list of methods to tweak YouDrawIt to your needs:

setOutputType( String outputType );

Whether to use 'HTML', 'BBCode' or 'text' as output format.
Default: BBCode

setOuputElement( Element outputElement );

ID or element to add the HTML, BBCode or text to.

setOutputReplace( Boolean replace );

Whether to replace the content of the outputElement with the new data. If false, results will be added at the end of the element.
Default: false

setInputGeometry( String inputGeometry );

Specify the geometry of the image. For example: '20x10'. This will create a grid of 20 div's wide by 10 div's high inside the 500px by 500px canvas.
Default: 50x50

setOutputGeometry( String outputGeometry );

This will resize the image server side to the desired width and height.
Default: Value of inputGeometry

setWindowType( String popupType );

Whether to use an 'overlay' or a 'window' as application window.
Default: overlay

setPostURL( String url );

The URL to send the POST vars to, containing the image data.

setImagePath( String url );

The public path of the generated images.

setBackgroundColor( String color );

The initial background color of the application. Can be either a hexadecimal color value or 'transparent'.
Default: A random generated color.