11 ms·

Open-source canvas drawing web app, built using React

221 points by capela 3y ago

logical_proof 3y ago
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 3y ago
  Thanks! :)
codetrotter 3y ago
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 3y ago
  I could say some of my inspiration came from the good old Macromedia Fireworks :D
CharanSriram 3y ago
This is sick! What was the motivation for building it?
- capela 3y ago
  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 3y ago
    Any reflections / lessons learned from this project?
swyx 3y ago
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 3y ago
  That is very well thought! And probably not very difficult to implement. Just added it as a repo issue, thanks!
moritzwarhier 3y ago
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 3y ago
How do I scale proportionally. Typically this is done with the ctrl or shift key while dragging the corner.
- capela 3y ago
  Made an issue for it: https://github.com/diogocapela/flatdraw/issues/2 https://github.com/diogocapela/flatdraw/issues/2
conradfr 3y ago
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 3y ago
  I only tested it on Chrome mobile
  - lelanthran 3y ago
    > I only tested it on Chrome mobile 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.
    - plufz 3y ago
      I would generally say it is a big probability either way.
      - lelanthran 3y ago
        > 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.
    - k4rli 3y ago
      Says a lot about the state of web dev in 2023. "Works on Chrome" is good enough for the majority of devs.
cjf101 3y ago
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 3y ago
  Thanks for the feedback! I have created an issue for it here: https://github.com/diogocapela/flatdraw/issues/4 https://github.com/diogocapela/flatdraw/issues/4
jnettome 3y ago
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 3y ago
  What do you mean by "the canvas source code"? Do you mean the SVG code?
meet_zaveri 3y ago
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.
capela 3y ago
I think the UI is better when using it on the mobile version of Chrome
h1fra 3y ago
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.
dutzi 3y ago
Nice! Check out Konva and React Konva as well :)
bonestamp2 3y ago
Do you plan to support export/download as SVG?
mirekrusin 3y ago
Well done! +1 ps. could you share state in url?
- capela 3y ago
  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
  - duderific 3y ago
    I might direct you to this (found through another HN post) https://www.scottantipa.com/store-app-state-in-urls https://www.scottantipa.com/store-app-state-in-urls Really nice work!
rpastuszak 3y ago
Ha, I’m a big fan of tldraw and literally* just 20 minutes ago I finished this “uncolouring” book: https://lines.potato.horse 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 3y ago
Created some issues from your feedback. Also let you know that PRs are welcome! :)
willhackett 3y ago
This works really well, even on mobile safari. Nice work!
- capela 3y ago
  Glad it works nicely, thanks! :D
gumballindie 3y ago
Cool stuff - but there’s no need for react. Not sure why web developers are fixated on that framework.
- Waterluvian 3y ago
  “Pfff. I could make that shot,” said the spectator on the couch. The beauty of the Web is that it’s easy to get started. By all means, make one without React.
- jfengel 3y ago
  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.
- tchaffee 3y ago
  Can you give a link to your version that doesn't use React so we can see the difference?
zulu-inuoe 3y ago
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
- swyx 3y ago
  ahh yeah i missed that there was no undo. yes please OP :)
aosaigh 3y ago
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.
- herewulf 3y ago
  Any similar libs for drawings that snap together, like in a flowchart? Considering writing something like that in WASM. But it might have to be from scratch in that case.
- rikroots 3y ago
  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. [1] - https://benchmarks.slaylines.io/ https://benchmarks.slaylines.io/
Lamad123 3y ago
bom trabalho, although I think you could've done without the torturous bloat of react!
NayamAmarshe 3y ago
This is really nice! Thanks for the great work! How much time did it take you to develop this? I just see a few commits on GitHub.
wg0 3y ago
It's snappy. How come react's virtual dom isn't a problem here?
imposter 3y ago
Very cool app man!
timokoesters 3y ago
I made a proof of concept drawing program with Rust and wgpu, compiled to wasm to run in your browser: https://plotf.xyz/drawing https://plotf.xyz/drawing The idea is that you can zoom in infinitely with your mousewheel (or two-finger drag).
DoryMinh 3y ago
the code is very elegant, simple. Thank you for sharing the source code.

221 points by capela 3y ago

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 3y ago
Thanks! :)

codetrotter 3y ago

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 3y ago
I could say some of my inspiration came from the good old Macromedia Fireworks :D

CharanSriram 3y ago

This is sick! What was the motivation for building it?

capela 3y ago
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 3y ago
  Any reflections / lessons learned from this project?

swyx 3y ago

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 3y ago
That is very well thought! And probably not very difficult to implement. Just added it as a repo issue, thanks!

moritzwarhier 3y ago

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 3y ago

How do I scale proportionally. Typically this is done with the ctrl or shift key while dragging the corner.

capela 3y ago
Made an issue for it: https://github.com/diogocapela/flatdraw/issues/2 https://github.com/diogocapela/flatdraw/issues/2

conradfr 3y ago

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 3y ago
I only tested it on Chrome mobile
- lelanthran 3y ago
  > I only tested it on Chrome mobile 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.
  - plufz 3y ago
    I would generally say it is a big probability either way.
    - lelanthran 3y ago
      > 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.
  - k4rli 3y ago
    Says a lot about the state of web dev in 2023. "Works on Chrome" is good enough for the majority of devs.

cjf101 3y ago

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 3y ago
Thanks for the feedback! I have created an issue for it here: https://github.com/diogocapela/flatdraw/issues/4 https://github.com/diogocapela/flatdraw/issues/4

jnettome 3y ago

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 3y ago
What do you mean by "the canvas source code"? Do you mean the SVG code?

meet_zaveri 3y ago

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.

capela 3y ago

I think the UI is better when using it on the mobile version of Chrome

h1fra 3y ago

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.

dutzi 3y ago

Nice! Check out Konva and React Konva as well :)

bonestamp2 3y ago

Do you plan to support export/download as SVG?

mirekrusin 3y ago

Well done! +1 ps. could you share state in url?

capela 3y ago
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
- duderific 3y ago
  I might direct you to this (found through another HN post) https://www.scottantipa.com/store-app-state-in-urls https://www.scottantipa.com/store-app-state-in-urls Really nice work!

rpastuszak 3y ago

Ha, I’m a big fan of tldraw and literally* just 20 minutes ago I finished this “uncolouring” book: https://lines.potato.horse 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 3y ago

Created some issues from your feedback. Also let you know that PRs are welcome! :)

willhackett 3y ago

This works really well, even on mobile safari. Nice work!

capela 3y ago
Glad it works nicely, thanks! :D

gumballindie 3y ago

Cool stuff - but there’s no need for react. Not sure why web developers are fixated on that framework.

Waterluvian 3y ago
“Pfff. I could make that shot,” said the spectator on the couch. The beauty of the Web is that it’s easy to get started. By all means, make one without React.
jfengel 3y ago
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.
tchaffee 3y ago
Can you give a link to your version that doesn't use React so we can see the difference?

zulu-inuoe 3y ago

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

swyx 3y ago
ahh yeah i missed that there was no undo. yes please OP :)

aosaigh 3y ago

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.

herewulf 3y ago
Any similar libs for drawings that snap together, like in a flowchart? Considering writing something like that in WASM. But it might have to be from scratch in that case.
rikroots 3y ago
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. [1] - https://benchmarks.slaylines.io/ https://benchmarks.slaylines.io/

Lamad123 3y ago

bom trabalho, although I think you could've done without the torturous bloat of react!

NayamAmarshe 3y ago

This is really nice! Thanks for the great work! How much time did it take you to develop this? I just see a few commits on GitHub.

wg0 3y ago

It's snappy. How come react's virtual dom isn't a problem here?

imposter 3y ago

Very cool app man!

timokoesters 3y ago

I made a proof of concept drawing program with Rust and wgpu, compiled to wasm to run in your browser: https://plotf.xyz/drawing https://plotf.xyz/drawing The idea is that you can zoom in infinitely with your mousewheel (or two-finger drag).

DoryMinh 3y ago

the code is very elegant, simple. Thank you for sharing the source code.