*blog... kind of... *rss 

This is the result of all the weekend playing with various drawing algorithms and <canvas>.

I'm sure you prefer playing with the thing than watching a video tho... Here here!

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = 'darker'. This was on the HTML5 spec before but got removed. Just so you know what I'm talking about, this is like the "multiply" blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

I went to #processing.js to ask about this and while there sephr, apart from answring this same question, suggested making the app work on Webkit mobile (that means Android and iPhone) and also pointed me to the right direction. I didn't know this was possible at all but it was quite an easy task :) I haven't implemented multitouch support yet tho... that changes a bit the way my system work but I'll put it on the list.

Take a look at the code, play with it and if you come up with a nice brush you think should be added to the default pack, please, send it over!

EDIT: Thanks to Elke for creating a Facebook Fan Page. There is also a Facebook Group :D

EDIT 2: Yet another Facebook group. RRR, with a theme everyday and really talented artists.

Awesome :) Very funny. I actually just spent 10 minutes and saved 10 drawings. Tnx
This is really brilliant, love it! Shared the love for drawing tool on Twitter: http://twitter.com/BenjaminReid/statuses/10164369487
Very nice ;)
Looks like I know how to draw stylish stuff :P
(grid it's not working on mac/safari.4.0.4)
Very Impressive. It has inspired me to add brush styles to one of my projects.
Awesome app :) :)
I spend much more 10 minutes to play with it :D

Just a little thing : The "Web" brush is so dark in comparaison to the brush used in scribbler :(
Can we have the previous brush again ? :)
esta vez te pasaste, esta genial!!!
Awesome awesome job man!! I wish there was a way to output a higher resolution for print(possibly vector). Is this a possibility in the future? Great job again!
it`s very nice.....pump it up for iphone and ipad...
I would buy it...I would be happy....
Fantastic !! This sensation to be a real painter (i'm a developer ^^)
You have to create an undo function !!
I love it!

This could actually be a great new add-on to photoshop and other drawing applications. Brilliant job.

Are you thinking on create an advanced drawing app with it? It would be great to have an Undo/Redo actions, and layers.
Really an amazing work you've got there.
I can not believe how much fun it is to play with this on my iPhone. Don't know if it's viable but you might consider making an app out of this.
wooohooo! VERY nice.

The only thing I was missing to make it a really usefull sketch app was an eraser - or white paint.

something like
this.context.strokeStyle = "rgba(" + redvalue + ", " + greenvalue + ", " + bluevalue + ", 0.05)";
would do the trick ofcourse, then just add a palette to set the RGB values and you have it in full color.

very nice work, can't stop playing with it :-)
Thanks for all the feedback guys :)

I'm not really trying to do a pro application out of this. The idea is to keep it simple and fun. Adding undo/redo would make the code way more complex that it's now and it would be harder to create more styles.

Neither I was thinking of doing an app for iPhone/iPad. It already works on Mobile Safari (Android/iPhone).

But yeah, adding colour picker is on the list. Need to find the simplest way for implementing it. Stay tuned!
Neat stuff sir, did a quick sketch with my trackpad: http://bit.ly/aETOLl — can't wait to try it out with the tablet !
Very cool implementation using the processing engine... I love the very stylized look and cool behaviors. Nice, simple, effective. Awesome. Thanks!
Processing engine? Where?
Wow, this is fun!
Great for concepting, as it does a lot of the work for you!

You kill!

I thought I'd share something I whipped up with my mouse, very quickly thanks to your algos...


Good stuff, thanks for creating it. You should definitely look at getting multitouch enabled so it can be used on the iPad.
Beautiful and inspiring procedural tool.
I'm unclear on "saving" on the iPhone. Any thoughts / advice?

Otherwise, very well done. I really enjoy it.
You can always press power button + home button at the same time. That'll take a screenshot of the iphone screen.

just curious any way to get in vector :D
Absolutely amazing.
this is so totally awesome. i've been playing with it for hours!!!
This is way cool! Thanks for sharing! =)
Wow, very impressive. I'd actually love to use that sketchy brush as a brush in Photoshop... Do you think Photoshop can even do that?

Ah who am I kidding, Photoshop can do anything...

Do you happen to have it as a Photoshop brush?
Please never take this down. Please. Please.
Thanks for making this, mrdoob! This tool has unleashed my untapped creativity and has enabled me to produce works of art such as this: http://bit.ly/ctYhYp

I love it!
Just Love it! Congrats!!!

Can you tell me how can be possible to resize the canvas to 4000 x 4000 for example, where i can still draw on that entire new size canvas?!

One more thing, is it possible, instead of png as result, get a .svg file?

Thanks a lot! ;)
Amazing work, bravo. :]
I loved it!! Im not even the artistic type of person :). This is sooo totally cool. Thanks a ton!
Brilliant. Can you make a brush that does just the plain lines and doesn't fill in the gaps as well. This is the first drawing "app" I've ever used that feels like natural media. The fact its in a web browser is astounding.
Imagine when we can use this. Applicability infinity.
Cool tool, looking forwards to see more!
So fun: http://twitpic.com/17pnbt/full
Amazing idea, are you going to release it as downloadable content?
really nice!!
haha love it

Very impressed with how the brush interacts with points along the polyline the user has drawn. Neat trick that produces some very cool effects.

Is that something you came up with, or are there other tools doing something similar?
I've created a webapp version for the iPhone/iPod touch with offline capability, full-screen and pan/zoom.

See http://blog.42at.com/harmony-webappd for download and additional features.

Great work Ricardo.
Really nice, but having a Wacom makes it even cooler!

Nice work
One more thing, is it possible, instead of png as result, get a .svg file?

Thanks a lot! ;)
awesome. i just created my twitter background with it: http://proz.co.nz
Cool, kept me hooked for hours! :D
Excellent. If you could have squares filled with random colours or even random images I'd love it even more.
Oh for a desktop drawing program that implemented your 'Sketchy' mode! I can draw figures of 8, stick people and other rounded shapes with my mouse that look great - unlike using PHotoshop's brush tool for example. That's a wonderful algorithm for smoothing them out!

If anyone knows of software that has this implemented do leave me a message...
holy shit man. this is awesome. Can you create a "garden drawing" algorithm?
this is ridiculous...

this is sublime to play with !
Awesome application.

Some things that I think could make it better would be if you added:
- an eraser tool
- different colors
- undo button
Super awesome! I love this. There's something magical about this.

Incredible work!
Beautiful. Thank you for sharing this.
You mad scientist you...You make me happy with your friggin lines.
This is fantastic! Thank you <3
did a few more sketches :-)



Here is my sketch:

Color harmony.

I added a bit of color to my Harmony.
Wow, after 29 years I have just created my first drawing which is not a crap! Love you.
Wow... whats the charge for this ? Derivatives? If I paint a picasso ro basquiat do I have to split it with you?

fabulous work
A bit more of color.


And if anyone likes to try it out:

It's a big mess, but get the job done.
The only brushes accepting color are; Shade, Sketch, Fur and Longfur. It's easy to add the rest I just didn't see any use in that.

Thanks Mr. Doob for awesome tool. Big Kudos. :D
Wow... whats the charge for this ? Derivatives? If I paint a picasso ro basquiat do I have to split it with you?

fabulous work
Check this out :) Fantastic drawings by Polish artists in Harmony :) http://blip.pl/tags/harmony
Just add "undo" function and it will be perfect and simple tool. Thx.
Oh wow, that's a lot of feedback... I'll make sure the app stays online. Will now get down on doing some improvements to it.

Thanks everyone!
this app rocks. extraordinary awesome!
Keep up the good work!

Here's one pic i did:
This would be better with an Eraser tool :) Other than that, amazing work.
Works great! One thing I would sugjest is full screen on the iPhone (when launched from home screen). It should only be a few lines of java script, and shouldn't break anything. I don't remember if that was part of jQtouch or not.
This is great! Instant drawing skills, hehe.
I love it, but the darkness toggle is essential: I need it back!
I love it, but the darkness toggle is essential: I need it back!
I would pay good money for a version of this that could output in a higher res format for printing, up to 300dpi if possible.

Could anyone make this happen? Contact me please.
I love this so much. like a lot of people here, my first thought was adding color, so I hacked in boxes for RGB values. Ugly but it works. It's nothing new though, as a lot of you have added the same

However, when I was hacking away, I made a stupid programming error that accidentally invented a beautiful new brush....

in fur, if you replace the second color with a non-existant function, for example:

this.context.strokeStyle = thecakeisalie();

you get this pattern like the grid, except from whatever point the mouse initially clicks on!

Thanks again for a fantastic tool, its the best paint app I've ever used. No really!
You _really_ should make an app out of this, I'd love to use it offline. And I'm sure I'm not the only one.
What about an eraser? This really produces nice results and I've been looking for a good sketch tool - thanks! I haven't hacked any of the code yet but this looks very promising.
WOW. Amazed by the coding.
with a color hack, you can use sketch or fur as an eraser just by setting the color to white.
Better saving on the iPhone:
One option is pressing the Home and Lock button at the same time, but then you get the borders from Safari.

If you press the SAVE button on the website you get the .png file in a new window. Then if you press and hold that image you get the option of saving the image. Then it will appear without the Safari border in your Camera Roll.

Awesome app by the way. :)
Wow! Great.... really super!

5 minutes of work... http://skitch.com/stjernstrom/n3pxs/harmony-procedural-drawing-tool

The site won't open up in chrome...at least for me :( it says that I should move to chrome :) like this:

I see you have many extensions. Maybe you're using the Internet Explorer emulator extension?
May I use your code on my website?
I couldn't find any licensing infos
Lol...just looked into the code...and there is the license...

Thanks for releasing such a great thing under MIT license!
I love it!
Here's one I drew today, which I call 'Squid Interface'

and hi-res saves (ie 300-600 dpi?). any way to up-res stuff gracefully?
ps this is brilliant. and i love that it's in html5
Amazingly fun stuff but yeah, undo/redo is required for it to be a little less frustrating. I'd like to draw something really complex with it!
Hi-Res please!

This is amazing!
Needs an undo button! D:
Since I'd already made the eraser and so many people are asking for it.
Here you go. This is still just my experiments with this code, so it's a big mess and some unused things there that you'd probably not use. But as before it gets the job done.

I added also the option to clear the canvas to whatever color is selected, because it's fun to paint on other than white. like this.
we're diggin this! so much so it inspired an inter-office drawing contest... HTML5 and great for mobile - thanks!
My link went wrong.
To see the colored background check:

It should work.

Just amazing! Only lacks of the undofunction and above all: save in higher rez...
nice! the first brush that actually does not try to simulate too much a real world thingy (though it might seem as washed charcoal) and yet produces a rich texture! First in years I like penning around with, after years of crap oil paint impersonators. Only 2 things missing (apart from stuff mentioned before):
1- the contrary brush (can be an eraser, but I like the idea you can't undo somehow. makes it less digital. So better a white brush then, or some alpha-ish mix of the two)
2- since its browser-based (not paper), it should be more interactive too! I mean: something like live tweaked parameters, by receiving some kind of dynamic input Kinda weird idea perhaps... Anyways, cool stuff!
This should come with a warning for addictiveness. ;^) It's great fun and the results can be very attractive with hardly any time needed to learn it.
@Axel Diego: Thanks for all the hacks! I'm more concerned about keeping the interface minimal and the experience fun than the technical part :) Plus having issues with the server. Hopefully tomorrow I will have a new version!
We need a gallery we can upload our masterpieces to!! :D
I'm totally obsessed with this drawing tool.

Here's a Flickr set of stuff I done with it: http://www.flickr.com/photos/nathanbowers/sets/72157623471092593/

1) please never take it down
2) please make it some kind of downloadable paid app for Mac and iPhone.

As for feature suggestions:

1) I'd like to be able to save to an alpha channelled PNG instead of a white background PNG. That way I can take the artwork into other graphics programs and paint underneath the lines with layers.

2) High resolution output. This is such a tremendous tool for generating art, I'd love to be about to print something really big from it.
Maybe generate vector art from it instead of PNG bitmap? Or be able to export any size PNG?
Thank you.
I like it just the way it is.

Maybe more brushes would be nice.

this is really awesome! thank you for making it available for free use.
Very nice, but could use an eraser don't you think?
thanks. amazing app !
is there any chance to make an offline usable version ?
Yo this is the best obline sketch i ever found thanks for the download
SuperHero Legs:
Awesome stuff mr Doob!

I've hacked some keyboard stuff. If you press 1 through 4 while in sketchy, it will set the influence level...so- as how the lines interact with each other.

It works in firefox 3.6, I didn't test it in anything else.

Just paste


into index.html and your set.

I'm not a full time dev nor do I play one on tv- so, be gently commenting on the code. :)
Here's a link to the archived scripts...so just unarchive into a folder and run.

это охуенно!!! просто охенно!!!
For the people wanting some kind of vector output support- just wait until our browser-vendors implement the canvas.toDataURL("image/svg+xml") method correctly and add that to the save() function.

Then you can export to SVG!!. For now- it just does not seem to work at all...

I've taken Alexs color version and made some small changes.... I've added a second color picker for background. Eraser and clear now use the background color by default. I've also added the foreground color to all brushes, and added in the 'flower' brush I accidentally created.

heres my version!
amazing just amazing
if you can make the soft like this i will by in the second
avesome work !!!!!!!
@roryok: Great stuff! I'll try to merge all the tweaks everyone is doing. Just so you know why I'm not doing it right away. The tool is getting hammered. The reason it's just 1 file it's because it saves in server connections. Adding your tweaks will basically bun the server and make the tool unavailable... (your version's color picker needs 35 files :S)

Anyway, we'll see what I get done today :)
This is amazing! I can't stop using it. I tried it on my Hero Android phone and it does work, though you have to move your finger really slowly for it to gather up enough darkness, since the Hero's not that fast.

Also Save on Android appears to take you to a blank URL of "data:;" instead of the image

ALSO for people who were asking for an offline version/app - if you create an HTML5 offline manifest I'm pretty sure you'll be able to visit the site without a network connection:

Maybe someone else can have a go at this if mr.doob is busy on other things :) Maybe me! Who knows.
Thanks for the tip Nick. I don't have much experience with Javascript, so the more tips like these I get the better :D Usually takes more time to do research than actual implementation, you saved me there 2 hours! Thanks!
a rubber/delete function would be great!!!
What kind of traffic are we talking about here Ricardo?
What kind of traffic are we talking about here Ricardo?
Sorry bout the double posts- seems like Ricardo's server 'is' getting hammered with traffic- so I got an error, and reloaded- but my message came through twice now.

About 150k pageviews per day...
I've fixed an offline issue with the webapp I mentioned earlier. Try it here: http://blog.42at.com/harmony-webappd

fantastic. can't quit
This is a great app.
I'm wondering if there's a way to use this app locally on my desktop. I tried to save the page, but when I open it, it didn't seem to work.

Thank you.
Fantastic tools! Big thank you!
Hola! Muy bonito. El code mi parece muy simple ya. Has pensado de traer lo a Quartz Composer? Puede ser lindo. Hay una versión mas formatada para ver si puede transformarlo a un QC patch?

Never mind my posting. Found the color version with a slightly easier formated code. Start to understand that it has to be completely different ;]

Thanks guys! Very cool stuff.
One more thing, is it possible, instead of png as result, get a .svg file?

Thanks a lot! ;)
If you are reading this, it means that you're using my new server. Welcome!

It has been quite a challenge to move everything over. This server should be able to handle the load much easily.

Now that all the sysadmin tasks seem to be over I should be able to go back and develop this thing again. Sorry about this. The success of the app was totally unexpected.

Typical modern innovation, I am amazed and no wonder everybody is!:)
Congratulations for this awesome work ! I wrote a post on my blog, I hope a lot of people will use Harmony.
Keep up the good work !
Well, i lOvE your app.
It's easy, nice, smooth, and evything you need.
accept an upload button. I would love to create some more images, starting from a photo i've made. And one more thing, could you also add colors?
Very good job !!!
This is totally wicked !
@mr.doob yes, the color stuff is a bit awkward in needing so may files. I'm sure it could be cut down though.. JQuery can be run from the google cache, and you could probably put the color picker code all in one file, and replace the fancy graphics with html and ascii

Anyway, thanks again for a great tool!

PS: re the flower brush - I'm sure theres a better way to do it but I couldnt figure out how, its just the 'fur' brush with a reference to a non-existant function!
Yay! Another fantastic way to spend time not doing what I should be. Thanks for this, I've done two in as many minutes.
this makes the most gorgeous fluid marks - I love it
mr.doob awesome stuff !!! I love it! I'm impatiently waiting for a Hi resolution output option and it will be perfect.
This is a fantastic tool, I'd definitely by a full application based on this. It is so easy to control and makes such beautiful marks - the fur is incredible.
Not really a fan of fur, but digital fur is awesome!
just wondering, as it attaches itself to local lines, would it be possible to input an image and draw over as a separate file?
It's fun :) !
That is SO great. THANX a lot for it! Actually it would be really great to create a snowflake-brush as well.
There is a Fanpage at Facebook - if you like to join and post your paintings...

Wow, Harmony rules man!
Thank you for sharing it.
Wow! This is awesome! Addictive too! I can't stop drawing lol.
Being able to have a white added to the colour wheel and an eraser/undo of some kind would be useful though. I keep having to start over when I mess up.
I love making drawings using this tool however, for some reason I am unable to save my drawing, the save function doesnt seem to work. (It did on previous occasions). did something change? thanks
For some reason my drawings won't save anymore, like the png page wont come up at all no matter how many times i click -save- Help??
Awesome, nothing more to say... Pretty cool to watch a grunge background starting from few lines drawned with ur applet :)
Thanks for the author!!!
It's sooo nice, i love it!

but pls insert an UNDO FUNCTION :(
Sooo cool!!
All i would add to this is an eraser or the colour white, otherwise the coolest thing i've seen on the tinterweb in weeks
Does anyone know how to make the canvas larger?
@jean @Lisa: Ops! Sorry about that. SAVE button should be working again. Somehow messed up when implementing the color selector ( http://twitpic.com/18fczu ).
@mr.doob:I like the new color feature. Although, on mac the ctrl button is not the handiest one to have the function.
Ctrl click = right click. The contextual menu always pops up, before being able to click with in the color ring and select color.
Still it works.
This tool is incredible!
It's better than everything else for pure sketching,thanks you very much.
Only 2 things are boring.
The first is fixed resolution,I can understand that it uses the res of the browser,a way to expand that could be cool to do real drawing!
The second(related on the first) is that the distance(the threshold)when lines start to blend is too low,on a 1680 *1050 res drawing a face for a full body gives too much black blended lines(if this distance could be a parameter controllable it could be really cool !)
Btw,it's wonderfull,thanks you very much
@Axel: Changed that to <Shift> instead... Damn Macs... :P
Pure awesomeness. Seriously, you did something meta-awesome. It lets you create awesome things
Just make a Photoshop plug-in and maybe you can earn some money from it :)
Thank you for sharing this wonderful application!! This is addictive... Congratulations!!!
Greetings from Belgium.
* is it possible to add an eraser?
* the save-button doesn't seem to work
* it would be great if we could embed

This is awesome!
A very good way to squeeze that creative juice!
How do you change the colors..using chrome browser.
Great! I drew what I wante and it seems I am an artist! :D
@Jeff: At the moment... hold <Shift>.
Congratulations, mr.doob. It's a pleasure to see art and science collide. The way marks build up is gorgeous. If you figured out how to make this a photoshop plugin, I'd gladly pay for it. I'm sure I'm not the only one.

love this tool so much
This is great... and completely addictive.
wow thats one awesome drawing tool!!!
..i have a huge time playing with the effects...would be really great if this was available as a offline drawing tool aswell.
great work i really like the outcome of the pics u can doodle here!!!
I love it! Great! Bravo
When I saw the name Harmony this is what came to my mind:

check out our joint addiction to the Great mr doob


This one was spectacular to say the least.

Simply amazing! I think you can do the same on Flash, no? Could I set the pencil strengh to 0.5 like you did on html5? I'm gonna looking foward. cheers!
This is fantastic! Thank you so much for creating this.

I gave ya shout-out on my blog CricketToes:


Thanks again!
dude, this stuff is is like xxx flops short of awesome. I think procedural drawing is awesome, and your implementation is quite good.
but, it's slow, if you know what I mean. It's way better than The Scribbler, though, but are you sure you cannot turn it into binary plugin for some popular drawing program?

A nice touch would be to have more fine-grained control over the brush width (influence area), eraser (re-linker or simply whit brush) and proper handling of pressure for tablets. So far, it's just a toy, but people would be glad to have something like that for actual, serious drawing.
AMAZING STUFF. I have mentioned you on my blog and uploaded three doodles I've drawn today instead of coding websites like I should've have.. ;) But I was - and still am - in awe! :)


(Please, check it out)
this is the best! Thank you so much for making this!
cool cool cool.

I'm on a mac the shift key isnt bringing up a color picker or changing the color
Your programming skills are truly amazing - you combine the art of code and design to perfection.

Just something I made while browsing through your code:


Thanks Mr. Dood!

(looking forward to an undo-function :)
Hi! Your brain is godlike!
Your page says "look at my code.."

Where do I click to look at the code?


When I saw the name Harmony this is what came to my mind:

I love this program!
It's extremely addicting. If you created an online collaboration paintchat program with it, you could get rich!

I think this program can help any artist boost their creativity :)
I was bored a little:
Woho! I wish I did such nice drawings when I got bored too :D
cant access... using internet explorer 8

Mensaje: Object doesn't support this property or method

what can i do???
Use another browser. Internet Explorer doesn't support <canvas>.
Stunning, just - Stunning. Thanks so very muchly. This is on the order of "Wordle" which is a favorite of mine. Thanks for all your work.
I love harmony! it's a wonderful tool. however, one little feature i'd like to see is a prompt that asks you if you are sure you want to clear after clicking the clear button. I keep accidentally clicking it while drawing and I lose all of my progress! :(
WoW! This is the best tool for sketching!
shemoixedet tqvechema : ))
Very nice design program, it handles extremely well and intuitively. Initially I thought it was like Alchemy, but after 20 sketches later I realized just how much more control I had over the marks I was making. Thanks so much for this I will contribute something very soon. Do you have any plans to sell this program?
cool...now we can too easy to drawing in a comp... n so i will try it
No need for an eraser tool I think. It's easy enough to erase mistakes with the SQUARE pencil and a lot of white :)
Very Clever.
Awesome. I'm a self trained (wannabe) artist and I think this is definitely the best application I've seen.
Sketch brush is awesome; it seems to read my mind. A desktop application or a plugin for an existing one would be unvaluable.
Great stuff. I created some new brush strokes and put them on my blog (http://rhyolight.posterous.com/new-brushes-for-harmony-canvas-app).

You can play with the new brushes here: http://storage.dangertree.net/harmonyStrokes/harmony.html

They are called 'stringy' and 'curvy'.
Hi. There's this new app on the apple iPhone app store, 'AbtMagicsand', which is a reproduction of Harmony. I see no reference to your work, however.


Check screenshot 2.

PS if that work is unauthorized, do try to make the original web app more iPhone-friendly. (canvas sizing issues, full screen support by hiding all elements)
yeah, that magic sand app is totally a straight copy of harmony. you probably would have some say in getting it removed from the store.

I'm getting some weird glitches every so often where the canvas is seemingly reduced in size. often about the full width of my browser window, but only 25% the length. Also, my iPod touch had great support when harmony was first introduced, but I can rarely get it to work anymore.
To be honest I'm flattered that someone took the effort to copy my work :) Thanks for letting me know!

I'm aware that the current version doesn't work properly on
Mobile Webkit, my local version should fix that, I'll try to update tonight. I was on hotel internet connections these days and it was hard to try on my devices :S
Here is a similar app for iphone:
Only one brush, but there is an eraser and the drawing works fast.

And here are some promocodes:

I recall that you said an undo feature was impractical, but I wonder if you could add a square brush that fills in with the background color (and doesn't try to interact with lines already in place) as an eraser?
could there be an undo feature. thanks.

By the way it is Awesome... makes me sound really cool when i show it too people.

Thanks alot
love your tool
Awesome app, really love it! The only thing is that my real work suffer alot. But that I can live it. :D
I found your harmony by chance and gave a link
to seniors at the Netherlands, some love it.
Missing 'erase' but in on of the links above (a *.zip)
seams to have included it ...
Nice in any case.

This is a pretty genius tool!!!
Would it be possible to implement an undo for at least 3 steps? It would be perfect for its purpose then!
I love the first two brushes most!

Great work for now, thinking of a donation :)
Thanks for your work, keep on doing dude!!
This is VERY cool, I've spread the word of it :)

I love that javascript and html5 etc are allowing great drawing tools like this and Alchemy, they really spice things up!
I've seen this JS application and fell in love.

I translated it and modified it a little bit, especially the square, the circles etc...

see here:
omg this tool kick ass!!! iam exalted!!! is it possible to load an own background image in??! that would be fantastic..
do i need to download some kind of program for this to work? because it is not working on my laptop, it says error: object does not support this object or method.
Really great stuff you're doing here, takes me bake almost to my days hand coding on the C64, lots of creativity!!! Keep up the great work.
Nice job! I liked your application so much I made a blog post about it, with the silly little picture I made with it. Keep it up!
Hi Richardo and fans of Harmony!

We have ported this incredible drawing app to the iPad!
Big shoutout to everyone here and can't wait to see what images are created with it!

We are about to release 1.1 with many new features. Would love to hear from iPad drawing fans on what features they would like for 1.2

You can choose backgrounds and save your artwork to your photo library too to email to friends or post to an online gallery.

You can find it in iTunes here: http://itunes.apple.com/us/app/really-big-pictures-hd/id364900656?mt=8

And here is the website here: http://www.reallybigpictures.com

Ricardo you rock, thanks for being the man who started this all. We are standing on your shoulders with our iPad app. We hope to do you proud with our future updates!
For the 1st 5 people on this site who have an iPad here are some promo codes. They only work once and are good for the first 5 people who use them.


Again if you use please email me your work or post in a soon to be open gallery on our website. Thanks!!
Great app!!!
Can the drawings be saved at a higher resolution for printing? or in a svg vector format for scaling up?

I would love to be able to use this app in some of my illustration work.
Hey Everyone ,
I used this Tool for like two days , and i liked it so much ,

I added the Ability of putting a background image as target if you are going to draw from a reference .
"of course the *save* button will only show you the resutls without the image file you put as a background ,
ok here is the link :

just saw this on stumbleupon, it is so much fun. thanks for the really big promo code, i am already hyping this to everyone i know that has an ipad!
This Harmony ROCK ! Very good app !
Is there a way to draw offline ?
See http://home.gurroa.cz
Added features: Undo and Replay.
Every move is saved and the Undo button redraw everythink you drawn except the last drawing. Most brushes use random drawing so the result is never the same.
My goal is to store drawing in text file and redraw it later on demand.
The link isn't working for me... =(
No need for an eraser tool I think. It's easy enough to erase mistakes with the SQUARE pencil and a lot of white :)
Great work ! is there any chance to adapt it so that it may work with internet explorer and excanvas for instance ?
As permission of Mr. doob . You can find a free version of Harmony for iPad at - http://bananacoding.com/MiniTones.aspx

enjoy and all feedback is welcome.

I'm planning to exchange saved file to able to load in Harmony.

Dude, this is such an awesome sketch program. Found it just in time to sketch out one of my nightmares :)
Excellent... So fun and Simple... But you should manage to add an undo function... no YOU HAVE TO !
Thank you very much!
Yet another clone?

" It's easy enough to erase mistakes with the SQUARE pencil and a lot of white :)"

Not when you are painting with a different background color ;)
I can't believe how cool this is and that it all exists in the "cloud". The interaction is great on an iPad and really does provide a creative tool that has unlimited paper. Pointing all my creative friends to it so they can put it to good use. I appreciate your steady flow of tweaks. Great stuff!
thanks so much for this ricardo! let me know if i can help with anything!
warmest wishes, maki
I'm really enjoying Harmony, but I noticed what might be a bug, and I'm not sure if this is the right place to report it. If I draw something, and then make my window smaller before clearing the screen, it doesn't clear the part that is no longer visible because of the window being smaller. So if I then draw a picture in the smaller window and save it, there will be part of the old picture on the side of it still. I've only tried this in Firefox, so I don't know if it's browser-specific or not.

Thanks for making this! It's been a lot of fun to play around with.
Love this app, it truly is great. I would have to bank a few of the suggestions that others have made ::

1. Undo
2. Plugin for PS/AI
3. Higher Resolution / Export to SVG

really 2 isn't 100% needed because if you could export to SVG you could do some post-edit work. I am illustrating a book for class next week and I have been looking all over at AI brushes, but I am thinking of using this tool assuming I can get the resolutions I want (if there were an export to SVG or another scalable export / high res-png) that would make up my mind for sure. Love playing around with it though!
hey mr.doob big fan of all your work specially your old days of flash -

question: im pretty shure you would be the one to know - could this be done in flash ?
Yeah, it's indeed doable :)
Hi! I'm quite impressed about your work. For me its just the tool I was looking for, excellent.

I have downloaded the source code from the git repository and the only problem/difficulty I have found its related to cookies.
In the online version, the actual drawing session is saved, no matter if you refresh the browser, or (probably) if it crash, the work is safe. The problem is that offline version doesn't work that way, cookies get never saved. Could you help to understand whats wring? And could be any solution?

Anyway! Thank you very much and well done, the program is simply AWESOME/AMAZING.
Not sure... Which browser are you using?
I use Firefox 3.6 on a linux platform (Sabayon). I haven't tried on any other browser yet, but I'm going to.
Ok. Just got my new Bamboo tablet and cannot seem to get pressure to work on Harmony.

Amazing! I'd like to second the vote for an eraser. Also an "undo" that removes the last element added would be wonderful. (Expensive in a Canvas environment, I know).

Keep up the wonderful work.
works beautifully - have tried the colours but prefer the black & white - love the simplicity of it

so far I posted a few harmony experiments here:


Man this is insane
I simply love it
Check out the App Store - Qvik Sketch. Seems like a direct copy of Harmony. Didn't see any ref to you so thought I'd post here. Harmony rocks!
I should do a list of adaptations at some point :D
Found a port of your app on the Android market, called Sketcher. Got me hooked immediately, using it on my HTC Legend, and man, is it instant magic! Will make a exhibition of it in Salzburg, Austria. Many many many thanks for giving me back long-lost inspiration and creative void. Will credit you for this wonderful tool. Simply amazing.
Hi all.

I have a good news and a bad news for you.

The good news is that I've created a version of Harmony that supports an eraser stroke, undo/redo, variable canvas size, the use of background image(s) and wacom tablets. (I hope you don't mind that, Mr. Doob.)

The bad news is that not all the features are available at once in all browsers.

Well, the situation is not that bad, actually.

Known issues:
- you can't really draw in Firefox when zooming out. Firefox's JavaScript engine is not fastest one, to be politically correct.
- Firefox [3.6] won't store/reload the drawing when running the program locally. (This is a simple FF bug.)
- you can't drop images onto the canvas in order to put them in the background in Chrome when using Harmony over http. (This is due to Chrome's security policy.) You have to download the "offline" :) version and open index.html locally -- and voilà, drag and drop works.
- only one file is accepted per drop. (you can live with it, I think.)
- you can't use really huge canvases unless you have a huge monitor. I mean, the program lets you create a canvas of any size, but you can't zoom out enough in order to use it properly in case it's too big. (if it's ok for you not to see the whole drawing area at once, then this shouldn't mean a problem for you.)
- the program tries to load the wacom tablet plugin. As not everyone owns such a thing, this will result in a "missing plugin" error message in most cases. (sorry, folks.)
- use the undo/redo function carefully (it's turned off by default). It works fine, but can easily turn your computer into a memory-feeding monster. In order to implement "undo", every stroke (you push the mouse button down - you draw some weird lines - you release the mouse button) creates a new canvas layer. This requires a lot of memory, especially when using a huge canvas. At times, use the "flatten image" button, too.
- the program hasn't been tested with Safari, Opera and all the others browsers. Use Chrome, and use Harmony from your local machine (file:///...). Not because I'm the greatest fan of it on Earth, but because its JavaScript engine is quite speedy, and using it locally enables you to drag and drop images into the background of your drawing.

Thanks for the program, Mr. Doob.

That's all, I think. Enjoy:

Or download the zipped file:
Amazing program! Wow.
just gorgeous!
Daniel, your version doesn't save anything :(
Oh, how embarrassing. :-/
I fixed the code; it seems to be working now.
Still not saving on your site, havent checked the local version yet. I'm using chrome dev channel
Works great on iPad
I'm confused by the comment "cookie... work is saved". What cookie?

I would like (us, collectively) to pursue the prospect of saving Harmony 'state settings' by stuffing blocks/chunks into the PNG header of the images which are output by the app's Save function. No, I'm not suggesting data representing a full (stroke-by-stroke) recording, just a snapshot of the app's state/variables. (Later, this may include window positions if draggable windows are are added to the UI). According to the spec for the PNG filetype (same is true for JPEG, FWIW) flags for each header chunk can indicate that its content is ESSENTIAL, BUT NON-CRITICAL. This means that if an image containing (our) custom header chunks is edited in another program, the other program will preserve the header info if/when the image is REsaved. When loading (importing) a previously saved image, Harmony could change the state (brush selected, stroke width, opacity, etc) to match the settings indicated in the image header data. Because use of toDataUrl() doesn't provide an opportunity to inject additional header chunks, we would need to code a custom 'save' function: read imageData into a var, concatenate the chunks and data, base64 encode the var... then urlEncode the result and stream it to a new window (as toDataUrl natively does).

Daniel Simonkay, your comment states that your version adds Wacom support... but MrDoob's GitHub version already supported Wacom, as of April. Have you added something new/additional in terms of tablet support, or in your separate devlopment, did you accidently duplicate the effort?

Daniel, I wish your zipfile contained contact info. Because it doesn't, I'm posting feedback here.

I really appreciate your addition of sliders to expose the brush control parameters. However, I'm experiencing some bugginess.

Nothing happens when I attempt to change "stroke color". How/what is "stroke color" anyhow (vs brush color and background color)?

Attempting to change the background color, by clicking on the labeled colorbox (mini canvas element) throws an error. Console indicates colorselector.js line 289. (Later, the next time I click "create new drawing", the chosen bgcolor is applied, FINALLY.)

Your 'Save Drawing' command isn't working for me (neither online, nor local copy).

Eraser. min size is 30px? Ouch. Yuck. Although you may have chosen a square brush shape for the eraser for the sake of programming simplicity (using clearRect() to do the job)... I implore you to rethink this & consider changing it to a circular brush.

Enabling the user to CHOOSE canvas size is a wonderful feature addition! init() should still size the canvas based on screen.width though; otherwise, users faces the chore of resizing each each session prior to drawing.

Grayed-out sliders. I've been thinking, wrestling with how best to present the per-brush controls... and I'll suggest you should rethink your approach. Instead of graying-out A,B,D or whatever is appropriate, I think each brush needs its own menu (swapped into the DOM container). Otherwise, we're faced with showing (and graying out) every possible parameter each time. What if a brush exhibitiing 'springiness' (or some other unique parameter is added)? What if 'auto color-cycling as you draw' is added for select brushes? Your current construct of displaying all params, then graying them out, will become unwieldy.

Users begged for undo... and you delivered! Yeah, additional memory overhead, but whatchadgonnado? Maybe document the unavoidable overhead, maybe popup an alert if layers*canvas.width*canvas.height exceeds some threshhold? For the sake of sanity, probably ought to only save a set of 12 undo layers. Possibly expose a control which enables user to change this limit, but pop explanatory caution text via confirm() before applying the new value.

You've seen the mugtug.com drawing app, right? As we add features to Harmony, I think MULTIPLE draggable menus will be desirable, or even outright necessary in terms of usability. In any event, I'm saying that your draggable menu should collapse to a MUCH smaller size. Keeping a narrow menu/docking bar at the top of the window is probably a good idea as well -- users don't favor dragging and tripping over floating menus.

dragging background images.. and security restriction. Okay, so think outside the box. Why does the background image need to be rendered as a canvas layer? (I'm saying, IT DOENS'T). Step back a sec -- lose the "drag to load a bgimage" (which isn't supported across all brower engines/versions anyhow). Provide a load button. onclick, raise a js prompt() asking user for target path (can be a URL or file:///) ...and assign that image as the css background for a div underlying the canvas. I've done this; I'd send you a copy of the code if I had your contact info.

With a resizable canvas, the bgimage handling probably merits its own collapsible menu (and/or sufficient helptext). User wants to center the image onscreen, or wants it scaled up/down to fit the canvas? If scaled, use best fit (maintain proportions), or not?
Daniel, additional arguments in favor of separate, swappable menus (swapped visible into parent container, as needed) for each tool:

a fixed scale for the sliders (same scale across all tools) doesn't work well.

user would be better served if some of the controls were textboxes instead of sliders.

(Not a high priority, but) the last-used settings could be retained, per tool: Line width, color, opacity

Later, in the context of available localStorage (or the use of json, if a fork of the app becomes a 'cloud' app) yes, the user will probably expect the app to retain the last-used paramaters for each brush. Additionally, users would welcome the ability to save (as a named, custom brush) their custom-tweaked setting into the brush picklist.
does not work on my pc

ie 8 win 7 thanks
Rusty, it not worky because IE8 doesn't support the HTML5 canvas element.
Pretty cool Katya!
You are definitely an artist! As many times I tried to draw something interesting I just could not even make it look like thing I think of... Of course people asked too: What's that? O.o
Anyway, good luck! And hello from Russia :)
Daniel.your version will not work on the Iphone.
javascript error on line 101 in brush files.
'this.context.beginPath'[undefined] is not a function.
could you take a look.please and thanks
any chance of:
a) a standalone prog (i.e. not web-based)
b) pressure-sensitive graphics tablet support?
Hi everyone, like most of you I'm a big fan of mrdoob...he's a real genius and Harmony is such an amazing software!

If possibile, I would like to invite you joining a funny contest based on this fabulous application.
Il you go on http://www.gaiariva.it/disegnaconme you can create a drawing on my music, by choosing first a song of mine (first botton) and then starting to draw (second botton). you can use 4 colours, black, white, red and grey, in all their nuances. you can send your 3 best drawings to disegnaconme@sun-music.it .... the best drawing will be a part of my coming-soon new album's artwork :)
each work will be published here: http://www.gaiariva.it/disegnaconme/gallery

I wanna thank again mrdoob for his great work!

I'm the first who flattred this!??! O_o?
the new Muro from deviantart (http://muro.deviantart.com) seems to have a lot of stuff borrowed from you! But as this is some kind of commercial project they have it more configurable. But they don't even have a hotkey colorpicker!..

Are you pissed off or honored by this kind of ... "citation"?! ;] or do you not see it that way at all?
I'm challenged ;)
Is there any chance of having a better colour picking system. So you can get specific colours without them being mixed with the next in the colour wheel, Also a eraser would be a nice addition.

i lost about 3-4 hou... y 3

Harmony -- i start to find some programs for cash ((

17:22 -- test ur source
png (1366×638)

picture like the letter L in the abstract style / color
twitter - ckopomox

plz help find pic(
Hey, I really love harmony. A few people have mentioned deviant art's Muro but it's not as good as harmony in my opinion. However, Muro does have a layers feature. This would be excellent. So you could stop certain parts of an image being attracted to each other.

Would you consider it?
I rwally like this tool, in fact I am creting much of the art on my website with this. I have even been creating art with it for my new web browser(although it is not that usable just yet :)).
Awesome! I felt like I do know how to sketch. it really helps a lot...


whenever i save my work it goes nuts...i don't know what to do nor how ta save it.

please help me...

need it for a project
What does "goes nuts" mean? I mean, I know what it means, but "going nuts" it's not a behaviour I can reproduce. The more specific you're when defining the problems you're experiencing the better answers you'll receive.

Just in case... tried Right Click->Save on the new window/tab it opens when saving?
I used this once before--a brilliant program, very fun!

Sadly, the poor webpage doesn't show on my computers anymore... Using IE 7. Ah well, maybe they'll work again someday. c:
you are so cool . i love it
super)) very good)))
I can't find harmony
Super!!!!!!!!!! )))))))))))))))))
This is insanely useful as a sketch program, I am blown away by how much it makes my sketches pop (I'm a digital illustrator by trade). Please, please consider making this into a standalone program, give options for dimensions of the canvas, and I would give you money in a heartbeat. It's helped my art that much-- and it only limits me in that it's so small that I can't get past smaller sketches. I understand wanting to keep it simple/fun, but you've no idea how mindblowingly useful I'm finding it to build full illustrations off of! Please consider it? :)
i am waiting for your developed standalone app. i need to your drawnig machine. i love your style invention.
i named it for me : (artist spider)
its may developed with more & more features. your base is too strong.
when ! we hope ...
you can customise it to standalone drawing tool or photoshop script or artrage,painter or alchemy tool.
whenever when !
thanx for this before :-D
i want to meet the man who changed the world like this! please don't die. and please don't die before adding an x and y radius mirror! i really love you for this. i love you anyway!
Is there any way to save on the ipad other than home and power button...don't want the safari window saved. please...bigger resolution would be so incredible! thank you. thank you. thank you mr. doob.
Feature request:
X, y radial mirror
Multitouch cap.
iPad save
High resolution save!
hi! wonderful app. there's an app called Magic Brush in symbian phones that does exactly what harmony does PLUS has a mirror drawing mode that's very cool for sketcing! i wish you woul dimplement the mirror draw mode too. and exporting higher resolution images would be cool too!
Hi, great app!
There is something fascinating about real-time interaction like this. This app really shows what's capable and what is to come.
I've actually made a social network site based on the Harmony app at http://www.piccor.com/public where you can send your sketches to all your friends and post them on the main wall.
Thanks Mr. Doob!
krita used harmony effects [or one that too like this!]

i,m wait for your win-paint app.

please develop it ...
This is a wonderful tool.

I'm noticing one recurring problem - very frequently I get thin lines across the picture running from the brush's present position to the top left corner. They appear suddenly without warning. I'm using Firefox 3.6.12 on Windows XP with a Wacom tablet.
Try with Chrome ^^
Here is a free standalone drawing app what uses sketchy brushes, layers, mirrors http://intelloware.com/download/artist.zip
I absolutely fell in love with Finger Sketch Paint on iPhone/iPad. I was rather miffed when I came across your site and found out that Finger Sketch Paint appears to be no more than a wrapper around your work. The look and feel are exactly the same. What cheeks to charge $1.99! If you are not paid by the "author" of Finger Sketch Paint, it might be worthwhile to pay them a visit with your lawyer. http://itunes.apple.com/nz/app/pro-finger-sketch-paint-ba/id397618335?mt=8

I also noticed Qvik "borrowing" your idea/(possibly)code too. It might be worthwhile to pay them a visit as well. http://itunes.apple.com/nz/app/qvik-sketch-pro/id372852174?mt=8

Wonderful work you have created! Thank you!
I get the lines to the top left corner in Chrome too, I'm afraid.
Update on my "extra lines" problem - I think it's because I've been pressing R to reset while I'm still moving the brush. That makes it happen every time when I do it deliberately, and I've been a bit reset-happy.
Hello! Let me ask it already, that picture (what the harmony overtakes saved) it how may be later again to call in?
Daniel, I love the extras in your version, especially the "Undo". Does it have an equivalent to the Reset key in mr.doob's original? I'd need that to make full use of it since I'm trying it for things like figures, where I want to be able to draw nearby shapes without the "webbing" forming between them.
dont lose "artist"
its strong paint app based harmony
just test ... its my new daily hobby !
I would DIE for an aplication of it for Photoshop. This would help me a lot!! Thanks, it´s wonderful!
an extension or script or plugin or brushset for Photoshop is fastest way for know & use harmony power for all of the people. a match tool for PS is a smart way to develop fastest than ever.
Wow, I Stumbled this randomly about an hour ago and am completely hooked on it! Please please please please make a Photoshop brushset for this, I would LOVE to use them on my next project!
check two devel version
think about 3D-Harmony !
its nice, effective,powerful & creative.
paint harmony!cal and live build sculpt.
with some transform and view changer such orbit & rotate, this will be fastest & most fantasic 3d sketcher.
how can do this great work ???
3D ! WOW for Harmony. its a big step!
who can build 3d version of harmony ?...
its can based on a 3d model (import) & sketch & connect on this. (like a spider). its very useful for 3d design & illustration.(export a 3d format or render as picture)
i'm just can dream power of this. but one artist who can programming may can create this unique tool !!!
why not develop it to 3D !
its can be a revolution on 3D ...
& may 1st surprise for 2011 ::))
I really think you could be onto something big with this. With the Shaded setting it is so easy and quick to draw complex looking scenes and objects. And using a tablet for it is a great fun. A Photoshop plug-in, or even better, (but possibly more fanciful) an Illustrator (vector) plug-in would be a superb product.
I must say you generated a tool for industry... Ricardo Cabello I like to contact you. and I must say you join hands with adobe. and embed this tool with photoshop. Its must thing.

I am a graphics and interactive artist. I liked your invention.

Keep it up.

thanks and regards
Nasir Qureshi
Picked your tool as the software of choice to blend with my website - Klowdz (www.klowdz.com) - which makes finding shapes in clouds interactive. Thanks for creating this and allowing us to use it!
fantastic tool and fantastic blog
hello do you like this website?
When I click on the link all I get is a blank page! I want to try this! What is going wrong? Is it compatable with internet explorer?
Thank you so much for creating this wonderful tool!! It is very relaxing to draw with your *sketch paper and pen*!!!
I love this!!

...But how do I change the background color back to nice white?
wow, i was impressed before, but you have outdone yourself! v.cool.
Another vote for an undo button!
GREAT!! application. I wish you find the time to improve on that and make a full fledged software out of it, meaning no more than undo, BG color and possibly simple layers.
Your projects are really cool. I specially like" Voxels" and "Harmony". Don't stop your good work!
This is heaps of fun. What a great mind you have. Thanks for sharing your great talent. Can you purhase this brush, download it somewhere. I am a bit useless and can't figure that out. I absolutely love playing with it!!!! Thanks
Hey I'm love this program and I use it often to do concepts with but recently I'm running into trouble with the way the mark is registering down on screen. its not smooth anymore for me it's acting as if there is some kind of snap on. I use a wacom intuos 3. Never had a problem before I'm seriously bummed cause I actually put this program in my process and now I just cant work wit it. OHHHHH it happens with the web brush. HELP!!!!! i love this program.
Brilliant! Been using it as a fun sketching tool with a tablet. Thank you so much! Absolutely love playing and drawing, wish there was a way to get higher resolutions (other than a higher screen res), so that some drawings could be exported and printed with greater quality.
Here are some sketches on my Facebook albums.


It is always handy to be able to check problems with plugins by a quick install on the default theme versus your own
Wow this is great. I'm wondering if this will work on the iPad, then it will be a great free sketching tool.
I love Harmony. I was looking for a way to let members of my site sketch entries into the forum, and this looks ideal. However, now I need to integrate it with my site. I'm using Drupal with TinyMCE and IMCE. IMCE might be the most obvious place to add this, though a TinyMCE plugin would really be ideal. Any thoughts? I'm going to go make a donation now. :)
TinyMCE and IMCE. IMCE might be the most obvious place to add this, though a TinyMCE plugin would really be ideal. Any thoughts? I'm going to go make a donation now. :)
Great work. I love it.
Très sympa cette petite appli !
Les outils sont bien faits et tes productions sur le côté sont très intéressantes, notamment celle qui ressemble à tetris.
J'ai créé une application sur le site nobjet qui permet aux internautes de composer leur peinture à l'huile, pas de dessin, mais de la retouche d'image...
Great, bye
I just love how after working on a drawing for an hour, you hit save and get the "aww snap something went wrong" screen, and the only thing you have to save is what the drawing looked like twenty minutes ago. That's just wonderful!
you have restored my faith in all things tech, in the wonder of people and value of art.
this is definitely the best thing I have found on the web !
the style of your blog is very cool and it is my love.thanks for sharing.
Hi, it is very cool to see how procedural brushes work. i have discovered these by Krita project. and i have made this with his adaptation. maybe you would like to see it because in some way there is a bit of you there.

thanks for the code
Ese Shock! ;)
jajaja que pequeño es el mundo e? No sabía que eras tu el que estaba detrás de Harmony, me parece un concepto muy interesante. ya ves ,cada vez estoy más metido en el software libre, aunque aun soy un aprendiz de ubuntu. Un abrazo campeón
Here is another sketch :-)

Is there any way of turning this program into a standalone program , which we would be able to use offline ? it's a great program, but we don't alwyas have an internet connection close by....
I love this application. How do I buy a more complete, larger version it, if it exists? I'm using the browser add on version. Is there more? I want to be able to zoom in on areas that I'm working on. I need larger canvases. Please let me know? I appreciate it very much, thank you, and another thank you for such a sweet little browser add on! Oh, I also want to say that I love that I can save an image I create with Harmony and import it into Jasc. Paint Shop Pro for additional touches and tweaks. AWESOME!