TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Open-source canvas drawing web app, built using React

221 pointsby capelaalmost 2 years ago

27 comments

zulu-inuoealmost 2 years 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
评论 #37042607 未加载
conradfralmost 2 years 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".
评论 #37041043 未加载
logical_proofalmost 2 years 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.
评论 #37039625 未加载
aosaighalmost 2 years 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.
评论 #37047647 未加载
评论 #37045522 未加载
cjf101almost 2 years ago
Very neat! I really like the alignment tools, makes roughing things in quick.<p>FYI: There&#x27;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&#x27;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.
评论 #37041722 未加载
codetrotteralmost 2 years 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
评论 #37039703 未加载
moritzwarhieralmost 2 years ago
Just wow. I agree with the other comments, the UI is not only snappy but also very intuitive.<p>There&#x27;s a developer, much better than me, putting his soul into this, that&#x27;s for sure.<p>Even building an MS Paint clone in the browser that has good UX on desktop as well as mobile is not an easy task.<p>I&#x27;m happy to have clicked (tapped) the link now that it has 8 comments. Wonder why I only read the headline 15 minutes ago.
timokoestersalmost 2 years ago
I made a proof of concept drawing program with Rust and wgpu, compiled to wasm to run in your browser: <a href="https:&#x2F;&#x2F;plotf.xyz&#x2F;drawing" rel="nofollow noreferrer">https:&#x2F;&#x2F;plotf.xyz&#x2F;drawing</a><p>The idea is that you can zoom in infinitely with your mousewheel (or two-finger drag).
jnettomealmost 2 years 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.
评论 #37041311 未加载
NayamAmarshealmost 2 years ago
This is really nice! Thanks for the great work!<p>How much time did it take you to develop this? I just see a few commits on GitHub.
euniceee3almost 2 years ago
How do I scale proportionally. Typically this is done with the ctrl or shift key while dragging the corner.
评论 #37041703 未加载
meet_zaverialmost 2 years ago
Being a developer who already made similar app in the past, I can understand work you put in into tihs.<p>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.
h1fraalmost 2 years ago
Very nice! Congrats on launching it&#x27;s very well made, love it.<p>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.
swyxalmost 2 years 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.<p>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
评论 #37040071 未加载
willhackettalmost 2 years ago
This works really well, even on mobile safari. Nice work!
评论 #37041682 未加载
capelaalmost 2 years ago
Created some issues from your feedback. Also let you know that PRs are welcome! :)
wg0almost 2 years ago
It&#x27;s snappy. How come react&#x27;s virtual dom isn&#x27;t a problem here?
capelaalmost 2 years ago
I think the UI is better when using it on the mobile version of Chrome
CharanSriramalmost 2 years ago
This is sick! What was the motivation for building it?
评论 #37040001 未加载
bonestamp2almost 2 years ago
Do you plan to support export&#x2F;download as SVG?
Lamad123almost 2 years ago
bom trabalho, although I think you could&#x27;ve done without the torturous bloat of react!
rpastuszakalmost 2 years ago
Ha, I’m a big fan of tldraw and literally* just 20 minutes ago I finished this “uncolouring” book: <a href="https:&#x2F;&#x2F;lines.potato.horse" rel="nofollow noreferrer">https:&#x2F;&#x2F;lines.potato.horse</a><p>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.<p>[*] literally literally, not “literally” literally
mirekrusinalmost 2 years ago
Well done! +1<p>ps. could you share state in url?
评论 #37041169 未加载
DoryMinhalmost 2 years ago
the code is very elegant, simple. Thank you for sharing the source code.
imposteralmost 2 years ago
Very cool app man!
dutzialmost 2 years ago
Nice! Check out Konva and React Konva as well :)
gumballindiealmost 2 years ago
Cool stuff - but there’s no need for react. Not sure why web developers are fixated on that framework.
评论 #37042121 未加载
评论 #37042460 未加载
评论 #37045940 未加载