Create a simple drawing app using javascript and HTML5 canvas
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- 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
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.
This is amazing please keep it up
Thank you Dejan!
great job, Adam
many thanks for sharing your knowledge
subbed
Can you please add a feature to use an eraser and erase the stuff that we want
Hi! Is it possible to set the starting stroke color other different than black? Thanks a lot! Very nice video.
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";
@@jonnymoebjerg Thanks a lot, mate!
@@puno9585 You are welcome! :) Feel free to ask me more questions.
If you draw on a wacom tablet, then the line makes strange loops (first jumps forward, then takes a few steps back)
stratX and startY variable never use?
Merci Beaucoup :)
Sir please start app developer series
hey dude , can you tell me the name of the VS CODE theme you use please?
Sounds stupid, but how can i make it so the lines head the opposite way the mouse goes?
I can't use it for mobile devices , you can help me ?
is it possible to add a stabiliser to the line?
How can I add eraser
can we add this app in our website ?
How to add undo tool in this
Nice, how to save the image then ?
get your phone, take a pic, and send to 5 friends for backup
How to fill?
How do you get the drawing to work on mobile devices?
Use touchdown, touchmove and other touch events rather than using click, change etc....
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.
@@graybab thanks
what does e => mean?
Function
mobile friendly?
To make it mobile friendly you should use gesture support I’d probably choose hammerJs
sir i want code of this
The source code is available in the video's description
@@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?