Make sure to toggle the Basic/Pro switch. And I was told that layers would be impossible with Canvas … (They stack several Canvas elements on top of each other. Fire up you favorite DOM inspector or turn off CSS if you want a demonstration of that.)
Because canvas doesn't store layers, it is essentially just a bitmap.
If I drew a black box on a canvas, and then a blue circle on top of that black box, the canvas element does not keep the part of the box under the circle in memory; instead, it replaces the old "lower layer" bitmap data with the new "higher layer" bitmap data. So there is no built-in way of deleting that circle and having the canvas revert to the box data that was drawn first underneath the circle, which is essentially what layers are.
If you stack canvas elements on top of each other, one canvas per layer, then this restriction no longer exists - One canvas can store the box and the other can store the circle. That way, if I delete some of the circle, the canvas doesn't have to remember what was underneath it before, it just has to be transparent to let the next-lowest canvas bitmap shine through.
I've done canvas coding before. I made a UI for an audio player entirely in canvas. Canvas allows you to manipulate an array of pixels. You could keep a separate array for each layer, maybe you have to coordinate between them, but it seems entirely possible. You could generate an output array as a matrix operation on the arrays of layers or do some other kind of merging logic? The only difference I can see between canvas and a modern gui (other than speed) is that someone else has already written these libraries for the gui so you don't have to.
I still don't see why anyone would say it's impossible and I'm not sure why I'm getting voted down for asking this technical question. If someone thinks I'm wrong they should at least explain it as you did.
I completely agree with you WRT downvoting... I'd much prefer a discussion like this to a buried comment, regardless of the merit of the original comment. Perhaps it was due to the perceived tone of your comment: "I don't understand why anyone would think it would be impossible" ~= "Who would be dumb enough to assume this isn't possible?" As for why anyone would claim the task is impossible - not enough imagination! :) Although it's more likely that they meant they thought it was impossible to achieve at a decent speed/framerate, which is a pretty reasonable assumption at first glance.
Technically, I think you're right - you could implement a pseudolayering system with only one canvas element. The limiting factor, however, is redrawing speed. You have essentially two options - every time a layer moves, you could redraw the entire canvas, which is conceptually easy but slow. Or you could do some calculation to determine exactly which pixels need to be redrawn - as you say, a matrix operation to determine a delta matrix. This may be faster than redrawing the entire canvas, but it gets much slower as you increase the number of layers. Speed may not seem like a huge issue here, but imagine clicking a layer and dragging it around - this would require constant (un-hardware-accelerated) canvas redrawing at ~10-30fps, which is probably pretty difficult to achieve with any significantly-sized canvas.
The brilliant canvas-on-top-of-canvas implementation avoids this problem altogether. While the layer being dragged still has to be redrawn, the process of doing so is made a lot easier because you don't have to shuffle around the data in the other layers in the process, you just have to worry about one layer at a time.
"I don't understand why anyone would think it would be impossible" ~= "Who would be dumb enough to assume this isn't possible?"
If that's how they feel about themselves they shouldn't take it out on me ;)
Back on topic, can there be multiple objects on a layer? If so what happens when you drag one on top of another object on the same layer? I haven't used the app, so this may be a dumb question. These are the sorts of things that gave me headaches when I made my audio player UI, and it seems to lead to the same sort of data shuffling that you'd have with multiple matrices.
Impossible might have been hyperbole on my part. I recall a discussion about a different, simpler HTML5 drawing app (no layers) here on HN in which someone claimed that HTML5 is no alternative to Flash based solutions since layers would be – and that’s how I remember it – impossible with Canvas. It is possible that he just said hard, not impossible.
I'm continuously impressed by the technical innovations of deviantArt. Some years ago they implemented a feature, where if you drag an image anywhere, a HUD pops up and you can drop this image into your favorites or collections. They have tons of neat (in terms of usability) stuff like that.
They also launch a new "version" of their site almost every year. Not just making it different, but better. For a 10 year old site with with 14 million members, that's very impressive. They haven't stopped innovating like so many of the larger sites do at some point.
They have also done a great job of managing content on their site, even with a relatively small staff... unlike some other sites ghrrm-ghe-etsy.yi-grhmtm.
It seems to slow down hugely after doing anything non-trivial (Chrome 5). It's not a hugely new idea, Oekaki boards have been around forever. Their execution is impressive though, throwing in a 'pro' version for free is something that throws a lot of people off, and paying for brushes is the real pay wall. I'd bet that combination builds a lot more fandom than the traditional approach.
As far as the registration wall, I don't think the application itself is the biggest part of this product. The integration with dA and the community in general is what makes this worthwhile. Best of luck to them.
Just did. The brushes are fully pressure sensitive. Works nicely. My only problem is that the website isn't fast enough to catch quick strokes. (just misses them)
Thanks for that note. I had no idea you could access pressure-sensitive events in Javascript, but it seems Wacom installs a browser plugin to expose a Javascript API (I assume that is how the app is getting it).
I was looking for a painting app like this just yesterday. Some of the brushes are very similar to this HTML5 drawing app: http://mrdoob.com/projects/harmony/ I wonder if they are related?
The sketchy one is superficially quite similar. Once I started drawing with it you can see it's using some different line algorithms though -- the sketching plays off of previously drawn lines (and earlier segments of the current line) instead of just the current draw-point.
Perfect drawing app for my iPad. This is a great example of the power of HTML and how Flash is getting less and less necessary for this kind of applications.
I was super excited about this until I tapped "Draw Now". And then I was taken to an account sign-up screen. And then I folded my ipad case, and put it away. I guess you need an account to save your drawings, but since I just want to check it out and not go through the signup process, it was a wall to me.
It is pretty much standard to have a deviant art account as a young up and coming designer/artist. I have yet to interview one that doesn't have one in fact.
It's annoying anyway because the button says 'Draw Now' I expect to 'Dive In' (as the subtext says). Instead, I have to fill in a obnoxiously long form, verify my email address, and go to the URL again. That's a strange definition of 'Now'.
It's not a new startup looking for traction. It's an existing community adding a new offering to their user base. The usual "registration wall" critique doesn't apply.
I also didn't register even though I wanted to Dive In ...
They're a company so their goal is (among other things) to make money which they do (among other things) by charging for premium membership. Assuming there's a business case for this (very cool) tool, the question is: will they make more money by allowing people to try the tool before signing up?
Seeing how the tool requires certain amounts 'points' for some of the brushes to be available, this would make the benefit of a premium account even more clear after toying with the tool.
So, to sum it up: for me, not being able to try out the tool immediately is a small frustration. Presumably, for other people without Deviant accounts this is also annoying. I believe, as argued above that they might be able to make more money if they let people play with the tool first. Regardless, that might not be their goal at all.
>Assuming there's a business case for this (very cool) tool
I'm in dA and I see a lot of people there who don't have access to expensive tools like photoshop, So I think they built this to enable more users to submit art. I don't know how it benefits dA, but as a user I just love it!
Here's another drawing app (fd: it's mine) with no walls: http://draw.to
Certainly not for the same crowd as Muro (which is great, BTW) but maybe someone here will find it useful! It's just a place to share quick, ad-hoc drawings. Here's some examples:
May I refer you to my project Colorillo http://colorillo.com/ ?
Also drawing with HTML5 Canvas but with real-time collaboration--though no art brushes (yet).
