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.
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";
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.
Thank you very much for your help, it helped me a lot in creating the application
great job, Adam
many thanks for sharing your knowledge
subbed
This is amazing please keep it up
Thank you Dejan!
stratX and startY variable never use?
Very helpful
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.
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.
Can you please add a feature to use an eraser and erase the stuff that we want
How can I add eraser
If you draw on a wacom tablet, then the line makes strange loops (first jumps forward, then takes a few steps back)
hey dude , can you tell me the name of the VS CODE theme you use please?
is it possible to add a stabiliser to the line?
can we add this app in our website ?
How to add undo tool in this
I can't use it for mobile devices , you can help me ?
Merci Beaucoup :)
Sounds stupid, but how can i make it so the lines head the opposite way the mouse goes?
How to fill?
When can I be this good…JavaScript is a whole lot
Its easy write lots of code and try to write first on your own it will take hours to do it on your own but your mind will adapt and grow
what does e => mean?
Function
Nice, how to save the image then ?
get your phone, take a pic, and send to 5 friends for backup
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
Sir please start app developer series
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?
mobile friendly?
To make it mobile friendly you should use gesture support I’d probably choose hammerJs