I tried your demo for all of 5 minutes, what I saw it is really intuitive. The way you work with the image speaks to the way I expect drawing software to work. Well done.
this is very well done! I particularly enjoy that the presets offer the usual social media dimensions, which reminds me of an early Canva before it got monetized to shit.
i always look for this one feature before i adopt a drawing app - ability to paste in images from my clipboard. i imagine this is mostly just rendering a data:url. but it is so much better workflow than uploading images via some kind of drag and drop. tldraw and excalidraw both offer this now
Good job although it does not work as well on Firefox mobile as with Chrome (Android), some erratic behavior when clicking on the canvas or resizing with the "red rectangle".
> I would generally say it is a big probability either way.
I practice, though, I've never found that to be the case - almost no developer wants to use that tiny set of features only available on FF.
In practice, what I've found is exactly what this thread is complaining about: every developer assumes that those large set of features only found in chrome is found everywhere.
IME, if something runs in FF, it also runs in Chrome, while if something runs in Chrome it sometimes has problems on FF.
Very neat! I really like the alignment tools, makes roughing things in quick.
FYI: There's an issue with opacity when you draw ellipses with a different color stroke and reduce the opacity. You start seeing the fill shape behind the stroked outline. There's probably a few ways to fix that, depending on how you implemented it. The easiest might be to shrink the inner shape depending on the stroke width.
Being a developer who already made similar app in the past, I can understand work you put in into tihs.
Suggestion: To group multiple elements would be a nice feature to have, I had spent entire day sketching it in rough note book and then implement it in code.
Very nice! Congrats on launching it's very well made, love it.
When I placed a circle I immediately pressed control to keep the ratio of the object -- photoshop reflex ahah -- it would be nice to have a similar UX.
Humm not sure if the stringified state would fit wihtin the acceptable url size, but it would be very interesting indeed to be able to share a url with the same state
Ha, I’m a big fan of tldraw and literally* just 20 minutes ago I finished this “uncolouring” book:
https://lines.potato.horse
If I may add one piece of feedback: I’d allow users to choose the native colour picker instead of the HTML widgets. You can still style it without sacrificing accessibility.
[*] literally literally, not “literally” literally
There's never a need for React. Anything you can do in React can be done in plain JS.
The question is how fast you can do it and how easy it is to maintain. React simplifies the effects of state change, at a cost of doing more renders and diff. It's got nice properties for debugging, kinda like functional programming, especially as the thing gets bigger and more complex.
It's not magic. It just makes some things convenient. It seems to hit a sweet spot for ease of writing and maintaining. If you don't like it you don't have to use it.
This looks great, but within the first 5 seconds I'm surprised by the lack of an Undo/Redo facility. I can't imagine myself using a tool like this without it
Did you consider using any existing any canvas drawing libraries like Fabric.js? Having recently built an app around Fabric it’s nice to see some alternatives.
If you're looking for alternative canvas libraries, you can find a comparison test of some of them here[1]. Links to the libraries can be found in the GitHub linked to from that page.
49 comments
[ 3.9 ms ] story [ 190 ms ] threadi always look for this one feature before i adopt a drawing app - ability to paste in images from my clipboard. i imagine this is mostly just rendering a data:url. but it is so much better workflow than uploading images via some kind of drag and drop. tldraw and excalidraw both offer this now
There's a developer, much better than me, putting his soul into this, that's for sure.
Even building an MS Paint clone in the browser that has good UX on desktop as well as mobile is not an easy task.
I'm happy to have clicked (tapped) the link now that it has 8 comments. Wonder why I only read the headline 15 minutes ago.
Why? Wouldn't it make more sense to test on FF? If something works on FF, it's probably going to work on other browsers.
OTOH, if something works on chrome, there's a small probability of it working on other browsers.
I practice, though, I've never found that to be the case - almost no developer wants to use that tiny set of features only available on FF.
In practice, what I've found is exactly what this thread is complaining about: every developer assumes that those large set of features only found in chrome is found everywhere.
IME, if something runs in FF, it also runs in Chrome, while if something runs in Chrome it sometimes has problems on FF.
FYI: There's an issue with opacity when you draw ellipses with a different color stroke and reduce the opacity. You start seeing the fill shape behind the stroked outline. There's probably a few ways to fix that, depending on how you implemented it. The easiest might be to shrink the inner shape depending on the stroke width.
Suggestion: To group multiple elements would be a nice feature to have, I had spent entire day sketching it in rough note book and then implement it in code.
When I placed a circle I immediately pressed control to keep the ratio of the object -- photoshop reflex ahah -- it would be nice to have a similar UX.
ps. could you share state in url?
Really nice work!
If I may add one piece of feedback: I’d allow users to choose the native colour picker instead of the HTML widgets. You can still style it without sacrificing accessibility.
[*] literally literally, not “literally” literally
The beauty of the Web is that it’s easy to get started. By all means, make one without React.
The question is how fast you can do it and how easy it is to maintain. React simplifies the effects of state change, at a cost of doing more renders and diff. It's got nice properties for debugging, kinda like functional programming, especially as the thing gets bigger and more complex.
It's not magic. It just makes some things convenient. It seems to hit a sweet spot for ease of writing and maintaining. If you don't like it you don't have to use it.
Considering writing something like that in WASM. But it might have to be from scratch in that case.
[1] - https://benchmarks.slaylines.io/
How much time did it take you to develop this? I just see a few commits on GitHub.