Add Text To HTML Canvas | Drawing App Tutorial Part 6

Hey! It's been a while. Today we are learning to add text to our drawing app as I got few requests for this. Another long one, might need to refactor this app at some point so it's less hackey! Hope you enjoy :)
Useful Links:
GitHub: github.com/redhwannacef/youtu...
Drawing App Series: • Build a Drawing App wi...
MDN Docs Text: developer.mozilla.org/en-US/d...
MDN Docs Measure Text: developer.mozilla.org/en-US/d...
Music:
• Play It Again, Sam
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!

[@biomathcode]

Hey, keep making video like this. Executing small feature that a lot of apps use but seems very difficult for a newbie developer. It really help us understand how things are working under the hood.

[@RedhwanNacef]

Happy it helps! Yes I will do, been struggling to find time lately but will hopefully be back on it after new year.

[@koranonta1169]

Super cool. It's just what I'm looking for. Thank you Redhwan

[@RedhwanNacef]

Glad it helped. 🙂

[@salimmerazga6383]

I'm working on an eLearning platform and your tutorial gave me a lot of ideas. Thanks :)

[@RedhwanNacef]

Nice! Glad to this helped. All the best with building your platform.

[@andinuruljihad2912]

incredible tutorial man. so glad i found this channel.

[@RedhwanNacef]

Glad you enjoyed it, welcome!

[@mx2010]

Thank you so much! This project was really interesting and well explained :D

[@RedhwanNacef]

Glad it was helpful!

[@AbhishekKumar12414]

thanks for such an amazing series, can you please create the content or share the concept for pan and zoom. where users can zoom and draw, or move to a specific area and zoom and draw.

[@RedhwanNacef]

Thanks for the suggestion, yea I've been meaning to do this one for a while, I will definitely get round to it at some point!

[@pobch6796]

Thanks for the awesome tutorial series! I'm currently on part2 and trying to catch up to this part.
Next EP request: Is it possible to cover Pan&Zoom feature in the future?

[@RedhwanNacef]

Glad you are enjoying it. Yes will add that to the list!

[@vincenthus399]

Yes that would be great!!!! Awesome videos, really made my day.

[@sonnypham6846]

Same here. I'd love to see a tutorial on this

[@mjad7]

@@RedhwanNacef Second this :)

[@youtubeviewer7077]

Great series, well organized and well delivered, thanks! +1 for suggestion of pan/zoom video from other comments.
IMO, it would be better to avoid complicating with extra frameworks (React) and languages (JSX) when they don't add any value for such a simple single-file app, and in fact they only obfuscate the underlying principles and restricts the audience (I usually skip over any videos involving React, glad I didn't this time :).

[@RedhwanNacef]

Thanks and noted!
Yes it's a good point, I've thought about this a few times and I came to the conclusion that doing it with out the framework most of the time adds enough boiler plate which also distracts from the main point. I will continue to revisit, thanks for the feedback!

[@TheChamberRoomExperience]

What canvas are you talking about? I was looking for putting words on a canvas then hand it on my wall

[@rugvedb9842]

Awesome!!

[@RedhwanNacef]

Thanks Again!

[@TilSkywalker]

Awesome tutorial! I would love to know how i couldsave and load the drawings into the application. That shouldnt be too hard since we already save all the elements.

[@RedhwanNacef]

Thanks! Yes exactly, there are a few different ways to store. But simply put as you could just store a simple json object that represents the entire state somewhere, then just a case of storing/loading that object. Excalidraw actually do this and talk about is on their blog: blog.excalidraw.com/browser-fs-access/#the-file-system-access-api.

[@TilSkywalker]

@@RedhwanNacef Awesome! That will help me a lot!

[@vishvkakadiya5014]

This is amazing 🤟

[@RedhwanNacef]

Thanks!

[@IDarkZera]

It's there a possibility for you to share your code? It would be nice if I could see and change the code for testing before start coding mine.
I'm looking for an application that I could create and edit an overlay (which is a canvas where I can upload images and insert texts) to use into OBS (Open Broadcast Software) as a Browser Source, which loads and displays a page using it's URL allowing me to record it while I create something in the application without need to record the entire screen, just the web source. I think a "Drawing app" like that could work well, but I need to test it before start to learn and practice how to code something like that...

[@RedhwanNacef]

All the code is on GitHub. The description has the links 😊 That sounds like a cool project, hope it goes well!

[@alirajabpour7068]

Yooo man !! Thanks for your awesome tutorial . Please in your next part learn us how to paint the inside of the elements by clicking the mouse . If you have a document to teach this topic ,I would appreciate it If you could introduce it to me, because I really need it

[@RedhwanNacef]

Hi! Thanks, glad you enjoyed it. I intend to pick this series up again soon so I will add this to my todo list of features. I helped someone else out with colours on this branch: github.com/redhwannacef/youtube-tutorials/compare/main...colours. This might help you a bit.

[@WhoIm1234]

@@RedhwanNacef Wheennnnn????

[@yeasirhossain2696]

can you make a tutorial to add circle with the selection functionalities

[@RedhwanNacef]

Will do!

[@user-bi6fn4nq9f]

hey, after applying the action writing to text area, its not updating the text area position on the browser, as shown in this video. please get back to this comment and suggest something if I missed anything.

[@RedhwanNacef]

Hi, it's very difficult for me to suggest without seeing the code. If you have a link to the code I would be happy to take a look. Otherwise my repo is in the description if you want to take a look and see if you are missing anything.

[@user-bi6fn4nq9f]

@@RedhwanNacef Hey, it's working now, thank you for this tutorial and the repo. it is just what I was looking for.🤝

[@Konradulations]

this was very well executed and easy to follow.
I commented on your previous video the other day because I did not see you uploaded this already.
if you want to continue this series, I would be interested in touch support. Any plans or info about adding this?
thanks!

[@Konradulations]

I was wondering if you might be interested to work on my project, can I contact you somehow?

[@RedhwanNacef]

Glad it was helpful! No problem.
I haven't had any plans on adding that yet, but I will add it to my todo list for the future!

[@RedhwanNacef]

You can contact my via email: redhwannacef.com/contact/.

[@Konradulations]

@@RedhwanNacef thanks I just sent you an email :)

[@francovedia5584]

thanks

[@user-fe4qx9yb4s]

Eraser?

[@RedhwanNacef]

Noted

[@SongsCombo]

Hi

[@RedhwanNacef]

Hello 😊

[@francovedia5584]

thanks