
HTML5 Canvas based fast painting app - godDLL
http://mugtug.com/sketchpad/
======
akirk
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.

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

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

------
romland
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
Don't feel too sorry: <http://aviary.com/>

~~~
tlrobinson
This is why I don't feel sorry for Adobe:
[http://emberapp.com/tlrobinson/images/screen-
shot-2010-02-06...](http://emberapp.com/tlrobinson/images/screen-
shot-2010-02-06-at-3-21-40-pm)

~~~
boundlessdreamz
Totally offtopic. What did you use to annotate that image ?

~~~
tlrobinson
LittleSnapper: <http://www.realmacsoftware.com/littlesnapper/>

~~~
kordless
Recursion: <http://emberapp.com/kordless/images/littlesnapper>

------
DJN
Very impressive. Excellent example. Kudos to mugtug.com

~~~
brianjherman
I concur.

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

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

~~~
windsurfer
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_olson
> 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.

------
nkh
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?

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

~~~
ewingpatriarch
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!

------
sev
The "light" drawing feature impressed me the most. Nice work!

~~~
godDLL
I was really impressed by the "gradient brush". I couldn't imagine how useful
that could be until I tried it.

------
stevenwei
Wow this is really fast and responsive!

~~~
kprobst
Try saving.

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

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

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

------
fortes
This is impressive work. Anyone know who is behind it?

~~~
freetard
<http://mugtug.com/> and <http://www.colorjack.com/blog>

~~~
akirk
How come the blog doesn't have an RSS feed? :(

~~~
pavs
Follow changes to any website:

[http://googlereader.blogspot.com/2010/01/follow-changes-
to-a...](http://googlereader.blogspot.com/2010/01/follow-changes-to-any-
website.html)

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

------
vais
Absolutely stunning on OS X Safari - unbelievably responsive!

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

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

~~~
ThomPete
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
Hmm, the interface looks an awful lot like Pixelmator. Like, really, a lot.

------
snissn
is there any sort of indication re: a license to use it / not use it?

------
godDLL
Gruber just linked to this:
<http://daringfireball.net/linked/2010/02/08/sketchpad>

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

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

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

~~~
ghshephard
I went through a roller coaster of feelings as I read each paragraph of your
post. And then I took a deep breath and re-read it.

So, first - You're taking an unpopular position, suggesting that the future of
everything isn't HTML5 - but you do so coherently.

But, the thing is, HTML5 isn't a replacement for thick binaries - I don't
believe anyone has suggested that you are going to replace Excel, Photoshop,
or AutoCad with an HTML5 App. But, with that said, not everyone needs all the
power of those Thick Binaries - lots of people get by with Google Docs,
Zimbra, Numbers, and other applications that are "good enough." (Please,
before anyone tells me that these applications are competitors for their thick
binaries - Tell me how many thousands of hours you've spent on them. Any
Excel/Cad/Photoshop Jockey not only knows precisely how limited those
applications are, but they also find their smaller competitors unuseable. )

I'm guessing 95% plus of the non-productivity application needs can be solved
by HTML5 or it's close companions. What _is_ going to be replaced is Flash.
Particularly with the iPad about to come out strong (Mossberg thought it would
sell millions of units when priced at $999, with the entry at $779 - He didn't
even hazard a guess at what Apple is going to be able to do with a $499
machine) - people who want to write cross platform WebApps are going to
_master_ HTML5, particularly with Google and Apple both driving WebKit so hard
- now you get Chromium + iPad in one fell swoop - pretty hard to ignore that
target environment.

Re: 99% of machines - Probably pretty close to it. How many machines out there
can't run a reasonably recent version of FireFox - I'll admit there is a lot
of them, but most machines in the last five years probably can.

~~~
daven11
'But, the thing is, HTML5 isn't a replacement for thick binaries' If you have
a look further up in this post people are suggesting this as far as I can see
- e.g. 'It won't be long before all applications are written in HTML/CSS/JS.'

Why use a browser for content creation? Browsers are good for displaying text
and graphics, but when it comes to creation sometime you're going to hit the
wall - whether it's file size/memory limits/bandwidth limits.

What is the cut point for a browser app - There must be one. At the moment I'm
editing and saving some movies I taped on my USB recorder to my PC, so I can
watch them later. Will a browser ever be able to do this? it seems unlikely.
My previous example about editing a large raw image - it seems unlikely a
browser will do that. My day job is writing database apps, will a browser ever
do that? seems unlikely, except for some of the front end stuff. So what are
the things a browser can do? The more I think about it the smaller the class
of applications is - whether it's using HTML 5, 6 or 112.

A browser app is good for \- little apps that aren't too resource intensive

\- things that you'd like to access from multiple places (like email), but
things like dropbox are way better for a large class - a web enabled native
app

\- reading web sites

\- searching web sites

No matter which way you cut it, there is a class of applications that will
_never_ run on a browser. So the argument is where this cut point exists, not
if it exists.

(and 99% of PC's could run this app if the people who owned those PC's could
install an application called firefox, an application that is tuned for
running this particular web enabled application that uses html 5 as it's file
format)

~~~
fauigerzigerk
You're making some good points and I give you credit for starting this thread
taking a karma beating for it :-) You definately get my upvote.

But here's why I think you might be wrong. Your argument rests an one
assumption, which is that the big datasets, the gigabyte size video you're
editing, the huge science data set that you want to analyse, etc, originate on
your PC.

That used to be the case traditionally and it continues to be the case quite
frequently. But I think it may be the exception in a few years time. Video
cameras could simply buffer the recordings and stream it right back to the
data center. Satellite pictures and other kinds of scientific data could also
be stored directly from the sensor to the data center instead of being stored
on some PC and then uploaded for sharing purposes. Other types of data that is
being analysed today is already stored on the backend and cannot be downloaded
as a whole (RFID data, financial trading kind of stuff, etc). It has to be
manipulated and analysed on the server.

If most data lives in google's data center the equation changes. It might be
impossible to download the entire dataset and then edit it on your PC using a
desktop app. The bandwidth argument suddenly favors the browser. High powered
desktop computers could be relegated to a few special purpose tasks. Most
users might not own machines capable of manipulating massive datasets or video
files.

And then you have things like google's native client. It's not like everything
client-side has to be written in JavaScript forever. There's not much left
that a browser equipped with something like native client cannot do provided
the data lives in the cloud.

~~~
daven11
I agree that more and more data will be stored on servers and will be
processed by chunky server code. The point I'm wondering is the browser and
html a good tool for accessing and processing this data? I would say no, that
a native code app that uses the web infrastructure is superior - a web enabled
app.

More so I think there's a lot of time being wasted on trying to get the
browser to do things using html as a programming model when it's a lot easier
to write native code apps and just forget the browser - call it web 4 (or 3
I've lost track of where we're at number wise).

There's no reason that the browser can't be a component of that web enabled
app, just html is not the only way to write applications.

Strangely I was talking to the owner of a medium sized ISV who was relatively
technically literate but not a developer. I was saying how you can deliver
apps using a native app, the response was 'but don't you have to use html?'.
Currently the web is the browser - this is not true, tcp/ip and other
protocols existed before the browser, and there is absolutely no reason that
http and html has to be the only way we communicate with servers. Indeed I
belive the blindness of tying everything to the browser is costing a lot in
development. It's time to move on. Keep the browser for what it's good for but
don't try and shoehorn everything into a html solution.

If in your argument you say 'web enabled application' instead of browser then
I agree 100%.

~~~
chipsy
The main thing the browser has to offer for applications over any binary is a
broader set of API functionality. With a binary you have a nasty OS-and-
library-dependency rigmarole to go through - with additional hairiness when
you're talking about cross-platform applications - and you have to spend more
effort to maintain it because every OS changes over time. If it can be built
in JS and HTML, you gain a powerful amount of portability, even if you've only
written to support only a subset of browsers, and you have some assurance that
the code will remain backwards compatible for a very long time to come. Those
are both huge wins, and they trump most other concerns for content
applications, even if the browser paradigms cause some amount of hoop-jumping
to take place.

If you're talking about "infrastructure," of course - compilers, databases,
servers - those are reflective of the system internals, so the lower level
environment is necessary.

But outside of that domain, browser-apps are the lowest-risk platform
available. That's good engineering and good business.

~~~
daven11
I would really dispute your first statement. The brower has a very limited API
compared to an OS.

Cross platform app development is difficult. But then so is getting a complex
web page to run on multiple browsers. To my mind cross platform development is
a lot more predictable than cross browser development, but I concede I may be
in the minority with that one.

But the initial discussion that everything will be done in the browser seems
to have gone out the window, so I can live with some things done with a
browser and thick clients to do more complex tasks. In time the browser may
start to do some of the things a thick client can do, but I won't hold my
breath on that one.

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

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

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

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

------
zandorg
Very cool! Works fine in Opera.

------
todd3834
I am very impressed

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

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

~~~
rimantas

      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.

~~~
r11t
In this episode of the online show "Hak5" they demonstrated some home-brew
multi-touch interfaces and they used those to interact with demos built in
Flash : <http://www.hak5.org/episodes/episode-624>

------
wowus
WAY better than photoshop.

