Add Perfect Freehand To HTML Canvas | Drawing App Tutorial Part Pt 5
ฝัง
- เผยแพร่เมื่อ 12 ส.ค. 2021
- Hey Everyone, thought we would revisit the drawing app as I had a couple of people request the pencil too. In this video we implement this with a tool called perfect freehand. This videos a bit longer than I would like, but that's natural as the app grows (especially if like me you are hacking things in!). Regardless, I hope you enjoy it :)
Useful Links:
GitHub: github.com/redhwannacef/youtu...
Perfect-Freehand: github.com/steveruizok/perfec...
Drawing App Series: • Build a Drawing App wi...
Music:
• Most Requested
Huge thank you to Harris Heller for providing copyright-free music.
Hey everyone! My name is Redhwan Nacef (Red for short). In this channel, I'm hoping to share my thoughts on software engineering, coding, management, and all things tech. I hope you enjoy! - วิทยาศาสตร์และเทคโนโลยี
![[ไฮไลต์] ฟุตบอลชาย ญี่ปุ่น vs ปารากวัย รอบแบ่งกลุ่ม | โอลิมปิก 2024](http://i.ytimg.com/vi/X_BeGaAv1oM/mqdefault.jpg)
Hey, perfect-freehand creator here. Love the tutorial!
Hey, thanks a lot for taking the time to leave a comment, glad you enjoyed it! I hope I did it justice, it is a great tool. Keep up the great work!
Thanks for your awesome freehand man !!! But I think it has a bug , in freehands demo ,if we change the linesize, size of all of line change . in this tutorial we have this problem do you have solotion for that ??
Thanks!! . I have coded watching you. Learned so much from this series.
Great to hear! Thanks :)
Man thank you very much for your work and teaching :)
This is amazing!!!! Thanks Redhwan!
Glad you enjoyed it 😊
Thank you for wonderful lecture!
Glad you enjoyed it!
I am a huge fan of perfect-freehand I’m in the process of rolling out an innovative artistic experience and searching for developer who be willing to work for an equity piece. Please reach out to me if you’d like to learn more. Thank you for such wonderful videos.
thanks
Thank you so much for this video. Would be really helpful if you are planning to make a video on typing and adding text into canvas.
Glad you enjoyed it. Thanks for the suggestion, I will add that to my todo list.
@@RedhwanNacef I also would be interested in this. Thanks for the serries!
Okay, I'm on it!
@@RedhwanNacef on that note, can you maybe also cover how to include mobile input?
Keep them as array arrays, instead of object arrays. Saves lot's of memory and processing time
Hey there! Thanks a lot for this tutorial :) I've been following from the first part of the drawing app.
And I have some doubts, could you please let me know if you've got any platforms where I could contact you
Hi! You're very welcome, happy to hear you have been following :)
Happy to try help, you can find my contact details here: redhwannacef.com/contact/
I'm looking for a programming tutorial on stylus pen pressure type drawing app. ??? YT just wants sell me tablets and popular drawing apps. :/
Really awesome videos! I got a lot of help from all of your videos, and I clicked every 'likes' button on your videos. 😍
If you have some time, would you spare some time to answer the questions below?
1. How do you automatically get the name or type of the parameters like 'name: 'tl'' or 'index: number'? (For example, when you type 'index', the editor immediately shows ': number' beside it, and when you type 'tl', shows 'name :' et cetra)
2. How do you make functions automatically after you declare the name? (In the videos, after declaring the name of the function first, you click and click something but I couldn't find the similar menus on my editor - vscode)
Thanks a lot again!
Glad it helped! Thanks for the likes 🙂
1. For this it happens automatically or I type 'ctrl + space'.
2. For this I press 'option/alt + enter' then the dropdown shows be options.
This may be because I use different in IDE, I use IntelliJ which give me this out of the box. I am sure vscode will have these features, but I'm afraid I don't know how to enable them sorry!
how to add the feature to support drawing with finger on touch screens? Btw nice video series!
I’ve never tried this in touch screen to see what needs adding I’m afraid. Will note that down and might try add it the series at some point!
Can you make a video to fill colour inside the drawing with onclick button event?
Will add this to my todo list.
there is any way to use custom color in perfect-freehand ?
Yes. Go to the Perfect Freehand docs. You can render the stroke as an SVG Path2D and give any color
Thanks for this awesome freehand
But there is a problem , if we want to change the color of a line, all of them change ,how to fix this ??
Anytime! Yes you would need to keep the color as part of each individual element in the state for this to work.
@@RedhwanNacef I did exactly the same thing, inside the uselayout , i put context.fillStyle = lineColor (line color is the state i have define )
Sounds good! 👌🏼
@@RedhwanNacef but didn't work 🤦🏻🤦🏻 But the color of all the lines changes when I change the color. If you can try it yourself, thank you again for your excellent teaching. I learned a lot from you.
Ah I see, I hacked together something real quick: github.com/redhwannacef/youtube-tutorials/compare/main...colours. This works for the pencil, rectangle and line. I may have broken something else but this should give you the right idea. Which is just adding it to the state somehow, then including it when drawing. Is this what you were looking for?
why is switch statement not a best way for larger application? I can't come up with other solution rather than using switch statement.
I guess it all depends on your design. In this case I just meant that because I am adding the same switch statement in multiple place I could use a better design to avoid this. You will always need some sort of switch/conditional logic, but it can be restricted to just the once. An example would be to use something like the strategy pattern to just pass implementations of an interface everywhere instead of rechecking the type. Hope that makes sense.