HTML5 Canvas based fast painting app

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.

metamemetics2• 16 years ago

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.

llimllib3• 16 years ago

Any reason canvas can't win (in the long run) for casual web games?

rimantas• 16 years ago

  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.

romland• 16 years ago

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.

amadiver• 16 years ago

Don't feel too sorry: http://aviary.com/

tlrobinson2• 16 years ago

This is why I don't feel sorry for Adobe: http://emberapp.com/tlrobinson/images/screen-shot-2010-02-06...

windsurfer2• 16 years ago

Aviary doesn't seem to work well on my phone, and I have flash (N900). This canvas implimentation works very well.

fnid2• 16 years ago

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?

jasonkester• 16 years ago

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.

lionshare• 16 years ago

Still remember the first time I saw somebody painting on the old mac. B&W, naturally.

stuntmouse• 16 years ago

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.

akirk5• 16 years ago

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.

agazso• 16 years ago

Both mugtug and your project are awesome, grats!

vito• 16 years ago

Works great with the iPhone. In fact if you use multitouch you get some nice Windows line screensaver effects.

cookiecaper• 16 years ago

That's cool. Have you heard of http://drawball.com? It's a similar concept.

akirk5• 16 years ago

Haven't heard of it. Thank you. This one's in Flash again, though.

tomsaffell• 16 years ago

Very cool. Just used it to play noughts and crosses with a complete stanger!

rapind• 16 years ago

Very cool project. Too bad when I checked it out some dimwit is erasing everything with a big black brush.

akirk5• 16 years ago

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.

DenisM• 16 years ago

Enjoying your free stress test?

graphene• 16 years ago

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.

rajasaur• 16 years ago

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?

akirk5• 16 years ago

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.

decadentcactus• 16 years ago

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

DJN• 16 years ago

Very impressive. Excellent example. Kudos to mugtug.com

brianjherman• 16 years ago

I concur.

zandorg• 16 years ago

Very cool! Works fine in Opera.

wowus• 16 years ago

WAY better than photoshop.

nkh• 16 years ago

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?

ice_man• 16 years ago

Look at the source code. ~7000 lines of javascript -> anywhere from a month to a year, depending on how good/fast you are.

llimllib3• 16 years ago

I wrote a tutorial that might be useful: http://billmill.org/static/canvastutorial/

godDLL4• 16 years ago

That's very very nice. The ability to effortlessly tinker with code samples is priceless. As is use of JQuery.

ewingpatriarch• 16 years ago

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!

psawaya• 16 years ago

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...

ido• 16 years ago

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.)

mrshoe• 16 years ago

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.

vais• 16 years ago

Absolutely stunning on OS X Safari - unbelievably responsive!

sovok• 16 years ago

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).

daven117• 16 years ago

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.

mahmud2• 16 years ago

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.

metamemetics2• 16 years ago

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

daven117• 16 years ago

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 :-)

niels_olson2• 16 years ago

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.

windsurfer2• 16 years ago

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.

niels_olson2• 16 years ago

> 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.

Apreche• 16 years ago

Can anyone find any contact information for the people who made this?

darshan• 16 years ago

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.

emehrkay• 16 years ago

Nice. I love that the approach is different than photoshop. And it is some amazing JS behind the thing too.

jjs• 16 years ago

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.

patio11• 16 years ago

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.

sown• 16 years ago

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. :)

ThomPete2• 16 years ago

Compare it with this http://www.sumopaint.com/app/ and you realize HTML5 have a long way to go.

That is if you want to actually do work with it and not just play around.

matth• 16 years ago

Well, I think it's more that the mugtug developers have much more they can do - if that's what the want to do.

Don't say that HTML5 (canvas) has a long way to go. It does - but the basis for your argument is wrong. Don't compare two different projects - with different goals, and in different stages of development - and then say one is weaker based on its current phase of development.

ThomPete2• 16 years ago

What's wrong with that?

I was simply commenting on some of those "Poor Adobe" claims. And in that light it is perfectly rational to write what I wrote IMHO.

mambodog• 16 years ago

Hmm, the interface looks an awful lot like Pixelmator. Like, really, a lot.

godDLL4• 16 years ago

Gruber just linked to this: http://daringfireball.net/linked/2010/02/08/sketchpad

HTML5 Canvas based fast painting app

Related Stories