14 ms·
HTML5 Canvas based fast painting app
- fortes 17y agoThis is impressive work. Anyone know who is behind it?
- freetard 17y agohttp://mugtug.com/ http://mugtug.com/ and http://www.colorjack.com/blog http://www.colorjack.com/blog
- snissn 17y agois there any sort of indication re: a license to use it / not use it?
- sev 17y agoThe "light" drawing feature impressed me the most. Nice work!
- godDLL 17y agoI was really impressed by the "gradient brush". I couldn't imagine how useful that could be until I tried it.
- stevenwei 17y agoWow this is really fast and responsive!
- kprobst 17y agoTry saving.
- deleted 17y ago[deleted]
- deleted 17y ago[deleted]
- todd3834 17y agoI am very impressed
- hackermom 17y agoa 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 17y agohow 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.
- llimllib 17y agoAny reason canvas can't win (in the long run) for casual web games?
- sosuke 17y agoI'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.
- llimllib 17y agoYou 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.
- sosuke 17y agoOh 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.
- romland 17y agoI 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 17y agoDon't feel too sorry: http://aviary.com/ http://aviary.com/
- tlrobinson 17y agoThis is why I don't feel sorry for Adobe: http://emberapp.com/tlrobinson/images/screen-shot-2010-02-06-at-3-21-40-pm http://emberapp.com/tlrobinson/images/screen-shot-2010-02-06...
- boundlessdreamz 17y agoTotally offtopic. What did you use to annotate that image ?
- tlrobinson 17y agoLittleSnapper: http://www.realmacsoftware.com/littlesnapper/ http://www.realmacsoftware.com/littlesnapper/
- kordless 17y agoRecursion: http://emberapp.com/kordless/images/littlesnapper http://emberapp.com/kordless/images/littlesnapper
- sh1mmer 17y agoI quite like Skitch, also good for that kind of thing.
- kordless 17y ago
- jasonkester 17y agoNice. 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 17y agoStill remember the first time I saw somebody painting on the old mac. B&W, naturally.
- stuntmouse 17y agohigh 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.
- akirk 17y agoThough not as powerful on the tool side, I'm working on a project called Colorillo at http://colorillo.com/ 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.
- DenisM 17y agoEnjoying your free stress test?
- agazso 17y agoBoth mugtug and your project are awesome, grats!
- vito 17y agoWorks great with the iPhone. In fact if you use multitouch you get some nice Windows line screensaver effects.
- cookiecaper 17y agoThat's cool. Have you heard of http://drawball.com http://drawball.com? It's a similar concept.
- akirk 17y agoHaven't heard of it. Thank you. This one's in Flash again, though.
- tomsaffell 17y agoVery cool. Just used it to play noughts and crosses with a complete stanger!
- rapind 17y agoVery cool project. Too bad when I checked it out some dimwit is erasing everything with a big black brush.
- 17y ago
- DJN 17y agoVery impressive. Excellent example. Kudos to mugtug.com
- brianjherman 17y agoI concur.
- zandorg 17y agoVery cool! Works fine in Opera.
- wowus 17y agoWAY better than photoshop.
- nkh 17y agoA 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 17y agoLook at the source code. ~7000 lines of javascript -> anywhere from a month to a year, depending on how good/fast you are.
- llimllib 17y agoI wrote a tutorial that might be useful: http://billmill.org/static/canvastutorial/ http://billmill.org/static/canvastutorial/
- godDLL 17y agoThat's very very nice. The ability to effortlessly tinker with code samples is priceless. As is use of JQuery.
- ewingpatriarch 17y agoI 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 17y agoIf you're interested in HTML canvas, and want to get started quickly, you should look into processing.js: http://processingjs.org/ http://processingjs.org/ Otherwise, this "cheat sheet" helped me the most: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.ht...
- ido 17y agoI 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 17y agoIt 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 17y agoAbsolutely stunning on OS X Safari - unbelievably responsive!
- sovok 17y agoThis is amazing. I'm building a little canvas drawing tool myself (http://kritzl.robsite.net 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 http://robsite.net/posts/smooth-path-in-canvas).
- daven11 17y agoJust 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 17y agoDid 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.
- metamemetics 17y agoI 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
- mahmud 17y agoI 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.
- daven11 17y agoI 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_olson 17y agoI'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 17y agoPressure 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 17y 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 17y agoCan anyone find any contact information for the people who made this?
- darshan 17y agoHe'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 17y agoNice. I love that the approach is different than photoshop. And it is some amazing JS behind the thing too.
- jjs 17y agoI 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 17y agoI 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 17y agoThere 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. :)
- ThomPete 17y agoCompare it with this http://www.sumopaint.com/app/ 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 17y agoWell, 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 17y agoWhat'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 17y agoHmm, the interface looks an awful lot like Pixelmator. Like, really, a lot.
- godDLL 17y agoGruber just linked to this: http://daringfireball.net/linked/2010/02/08/sketchpad http://daringfireball.net/linked/2010/02/08/sketchpad