[HN Gopher] Open-source canvas drawing web app, built using React
___________________________________________________________________
Open-source canvas drawing web app, built using React
Author : capela
Score : 127 points
Date : 2023-08-07 18:50 UTC (4 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| jnettome wrote:
| This tool is super straightforward and I just love it. A killer
| feature to me is the ability to export the canvas source code.
| capela wrote:
| What do you mean by "the canvas source code"? Do you mean the
| SVG code?
| bonestamp2 wrote:
| Do you plan to support export/download as SVG?
| codetrotter wrote:
| This is nice! The UI is very professional. It even reminds me a
| bit of some versions of Adobe Flash authoring software in the way
| that it looks :D
| capela wrote:
| I could say some of my inspiration came from the good old
| Macromedia Fireworks :D
| CharanSriram wrote:
| This is sick! What was the motivation for building it?
| capela wrote:
| I just love building web apps! :D This was an attempt to build
| a semi-decent drawing app, but I was demotivating building it
| by myself
| ahefner wrote:
| Any reflections / lessons learned from this project?
| meet_zaveri wrote:
| 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.
| moritzwarhier wrote:
| Just wow. I agree with the other comments, the UI is not only
| snappy but also very intuitive.
|
| 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.
| euniceee3 wrote:
| How do I scale proportionally. Typically this is done with the
| ctrl or shift key while dragging the corner.
| capela wrote:
| Made an issue for it:
| https://github.com/diogocapela/flatdraw/issues/2
| h1fra wrote:
| 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.
| swyx wrote:
| 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
| capela wrote:
| That is very well thought! And probably not very difficult to
| implement. Just added it as a repo issue, thanks!
| capela wrote:
| I think the UI is better when using it on the mobile version of
| Chrome
| gumballindie wrote:
| Cool stuff - but there's no need for react. Not sure why web
| developers are fixated on that framework.
| dutzi wrote:
| Nice! Check out Konva and React Konva as well :)
| rpastuszak wrote:
| 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
| capela wrote:
| Created some issues from your feedback. Also let you know that
| PRs are welcome! :)
| willhackett wrote:
| This works really well, even on mobile safari. Nice work!
| capela wrote:
| Glad it works nicely, thanks! :D
| logical_proof wrote:
| 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.
| capela wrote:
| Thanks! :)
| conradfr wrote:
| 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".
| capela wrote:
| I only tested it on Chrome mobile
| mirekrusin wrote:
| Well done! +1
|
| ps. could you share state in url?
| capela wrote:
| 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
| cjf101 wrote:
| 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.
| capela wrote:
| Thanks for the feedback! I have created an issue for it here:
| https://github.com/diogocapela/flatdraw/issues/4
___________________________________________________________________
(page generated 2023-08-07 23:00 UTC)