91 comments

[ 2.6 ms ] story [ 118 ms ] thread
is there any sort of indication re: a license to use it / not use it?
The "light" drawing feature impressed me the most. Nice work!
I was really impressed by the "gradient brush". I couldn't imagine how useful that could be until I tried it.
Wow this is really fast and responsive!
(comment deleted)
(comment deleted)
a very nice showcase of how redundant and useless Flash is, and will be, once HTML5 goes "live". i for one am just eagerly awaiting Flash's total death.
how many people actually use Flash to edit photos? ~0.

how many people use Flash to play casual web games? Hundreds of millions.

I think your conclusion is misdrawn.

Any reason canvas can't win (in the long run) for casual web games?
I'm not sure if your familiar with Flash deployment services like Mochi Media but one of the biggest features they give Flash developers is their encryption which is not currently broken. What this means is that the Flash games you develop cannot be decompiled. Even the regular Flash apps you see out there have just a slight barrier to entry to decompile and come out the other end with working code. This kind of safety is comforting to developers. HTML will never have even a little of that saftey.
You really think HTML5 adoption will be held back in the minigame market because the source is visible?

I see how it's an advantage, but I think if that's the full extent of why flash will win long-term for minigames, you haven't swayed me very far.

Oh I'm all for HTML5, on the other hand I'm still having to support IE6 for my work and even then IE7 and IE8, it will be many years before I can fully move to HTML5 and by then I'm sure I'll use whatever tool is best for the job of making web applications for use across browsers and platforms.

I don't see why we won't see Flash and HTML5 and Silverlight and Java applets for games still going forward. It isn't a either or situation as I'll still be able to contain Flash/Silverlight/Java inside a HTML5 compliant page.

You should take a look at the minified/obfuscated source that Google's Closure produces. It really isn't much better than looking at a disassembly of a C# binary, as far as clarity goes. And all that in the name of minifying the source, not obfuscation.

  how many people use Flash to play casual web games? Hundreds of millions.
How many flash games are capable of handling touch interface? Actually I am interested in what touch capabilities does Flash has at all.
I made a comment saying I felt sorry for Adobe. Then I deleted it.

I went back to the site and had another look.

Poor Adobe.

Don't feel too sorry: http://aviary.com/
This is why I don't feel sorry for Adobe: http://emberapp.com/tlrobinson/images/screen-shot-2010-02-06...
Aviary doesn't seem to work well on my phone, and I have flash (N900). This canvas implimentation works very well.
The video of the product looks great, so I go to edit one of the examples and choose "Import to Vector Editor" and then a window loads asking me to install Adobe Flash 10 and I think to myself, why on earth would anyone create an Adobe Creative Suite killer written in Adobe Flash?
Nice.

I see that you added the IEcanvas code to the source, but it looks like you might need to do some more IE testing. I see 3 javascript errors followed by a black screen in IE8.

Still remember the first time I saw somebody painting on the old mac. B&W, naturally.
high five. awesome html5 example. however ...

selection tool defaults to 7 sided poly, which is not intuitive, and seems to move against the user's intention a bit.

Though not as powerful on the tool side, I'm working on a project called Colorillo at http://colorillo.com/

Its distinct feature is the real-time display of other people drawing on the same page. You might want to check it out if you like this.

Both mugtug and your project are awesome, grats!
Works great with the iPhone. In fact if you use multitouch you get some nice Windows line screensaver effects.
Very cool. Just used it to play noughts and crosses with a complete stanger!
Very cool project. Too bad when I checked it out some dimwit is erasing everything with a big black brush.
Thanks! I know it's a bit risky to have the homepage "writable" to everyone, but I think it's a good demo.

Though, if you want to draw on your own or with just people you know, you can create a new picture and share the URL with just the people you want.

Enjoying your free stress test?
This is really excellent; exactly the app I have been looking for for the past year or so now.

Only thing I could suggest improving is letting the pad take up more of my screen size.

Great project. From the blog , it talks about the tools used to build this. Id be interested more in how all these play together.

Are you planning on opensourcing the project?

Can't say anything about opensourcing it yet.

I could write a more technical blog post at some point how it's done, if more people should be interested in that.

Ok, probably spent too much time there than was necessary. "We" (whoever was there) ended up with a few faces which evolved into pimps which evolved into splodges which evolved into me trying to make the whole thing yellow.

Thanks for the link!

Edit: It actually got somewhere: http://imgur.com/M8elJ.png

(comment deleted)
Very impressive. Excellent example. Kudos to mugtug.com
Very cool! Works fine in Opera.
WAY better than photoshop.
A question for you guys: What is the best way to learn about and start playing around with HTML 5. And how long would it take to produce something like this?
Look at the source code. ~7000 lines of javascript -> anywhere from a month to a year, depending on how good/fast you are.
I wrote a tutorial that might be useful: http://billmill.org/static/canvastutorial/
That's very very nice. The ability to effortlessly tinker with code samples is priceless. As is use of JQuery.
I used this tutorial when I was learning about the Canvas a few months ago - thanks very much for making it, it's a fantastic resource!
If you're interested in HTML canvas, and want to get started quickly, you should look into processing.js: http://processingjs.org/

Otherwise, this "cheat sheet" helped me the most: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.ht...

I tried processing.js (having used both processing and canvas+js) and I must say I would _not yet_ recommend it.

The tools just aren't there yet, I'd rather develop in plain js+canvas for now (for which you can get decent editors, debuggers, profilers, etc.)

It won't be long before all applications are written in HTML/CSS/JS. This is beautifully done and should definitely convert more open standard web stack doubters.
Absolutely stunning on OS X Safari - unbelievably responsive!
This is amazing. I'm building a little canvas drawing tool myself (http://kritzl.robsite.net -> 'Mal was') and this is great inspiration. Very slick interface and really fast, impressive.

Although the fill tool seems to have a very high tolerance. Fills the whole screen everytime. You could also add line smoothing for the drawing tools. There are reasonably fast algorithms you can use with bezierCurveTo (http://robsite.net/posts/smooth-path-in-canvas).

Just like a program I wrote in VB 1.0 - we've certainly come a long way.

I see things like this and wonder what on earth web guys are wasting there time on.

Did your VB app run on 99% of all desktop machines, without installation, and under your complete control?

Yeah, web guys are wasting their time on portability, trivial distribution, standards compliance, and keeping full control over their applications.

I think his point was they are reinventing the wheel to roll on the information superhighway,

even though it doesn't need to go to any destinations off that highway,

and when it was already rolling faster on client-side boulevard

I think image manipulation applications demonstrate the graphic capabilities of the platform better than anything else. And allegorical language aside, I think web applications are not a reinvention of old solutions, but a reframing of old problems. Hint: the web will kill Adobe's Version Cue faster than it can kill Photoshop. Collaboration is the holly grail.
I have a PC/Mac/Linux I want cross portability I use trolltech and C++ or something similar. What's wrong with installation? Installation gives me access to a nice operating system with a rich set of API's, threads, memory, file system. I fit's something I want to use I install it. Installation can cause problems with older software that isn't internet aware and can't automatically update itself. That is no longer an issue.

These thing's are cute toys, but really. Let's say I want to make something that can manipulate a raw image (around 100MB) for printing, would I use a browser - well the answer is pretty obvious.

So what is this browser stuff for??? It's cute and fun I agree. But it's not really practical as an image manipulation program. It's a cute distraction for hobbyists. If you want to do real work then fire up your compiler.

Using the browser and trying to get html to do something which is easy to do with a compiler is a distraction. The internet is the powerful thing, forget about the browser and html 5, but use the internet and web standards to enable your software to use web based data stores for collabaration and publishing then you're onto a winner.

...oh and this doesn't run on 99% of machines either :-)

I've got two OLPC XOs

XO1: running Ubuntu/XFCE/Chromium/MugTug's sketchpad. Painting with XO1 is way fast. No screen drag. None.

XO2: running the native Sugar paint app. Roughly the same feature set. Screen drag.

Edit: would be nice to have pressure sensitivity for my tablet and ability to edit SVG nodes.

Pressure sensitivity? Editing SVG nodes?? Holy crap this is a canvas drawing app. I'm happy it works as well as it does!

And a pressure sensitive extension would require some sort of modification of the available web tools, afaik.

> Pressure sensitivity? Editing SVG nodes?? Holy crap

They are fundamental complaints about canvas thus far generally, although I note colorillo.com can at least save in SVG.

Can anyone find any contact information for the people who made this?
He's a friend of mine; I can forward him your contact info if you wish. It would also be useful to have some idea what you want to contact him about.
Nice. I love that the approach is different than photoshop. And it is some amazing JS behind the thing too.
I abandoned pure standards-respecting HTML5/canvas while working on a similar tool (for pixel art, not general drawing), for reasons which will readily become apparent when you try to save a file... then load one.

Flash is still quite useful because desktoppy apps have legitimate needs which are thwarted by the browser's rather uptight security model, but are mostly satisfiable with Flash's controlled way of enabling them.

I have absolutely no artistic ability or desire to buy an iPad -- but put that on it and I might. Its like being a little kid again and discovering fingerpaint.
There is a veritable flood of tutorials nowadays that you can download or buy on DVD that can teach you how to draw or paint, even sculpt. And the materials needed for drawing are pretty minimal. Time + practice. :)