Create a simple drawing app using javascript and HTML5 canvas

In this video, I'll show you how to create a drawing app using javascript and HTML5 canvas. By the end of the video, you'll have a basic understanding of the canvas and how to work with it using javascript. You'll also learn the basics of event handling within the browser.
Source code: codepen.io/jav...
Where you can find me?
🔗 Links:
* 🍺 Support free education and buy me a beer: ko-fi.com/adam...
* 💬 Discord: / discord
* 📧 Newsletter: www.getrevue.c...
* ✍️ Blog: dev.to/javascr...
* 🐦 Twitter: / dev_adamnagy
* 📷 Instagram: / javascriptacademy

[@muratusubaliev3533]

Nice informative content! Thank you!. I was searching for the web technology behind web application in which user able to create shapes, duplicating them, copy/pasting, adding text box and move it/ resize it vice versa. Like in web apps: mapbox, figma, online powerpoint, lucid charts etc...
I do not know where to start.

[@dejankarakasevic3791]

This is amazing please keep it up

[@JsAcademyOfficial]

Thank you Dejan!

[@samdavepollard]

great job, Adam
many thanks for sharing your knowledge
subbed

[@rayyanabdulwajid7681]

Can you please add a feature to use an eraser and erase the stuff that we want

[@puno9585]

Hi! Is it possible to set the starting stroke color other different than black? Thanks a lot! Very nice video.

[@jonnymoebjerg]

Hi! In the .js file, put this in:
//Set stroke HTML element value
document.getElementById("stroke").value = "#ffd500";
//Set actual stroke color
ctx.strokeStyle = "#ffd500";

[@puno9585]

@@jonnymoebjerg Thanks a lot, mate!

[@jonnymoebjerg]

@@puno9585 You are welcome! :) Feel free to ask me more questions.

[@uginh2rov798]

If you draw on a wacom tablet, then the line makes strange loops (first jumps forward, then takes a few steps back)

[@zainul_abid]

stratX and startY variable never use?

[@marcfauve6971]

Merci Beaucoup :)

[@jnvsexam]

Sir please start app developer series

[@hossamhatem6092]

hey dude , can you tell me the name of the VS CODE theme you use please?

[@oandrezin3091]

Sounds stupid, but how can i make it so the lines head the opposite way the mouse goes?

[@phucphanhoang1918]

I can't use it for mobile devices , you can help me ?

[@blueberry1874]

is it possible to add a stabiliser to the line?

[@Princeconceptdesigns]

How can I add eraser

[@Adilxec]

can we add this app in our website ?

[@hudamulla9050]

How to add undo tool in this

[@BenoitAdam2]

Nice, how to save the image then ?

[@CanadianCatDaddy]

get your phone, take a pic, and send to 5 friends for backup

[@GamerWhoTouchedGrass]

How to fill?

[@rohansharma555]

How do you get the drawing to work on mobile devices?

[@yashakayash4888]

Use touchdown, touchmove and other touch events rather than using click, change etc....

[@graybab]

Replace "mousemove", "mousedown", etc. with "pointermove", "pointerdown", etc. etc.
And don't forget to add: "touch-action: none;" to your css for the canvas or it'll be glitchy.

[@vaibhavjain79]

@@graybab thanks

[@siyapatil4098]

what does e => mean?

[@Princeconceptdesigns]

Function

[@CanadianCatDaddy]

mobile friendly?

[@JsAcademyOfficial]

To make it mobile friendly you should use gesture support I’d probably choose hammerJs

[@csr4969]

sir i want code of this

[@JsAcademyOfficial]

The source code is available in the video's description

[@yavorgerdzhikov-velomotori]

@@JsAcademyOfficial Hi guys!
How can I get one piece of code to put on my website and start working? I am confused to be honest:) Any idea?