Hate UML?

Draw sequence diagrams in seconds.
http://www.websequencediagrams.com

Zwibbler: A simple drawing program using Javascript and Canvas
Posted on: 2009-12-28 16:17:47


Tested under Firefox 3.5.6 and Google Chrome 3.0.195.38

Introduction

This project extends the technique I created for imprecise line-drawing to create an entire vector graphics application, similar to Inkscape. It is written almost entirely in Javascript, except for a server-side program that renders text.

See below if you are interested in the implementation and coding parts.

Features

  • Download and share your drawings in PNG, PDF, or SVG formats.
  • Box, circle, lines, and curve primitive shapes
  • Shadows when supported by browser
  • Text in several hand-drawn fonts rendered on the server
  • Rotate & scale shapes individually or in groups
  • Select colours using an HSV colour wheel.
  • Unlimited levels of Undo/Redo

Usage

Users who are familiar with vector graphics programs such as CorelDRAW! or Inkscape will have no problem using it, because the some of the most common keyboard shortcuts work the same way. Otherwise, it will take some getting used to.

List of keyboard shortcuts

The keyboard is the only way to do some things.

CStart drawing a new curve
LStart drawing a new line
Ctrl+DDuplicate selection
Page UpMove selected shapes toward you
Page DownMove selected shapes away from you
HomeBring selected shapes to front
EndSend selecting shapes to back
Ctrl+GGroup selected shapes
Ctrl+Shift+GUn-group selected shapes
+Zoom in
-Zoom out
Shift +Restore normal zooming
Arrow KeysMove around while zoomed-in

Saving and loading

Drawings can be stored on the website by clicking on "Save". If you do not have an account, the drawings will be deleted in a few hours, or if you close your web browser. As soon as you create an account, the drawings will be transferred to long term storage.

If you don't want to create an account, the "Save" option will also allow you to download your drawing as an image.

Drawing simple shapes

Click on the rectangle or circle tool in the toolbar, and the desired shapes will immediately appear in the upper left of the drawing area. You can then drag them to where you want to go.

No two shapes are alike. If you create two circles, they will be slightly different. However, if you duplicate a shape using Ctrl+D, the duplicate will be exactly the same.

Drawing lines and curves

To draw a line, click the line tool in the toolbar, then click anywhere in the drawing window to place the first point. You can then click again to place the second point, and so on. To end the line, double click. If you end the line or curve close enough to where you started it, then it will create a closed shape.

Hint: The line tool can be activated by pressing "L", and the curve tool can be activated by pressing "C".

Lines have a sloppiness property that can be set after drawing it. To set the property, select on the line you have drawn. The options pertaining to the line will appear to the left of the drawing window.

Curves do not have sloppiness, but smoothness. By increasing smoothness, the curve is modified to make rounder corners.

Drawing text

Text is placed the same way as circles or rectangles. Click on the text tool, and some default text is placed in the upper left of the image. You can change what the text says by clicking on the text, and then modifying the "text" property that appears to the right of the canvas.

Example: Editing text using the properties area

You can move, scale, or rotate text. However, in this version of the drawing software, scaling will result in loss of quality. Instead, change the font size in the properties area.

Selecting things

While not in line or curve mode, you can select things by dragging a box around them using the mouse. The box must fully enclose the shapes to select them. You can also add a shape to an existing selection by pressing the shift key while clicking it.

Overlapping shapes

You can move a shape to the front using the Home key on the keyboard. Send it to the back using the End key.

Point edit mode

For some shapes, you can move the corners around by entering "Edit" mode. You can enter edit move by clicking on an already-selected object. In edit mode, the corners that you can move are highlighted using a blue box.

Example: Point edit mode

Delete

Delete all objects in the selection by hitting the Delete key on the keyboard.

Grouping

To avoid having to repeatedly select complex groups of shapes, you can "group" the current selection using Ctrl+G. Now, when you click on any one of the group members, all will be selected. You can break apart any selected groups using Ctrl+Shift+G.

Copy/Paste

You can copy pieces of your drawings between documents and browser windows. While there are shapes selected, click on "Copy" and they will be transferred to the zwibbler clipboard, stored in your browser. You can then open another document later or in another browser window and paste the shapes there.

Duplicate

While there are shapes selected, you can duplicate them by pressing Ctrl+D. Copies of the objects will appear over the existing ones. You will have to move them aside to see the effect.

Zooming in

Increase magnification by pressing +. Decrease by pressing -. Restore to original magnification by pressing Shift+'+'. While zoomed in, you can move around using the arrow keys on the keyboard.

Bugs

The last 10% of work to make a polished program takes 90% of the time. I know about these bugs:
  • Scaling text reduces its quality.
  • There's no way to set the background colour of a drawing.

Implementation Notes

I should write something about the implementation. Hmm, the undo stack is pretty standard stuff but may be new to some people. But the thing I was happiest to find was the concept of abstracted Mouse Behaviours.

Design patterns for mouse behaviour are slim pickings. When a novice programmer designs a mouse-intensive application, he or she will tend to make a very complex function that deals with all possible cases when the mouse is clicked or moved. It can quickly grow to be unmaintainable.

To deal with this complexity, we separate the possible states of the system into various MouseBehaviour objects, which implement onMouseDown(x,y), onMouseUp(x,y), and onMouseMove(x,y). (This is a variation on the State design pattern). The default mouse behaviour is the selection mode. If you press the mouse button while over something, it then replaces the default mouse behaviour with a new mouse behaviour. When you lift the button, the new behaviour ends and reverts back to the previous behaviour. This keeps everything simple. There are several mouse behaviours:

  1. DefaultBehaviour -- Depending on where you click, it replaces the current behaviour with a new instance of one of the other behaviours.
  2. SelectBoxBehaviour -- if you click on an empty area of the image, it handles drawing the select box. When you lift the button, it selects everything in the rectangle you have drawn.
  3. TransformSelection -- if you clicked on a selection handle, then it transforms the selected shapes as you move the mouse.
  4. MoveEditNodeBehaviour -- If you click a blue edit node, then it moves the node.
  5. DrawLinesBehaviour -- Places points in a line shape until you double-click to end it.
These objects can be found in DrawView.js

License

Zwibbler.com is not open source. All source code is Copyright 2010 Hanov Solutions Inc. Drawings produced by you using zwibbler.com remain your property.

Want more programming tech talk?
Add to Circles on Google Plus
Subscribe to posts

Post comment

Real Name:
Your Email (Not displayed):

Text only. No HTML. If you write "http:" your message will be ignored.
Choose an edit password if you want to be able to edit or delete your comment later.
Editing Password (Optional):

Sylvain Caillet

2009-12-29 11:45:48
It sounds very interesting. But I need some time to study the javascript mechanics :-)

anon

2009-12-29 12:47:30
Love the sloppyness factor, but rather surprised that a sloppy filled area is "perfectly" filled - surely the color should not quite reach the border in some places, and bleed outside it in others?

Nick

2009-12-29 13:19:56
wow. very cool... The beauty of it is its rawness and imperfect look... i love it. going to play with it some more.

Ben Jones

2009-12-29 20:03:35
Can't seem to stop drawing a lines. Any leads? (using Firefox 3.5.6)

Ben Jones

2009-12-29 20:04:05
Sweet job by the way.

Tom Leys

2009-12-29 21:08:55
To stop drawing a line, double click where you want it to end.

Very cute little webapp.

Ben Jones

2009-12-29 22:01:17
Double Click...it works.

Ben

2009-12-29 23:36:11
Could you put a license on this, MIT maybe? I think I could use this on an upcoming project.

wishper

2009-12-30 09:38:04
Tested on Opera 10, too. Looks like it's fully working :)

David Robbins

2009-12-30 11:00:16
Great tool. Is there a way to generate the image as a png or jpeg? This would be awesome.

David Robbins

2009-12-31 10:30:00
Sorry I didn't read your post more closely - the image saving feature works in FireFox, but not in Chrome, so you can disregard my last comment. Any thoughts as to why Chrome will not work?

I've just discovered your blog and am really enjoying it.

dave t

2010-01-04 15:10:49
this is awesome, thanks for sharing. have you considered open sourcing this?

Stefan Siebel

2010-01-05 15:50:04
Great stuff! Thanks for sharing!

Alice (aka Steve\'s wife)

2010-01-18 22:37:06
Hahahaha! That comic is so you it's ridiculous!

Dana Moore, BBN Technologies

2010-01-20 17:46:28
Totally love the functionality!

Nicely implemented.

Really fun to us. The big wow factor for me is that simple cartoons often get the point across better than powerpoints or Omnigraphs which take far more time and energy to produce.

Really marvelous work. If you decide to open source, I would love to help take to the next step (not that it needs to be improved really -- as it stands it's really quite marvelous!); but a couple thoughts I have:

* object linking with a semantic KB?

* overlay planes over a visual backdrop (e.g., photo, screencap)?

* templates?

* Domain specific object palettes?

* layers?

* audio annotation?

dana.moore@bbn.com

Sean Doughtie

2010-02-02 22:51:01
Good Work!

I looked at the source and there is not license info... are you planning to release under a standard license?

Tom Bortels

2010-02-08 00:28:54
This is seriously awesome, Steve. Thank you for sharing.

I'd like to see point editing for curves - I'd be in hog heaven if I could mess with the Bezier curve handles.

I too am interested in license - I'd dearly love to copy this out and hack it into... well, frankly, something that draws spaceships. Some preset objects, a symmetry mode; it's be sweet. Fingers crossed for MIT or such...

Scott Francis

2010-02-08 19:31:16
+1 for a BSD licensed version (I'm frankly surprised Google Docs hasn't released something like this already; VIsio is pretty much the only non-gaming reason I keep Windows around anymore, and I'd dearly love a web-based version!)

Andrew

2010-02-09 14:27:20
Really nice little app - thanks!

fan

2010-02-12 04:39:34
Fantastic!

2 RFEs: line arrows, and OpenID sing-in

Thanks for this tool

nameReal

2010-02-20 17:47:34
Love it!

This makes sketching so much nicer, because it's equally accurate than my drawing, but just looks better.

Wish there was a "real" app like this for everyday offline use.

Oliv\'

2010-03-05 06:42:24
Hi, very nice work

You can implement the saving in png option with the function .toUrl(), then ajax the previous content generated to a PHP script with png header in ;)

Turq

2010-03-27 07:47:13
Hello. I tried to run on my computer but the text did not appear. this may cause.

Steve Hanov

2010-04-05 22:25:52
Although the source code is available the software is not open source. I may use this commercially in the future. (Or you can if you send enough money.)

However rest assured that I am taking all reasonable precautions to keep your saved data available.

Alex

2010-04-09 17:31:11
have you made any thoughts towards licensing costs, or freehand drawing?

Thiago Mata

2010-04-17 07:58:55
Man, you should make a post into your blog just about this image rotation using matrix operations. I try to understand just reading your code but it not that easy ( still trying );

Very good work. Very nice tool.

Sean Doughtie

2010-04-23 00:46:29
>(Or you can if you send enough money.)

how much are we talking about?

Matthew Wilson

2010-05-02 12:48:51
I don't seem to be able to change the text value in FF 3.6.4.

Alvaro

2010-05-04 07:46:04
Very interesting application. I have a question. Would it be possible to save on the server the final draw in gif, with the background as transparent? Don't know if I am asking too much

Sean Doughtie

2010-05-10 16:22:50
>Would it be possible to save on the server the final draw in gif, with the background as transparent?

or perhaps download an SVG

Agneta

2010-06-02 09:08:40
But how can I save it to add to my sharepoint sites?

Toby Bennett

2010-06-17 04:59:53
Cool. The text nearly works but it doesn't update what I type in (I'm using Opera)

Steve Hanov

2010-06-17 09:00:40
Toby,

You have to press Enter when you finish typing to update the text. But now that you mention it I can see how it is a problem. Thanks for pointing it out.

Harry Roberts

2010-06-19 19:58:56
This is great, if you give it the ability to draw over websites ala twiddla.com we would pay for this. I don't care about chat, gchat if fine for that.

David Spector

2010-07-29 19:30:39
Wow, I am really impressed. Your code is beautiful, and the app seems bulletproof--quite an achievement for JavaScript. It's a hot app for any business. I wish you success!

Springtime Software

Scott Richards

2010-08-05 13:55:05
This is beautiful. Did you write the color picker yourself? I would like to get my hands on that code... Keep up the good work!

pastorelli

2010-09-28 02:50:26
How to do "carriage return" in text ?

Thank you

Steve Hanov

2010-09-28 07:32:13
There is no ability to do multiline text. I admit that text handling is not easy.

Jerry Myroup

2010-10-01 09:49:20
Hi Steve

I created a windows application that behaves in a similar fashion to your application. If you do a search on youtube for procadtivity, you will find 3 or 4 videos showing my application in use. I would be very interested in working with you to create a drawing application that would be faster than anything on the market today. Email:gmyroup@digitalfreehand.com

D. Sohin

2010-10-05 21:00:11
Hi,

why don't you put your invention on github,

so everybody could collaborate on this awesome project

and have like an ass-load of benefits from it?

N Mitra

2010-12-30 15:01:46
Nice application. For zoom in "ctrl+" is working. DrawView.js link is broken. Kindly update. Want to know what exactly is abstracted mouse behavior.

Kevin

2011-02-17 14:28:27
It would be cool if you could send an invite to allow other users to join your drawing as observers, or pass control to them to allow them to add to your drawing.

sam

2011-03-21 03:43:31
i really would like to see an open source project like this

xveg

2011-04-11 08:44:43
Used this three times.

First time: saved, closed, tried to reopen - TypeError: a is null

Second time - Blue Screen of Death

Third time - Saved, tried to get pdf, got: TypeError: a is null

Firefox 3.6

colin

2011-06-01 02:50:55
neat app! you should make it multiuser! : )

here's a tutorial on multiuser sketch pads to get you started...

unionplatform.com/?page_id=2762

colin

fred

2011-06-19 18:21:38
Hi,

How can we display the properties panel in the embedded version of zwibber ?

Thank you.

rjp

2011-07-07 10:56:10
How do I reset my password?

yaakov

2011-08-23 12:13:42
where the name come from? Zwibbler? Is that german?

JOAO R.

2011-09-11 12:08:45
How can i apply this to my webpage?

Thank you guys

adexmont

2011-11-01 13:22:26
hello , i was looking for a web page online tht allow me to create a brain storming scheme and the most similar thing tht i have found is ur system .

my compliment, maybe you can implement the program in this way , because i have not found the page tht i was looking for.

thnx

good and usefull work

Gary P

2012-06-02 10:52:18
kind of an old post but I'm interested in using this (adding in pasting of clipart we have).. Would love to license it.. Any options? still "closed source"? What does "send enough money mean?"

Thanks!

norfiq

2013-02-28 20:03:14
can i have the coding in java for this. for studying purposes only. plss :(

znorfiq@gmail.com..pls email me as soon as possible

tevel Software

2013-03-20 09:19:46
Hallo all

We are looking for a simple server side drawing software to add to our web site.

The reason we need it is that we want to have the ability to actually "sign" customers on a web form (using their finger/stylus) using a tablet/smartphone.

We need a simple software with an API that allows the signing/drawing in b/w (no need for colors, brushes, etc...), and saving the image created as a file in our server. The file needs to be saved in a JPG/BMP format.

Do you have something a simple as that ?

Best Regards

Asaf Willensky

Tevel Software

www.tevelsoft.co.il

Email
steve.hanov@gmail.com

Other posts by Steve

Yes, You Absolutely Might Possibly Need an EIN to Sell Software to the US How Asana Breaks the Rules About Per-Seat Pricing 5 Ways PowToon Made Me Want to Buy Their Software How I run my business selling software to Americans 0, 1, Many, a Zillion Give your Commodore 64 new life with an SD card reader 20 lines of code that will beat A/B testing every time [comic] Appreciation of xkcd comics vs. technical ability VP trees: A data structure for finding stuff fast Why you should go to the Business of Software Conference Next Year Four ways of handling asynchronous operations in node.js Type-checked CoffeeScript with jzbuild Zero load time file formats Finding the top K items in a list efficiently An instant rhyming dictionary for any web site Succinct Data Structures: Cramming 80,000 words into a Javascript file. Throw away the keys: Easy, Minimal Perfect Hashing Why don't web browsers do this? Fun with Colour Difference Compressing dictionaries with a DAWG Fast and Easy Levenshtein distance using a Trie The Curious Complexity of Being Turned On Cross-domain communication the HTML5 way Five essential steps to prepare for your next programming interview Minimal usable Ubuntu with one command Finding awesome developers in programming interviews Compress your JSON with automatic type extraction JZBUILD - An Easy Javascript Build System Pssst! Want to stream your videos to your iPod? "This is stupid. Your program doesn't work," my wife told me The simple and obvious way to walk through a graph Asking users for steps to reproduce bugs, and other dumb ideas Creating portable binaries on Linux Bending over: How to sell your software to large companies Regular Expression Matching can be Ugly and Slow C++: A language for next generation web apps qb.js: An implementation of QBASIC in Javascript Zwibbler: A simple drawing program using Javascript and Canvas You don't need a project/solution to use the VC++ debugger Boring Date (comic) barcamp (comic) How IE <canvas> tag emulation works I didn't know you could mix and match (comic) Sign here (comic) It's a dirty job... (comic) The PenIsland Problem: Text-to-speech for domain names Pitching to VCs #2 (comic) Building a better rhyming dictionary Does Android team with eccentric geeks? (comic) Comment spam defeated at last Pitching to VCs (comic) How QBASIC almost got me killed Blame the extensions (comic) How to run a linux based home web server Microsoft's generosity knows no end for a year (comic) Using the Acer Aspire One as a web server When programmers design web sites (comic) Finding great ideas for your startup Game Theory, Salary Negotiation, and Programmers Coding tips they don't teach you in school When a reporter mangles your elevator pitch Test Driven Development without Tears Drawing Graphs with Physics Free up disk space in Ubuntu Keeping Abreast of Pornographic Research in Computer Science Exploiting perceptual colour difference for edge detection Experiment: Deleting a post from the Internet Is 2009 the year of Linux malware? Email Etiquette How a programmer reads your resume (comic) How wide should you make your web page? Usability Nightmare: Xfce Settings Manager cairo blur image surface Automatically remove wordiness from your writing Why Perforce is more scalable than Git Optimizing Ubuntu to run from a USB key or SD card UMA Questions Answered Make Windows XP look like Ubuntu, with Spinning Cube Effect See sound without drugs Standby Preventer Stock Picking using Python Spoke.com scam Stackoverflow.com Copy a cairo surface to the windows clipboard Simulating freehand drawing with Cairo Free, Raw Stock Data Installing Ubuntu on the Via Artigo Why are all my lines fuzzy in cairo? A simple command line calculator Tool for Creating UML Sequence Diagrams Exploring sound with Wavelets UMA and free long distance UMA's dirty secrets Installing the Latest Debian on an Ancient Laptop Dissecting Adsense HTML/ Javascript/ CSS Pretty Printer Web Comic Aggregator Experiments in making money online How much cash do celebrities make? Draw waveforms and hear them Cell Phones on Airplanes Detecting C++ memory leaks What does your phone number spell? A Rhyming Engine Rules for Effective C++ Cell Phone Secrets