Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Simple, stripped down JavaScript layered drawing environment with multitouch events
JavaScript Python Ruby
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


 .o88o.                          .o8  
 888 `"                         "888  
o888oo  oooo d8b  .ooooo.   .oooo888  
 888    `888""8P d88' `88b d88' `888  
 888     888     888ooo888 888   888  
 888     888     888    .o 888   888  
o888o   d888b    `Y8bod8P' `Y8bod88P" 

Simple, stripped down JavaScript layered drawing environment with multitouch events, with an eye towards tablet web/vector authoring.


For more information, contact
There is usually a reasonably recent demo available at



- text toolbar: alignment, text size, font, text color
- text wrapping
- style toolbar: line width, line color
- edit polygons with CPs, edit beziers with mod key + CPs
- color, linewidth, fill style panel, swipe open?
	- this is the nascent Fred.Tray class. Jeff's workin on it

- Group class which can self-contain and matrix transform (this will stop mouseclicks getting to members... ug)
	- grouping key binding 'g' is not working on .select()
	- Select class is the prototype for this
- Fred.drag is broken. Edit tool is using
- .make_draggable() sets up .dragging based on is_mousewithin() -also is_draggable = true
	- generates an on_drag() call
	- or default to polygon is_mousewithin()
- add on_mousedown_within to only fire when pointer is within, if it conforms to Polygon? 
- url hash rewriting, to generate permalinks for different states?
- styling in CSS-like syntax (like Cartagen)
- fix android viewport width/height
	- try removeing Fred.resize() entirely
- alias events like on_touchstart > on_mousedown
- line 73 of pen.js shouldn't be necessary - modifier key not turning off
- shift key locks line drawing to 45 degree angles
- clicking on bezier polygons (currently treats them like linear polys)
	- clicking on bezier lines:

- full iPhone/Android multitouch, with editing UI
- use Android call "window.devicePixelRatio" for pixel density
- this list is getting more ambitious as it goes so I'll finish now


To contribute, please fork the project in Github:, Then send pull requests! 

You'll have to edit the files in <fred root>/src/, then run 'rake build' from the Fred root directory and it'll compile everything in the /src/ directory into /fred.js, stripping out comments as it goes. This helps maintain ordering of the source loading, and also helps with minification.

You can also just create new tools in /tools/, adding them to, just as the pen tool is:

Tools 'take over' mouse events and must have:

- <tool>.select() and <tool>.deselect() methods which are called when the tool is selected with Fred.select_tool('pen')
	- the deselect() method is called when you switch to a different tool, and must unsubscribe the tools listeners
- <tool>.draw() method which is called every frame
- <tool>.description, a string which describes the tool (used in tooltips and menus) 

To debug from Android with the Android Debug Bridge:

adb kill-server
sudo adb start-server
adb logcat browser:V *:S

Icon sources:

Potential sources:

Something went wrong with that request. Please try again.