@@checkonene Probably for mobile you have to use touch events, here we are using click events. It's been 7 months now so you must have figured that out by now :p
Hey, thank you for creating this channel. Your tutorials are great..! I am mobile developer transitioning to a Web Dev and this tutorials are helping me a lot!! Thank you! Keep it up!
Another fantastic video. You simplify things so well. love the small snippets. They provide a good basic understanding to help you explore on your own! So much better than the long code-a-long tutorials!
Can I just say that your videos are fantastic! The way you teach is straight forward and to the point and really helps me ACTUALLY learn about the topic you are presenting. After a lot of your tutorials, I feel like "Ok, now I can use these new skills to build my own project". A much better feeling when the information actually sinks in. I hope you keep up many more videos in the future!
Just a tip: when using the: canvas.addEventListener("mousedown", startPosition); canvas.addEventListener("mousemove", draw); Instead of : canvas.addEventListener("mouseup", endPosition); use: window.addEventListener("mouseup", endPosition); Because when i put canvas instead of window when the cursor leave the tab the line Will continue when mouseup event happening outside the tab
If you don't do a full screen canvas you can modify the lineTo to lineTo(e.clientX - this.offsetLeft, e.clientY - this.offsetTop) to align the stroke to the pointer
I did this, and while it got my cursor closer, I had to finetune the code to get it exactly at the tip of my cursor. changing my lineTo and moveTo to the following code alleviated the issue: (e.layerX - (this.offsetLeft + 15), e.layerY - (this.offsetTop + 15));
I guess Im randomly asking but does someone know of a trick to get back into an Instagram account? I was stupid forgot the account password. I love any tips you can offer me.
Great video! As a quick tip to anyone wanting to make something like this, adding canvas.addEventListener('mouseout', finishedPosition); prevents the app from getting confused if you leave the confines of the canvas.
I don't really comment on videos but man you deserve praise! You explained it simply and clearly and I enjoyed watching till the end! Btw, has anyone tried saving the whole drawing to a variable? I plan to include the data in my form together with the other inputs. Thank you :)
I see that you are a good person. Keep that it's really rare. You are awesome my buddy o my pall. Thank you. I watched many of your videos already. ahhaha :D
Eyyy man, thanks. With this video I synthesized two days of research for an artistic composition challenge. I don't know .Js, I study Html and will use Tag . Kind regards from Colombia.
Wonderful practical tutorial on drawing CANVAS web application in HTML, CSS, HTML 5, CSS 3, JavaScript etc., Thanks to the great UA-cam and Mr. Dev Ed. HTML 5, CSS 3, JavaScript technologies are amazing. We can design and develop fantastic web applications.
Hello from France! Thank you for your tutorials. you have the gift of making easy what seems me so complicated! I tried the canvas.It works but got a problem as there is a scroll that shifts the writing. seems to be the fixed navbar..an idea?
Thanks for making this video, actually I have a question could you please make a video that how can we draw on an image using HTML and javascript? I mean to upload the image and then draw on that image and then save it. thanks in advance.
What extension do you use for auto correcting your code. I noticed when you write single quotes, like: 'red', your vscode auto corrected it to double quotes and semi colon, like: "red";
Thank you for the tutorial but there is major bug in your code. if the mouse goes out of canvas range and then return to canvas range you will be drawing line even if you dont click the mouse.
Hey thank you for this tuto ! I just meet a problem. I can't draw when is an other format like smartphone or tablet . If you can help i will be very thankful !
Hi! I just wanna ask if Canvas is suited for developing a 2D CAD web app, or is there any existing libraries that handle better object rendering? In writing so, do you have any recommendations?
I hate that most people don’t explain anything; so thank you!
dear god a thousand tutorials on how to use the canvas and yours was the only understanable and to-the-point one. Thanks!
You saved my life ! I didn't understood anything with canvas, and with your simple example, i understood !!! Thank you
Yeyyy that makes me happy!
@@developedbyed Hi, does this work for mobile? TIA
@@developedbyed Now I have my own 2d paint program. It's mine now.
@@braindeveloperdimensional5579 lol
@@checkonene Probably for mobile you have to use touch events, here we are using click events. It's been 7 months now so you must have figured that out by now :p
Hey, thank you for creating this channel. Your tutorials are great..! I am mobile developer transitioning to a Web Dev and this tutorials are helping me a lot!! Thank you! Keep it up!
Another fantastic video. You simplify things so well. love the small snippets. They provide a good basic understanding to help you explore on your own! So much better than the long code-a-long tutorials!
Thanks for the 1k Subs everybody!
Thank you.
Hi do you have a tutorial on how to save the drawing as an image to the server and using the file name?
Today you've reached 32k yo😊🤗
@@stevelawless1
use canvasElement.toDataURL()
122k - exponential.
"thank you so much for 1000 subscribers"
a year later, 48 times more subs
Now 552k xD
Juan Carlos Ramón Condezo wait how did he blow up so quickly
5 months later, 621k
@Joshua Nicolas shut up 1 person on 2 accounts
WTF I just checked on this comment he’s on 600k what
Can I just say that your videos are fantastic! The way you teach is straight forward and to the point and really helps me ACTUALLY learn about the topic you are presenting. After a lot of your tutorials, I feel like "Ok, now I can use these new skills to build my own project". A much better feeling when the information actually sinks in. I hope you keep up many more videos in the future!
Just a tip:
when using the:
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mousemove", draw);
Instead of :
canvas.addEventListener("mouseup", endPosition);
use:
window.addEventListener("mouseup", endPosition);
Because when i put canvas instead of window when the cursor leave the tab the line Will continue when mouseup event happening outside the tab
The drawing in the beginning was awesome!
You can add in html for a color selector
Kim Kardasian right there, fantastic. Easy peazy lemon squeezano.
how can i resize it and also how can i erase the line?
If you don't do a full screen canvas you can modify the lineTo to lineTo(e.clientX - this.offsetLeft, e.clientY - this.offsetTop) to align the stroke to the pointer
I did this, and while it got my cursor closer, I had to finetune the code to get it exactly at the tip of my cursor.
changing my lineTo and moveTo to the following code alleviated the issue:
(e.layerX - (this.offsetLeft + 15), e.layerY - (this.offsetTop + 15));
This was beautiful. You explained everything so well. And earned yourself a subscriber. Please keep up the good work!
I guess Im randomly asking but does someone know of a trick to get back into an Instagram account?
I was stupid forgot the account password. I love any tips you can offer me.
Great video!
As a quick tip to anyone wanting to make something like this, adding canvas.addEventListener('mouseout', finishedPosition);
prevents the app from getting confused if you leave the confines of the canvas.
Lots of good stuff in this video.
I like the idea of making paint with javascript and this is a great start point.
I don't really comment on videos but man you deserve praise! You explained it simply and clearly and I enjoyed watching till the end!
Btw, has anyone tried saving the whole drawing to a variable? I plan to include the data in my form together with the other inputs. Thank you :)
"Great head right there"
I see that you are a good person. Keep that it's really rare. You are awesome my buddy o my pall. Thank you. I watched many of your videos already. ahhaha :D
Nice! Congrats on 1000 subs!! :)
230k*
763k*
1000 SUBS!!! It's 331 Thousand after a year. Awesome dude
you can do only beginPath() in finishedPosition() function.Don't waste your time in doing stuff in draw function for the jumping line error
When you 0:56 Grats on your 1k subscribers Ed! I'm sure there'll be plenty more to come 🙂
Hello, i am from VietNam, Your video is very good and teaches me to listen to English
Eyyy man, thanks.
With this video I synthesized two days of research for an artistic composition challenge.
I don't know .Js, I study Html and will use Tag .
Kind regards from Colombia.
In one word "just awesome"❤️
That was quick and awesome at the same time! Thanks man! :)
Wonderful practical tutorial on drawing CANVAS web application in HTML, CSS, HTML 5, CSS 3, JavaScript etc., Thanks to the great UA-cam and Mr. Dev Ed. HTML 5, CSS 3, JavaScript technologies are amazing. We can design and develop fantastic web applications.
This was an amazing video and I admire your ability to explain things. Thank you very much.
Thanks for the video! I learned a lot.
Thank you very much .. really like your tutorials like so 😆
This video was great, I had an issue with canvas but this video solved it thank you so much!😀😀
very helpful video for a new beggeiner
Keep it up
thanks bro cleared all of my doubts for canavas
straight to the point, as always Ed
you saved me from dropping this class at college
amazing, so much quicker and simpler than i expected
This made some sense for me. Thank you
Hello from France! Thank you for your tutorials. you have the gift of making easy what seems me so complicated! I tried the canvas.It works but got a problem as there is a scroll that shifts the writing. seems to be the fixed navbar..an idea?
exactly what I needed! Thank you!
Man you deserve a subscribe, like and share! THANK YOU
Obrigado por compartilhar teu conhecimento! Abraços!
Incredible! Exactly what I was looking for. Thank you!
great video. sir Please create One more video on canvas to select any object in canvas
Great video. How to maintain the drawing coordinates for various screen sizes?
Cool❕Could you please explain, how to save image drawn.
can anyone dont't love this man?
You are an excellent learner and teacher
Hey thanks for the tutorial! Can you tell us how to save this drawing?
Windows + PrtSc on windows, Shift+command+3 on mac lol
Do you mean as a variable or as a file on the desktop?
@@wyattlastname477 lmao
Right click on the canvas, and then click save as.
Thank You So muchh💗
Awesome video Ed!
A quite helpful sir, but how can I center the canvas with fixed height and width?
Excellent explanations 😊
Thanks! Your explain was great!
Thanks for making this video, actually I have a question could you please make a video that how can we draw on an image using HTML and javascript?
I mean to upload the image and then draw on that image and then save it.
thanks in advance.
Hello, we're you able to figure this out?
Thanks a lot. It was really helpful for me. You just increased my confidence in learning js a lot.
Great and simple tutorial about JS Canvas.
Thanks a lot!
Hey! What if you wanted to draw an image to the canvas, would that be possible? Like a scratchcard?
This is great. Short and sweet. Thank you
Thanks bro you explained it very well , it really helped!!
amazing dude!
Thanks mate !!!
Well taught, fantastic work :D
Ed u doin great job :)
Great Tutorial
Thanks bro. I needed it.
what theme are you using in VSCode? great video as always
i want to know too...
please mention me also
Its called material theme
Material theme palenight ;)
I will try this 👍
This is a great tutorial, Sir can you create another tutorial about making canvas 2d game with sprite, spritesheet, animation, audio, json, etc
i wait for your tutorial relate it with it, but have button color and change stroke
Very good explanation.you taught each and every function very well.keep up good work.
Really helpful, thanks!
love it!!! Thx.
Damn! it amazing how simply you explain things and in a friendly way also!
easy and didactic! you teach well :)
Thank you so much, what is the background music at the beginning of the video?
This video is Very helpful
brilliant love it can you make a tutorial of a painting app which works in mobile or tablet using html, css and js
Hi , could you guide me how can I reflect the same draw simultaneously on some other person page like a white board similar to bitpaper.
Thank you~~~~~ I really love this video ;>
Thank you Sir!
With best wishes.
Great tutoral!
Thanks Steve!
17:40 this works without beginPath() and moveTo() from draw function, just beginPath() in finishedPosition
thank you
very helpful
Awesome video!
hi, great tutorial! very helpful! i have a question, is it possible to add opacity to the strokes? thanks!
yea same
What extension do you use for auto correcting your code. I noticed when you write single quotes, like: 'red', your vscode auto corrected it to double quotes and semi colon, like: "red";
hey! have you find out how he did it? really intrested in this
Thanks a lot❤️
That’s the start of a new js project :-)
Good one
Great videos Ed I hope your channel gets the recognition it deserves soon! :D
It did!
Thank you for the tutorial but there is major bug in your code.
if the mouse goes out of canvas range and then return to canvas range you will be drawing line even if you dont click the mouse.
Please make complete course about it
With more examples 🙏🙏
This is the PewDiePie of programming
Quite helpful , I'll do all the tutorials here, this is my third on this channel .
Thanks so much!
thx i tweeted this
Thanks~ for beginning
Hey thank you for this tuto !
I just meet a problem.
I can't draw when is an other format like smartphone or tablet .
If you can help i will be very thankful !
There you need to use touch events.
Exactly. touchstart, touchend, touchmove, and -event.clientX- event.touches[0].clientX
Hi! I just wanna ask if Canvas is suited for developing a 2D CAD web app, or is there any existing libraries that handle better object rendering? In writing so, do you have any recommendations?