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:

Music:
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.

[koranonta]

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

[andinuruljihad]

incredible tutorial man. so glad i found this channel.

[AbhishekKumar]

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.

[pobch]

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?

[salimmerazga]

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

[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.

[mx]

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

[youtubeviewer]

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 :).

[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...

[yeasirhossain]

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

[alirajabpour]

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

[TheChamberRoomExperience]

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

[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!

[mayurigurle]

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.