HTML5 Canvas API Crash Course 

Intro - 0:20 Create Context - 2:05 Rectangles (fillRect, strokeRect, etc) - 4:03 Paths (moveTo, lineTo) - 9:41 Arcs / Circles - 16:15 Bezier Curves - 26:18 Bounce Animation - 28:45 Character Animation - 40:25

39k left For our Million Subscribers i can't wait really ❤ from 🇸🇴

40:35 The ball hits the corner. P E R F E C T

This is perfect, I was recently looking into developing browser games/tools and a canvas introduction helps out immensely. Thanks!

Thank you Brad Traversy for all of your work for us! You're Brilliant Honestly!

Absolutely love what you're doing man, released this just when I needed it.

Thank you for the upload! The timing is perfect since I'm doing my thesis around Three.js and the Canvas element 😄

Feeling happy to learn from your tutorials, I have learn many front end technologies from your videos..... I really appreciate your work, the way you explain the complex things make easier. Thank you.......

This was an absolute godsend! Tysm! I truly enjoyed following along with your demonstration and not only do I have a great starting knowledge of the canvas element, I also have a fun little wizard zipping around my screen! Thanks again!

Finally I was really waiting for this one. Let's check it out. Thanks brad

This is awesome. So glad I purchased all of your courses. Thank you.

finally! spent the whole day trying to get my head around this, watched your vid now its clicked - and you explained everything perfect just when i would have asked a question about it in real life haha nice one!

Great as always. If you want to fill in the smiley face with color, you need to use ''ctx.fill()' at the end of the circle draw area: ctx.fillStyle = 'yellow'; ctx.beginPath(); //Draw head ctx.arc(centerX, centerY, 200, 0, Math.PI * 2); ctx.fill()

what a timing ! just what i needed thank you so much brad!

Right when I was thinking about starting to learn it Brad uploads a new video. Nice, I don't need to look any further👍

been following you for years. you never disappoint!

Oh my god, I just watched your video on JS classes, then did my homework and now decided to check out js canvas and how to get started with it and boom it’s your channel as well!

I appreciate your hardwork so much , Brad. Thanks !

Your vids are so valuable. Thank you for keeping us small youtubers at the cutting edge!!! 👏👏👍👍

Brad, you're aweasome!! Send more videos like this focused in game development with html and JS or with PhaserJS.

Love your crash courses. Keep em coming!

Finally, and it's a great introduction. Thanks, Brad.

(saved video for later) Thank You so much for making this ! Love your work.

the best web dev channel ever what an energy to watch your videos you are a pure inspiration keep up

Your explaning is so great i was wonder what the canvas is, now i know thanks!

Thank you so much for this awesome tutorial. I really like the way you explain things, and how you help people in they learning path. This tutorial came in just in time for me. God bless you and your family. Much Respect. Thank you again! : ))

Thank you Brad, this is what I really needed.

Thank you so much for this tutorial, it was just what I needed.

i always seem to run into yourrelevant videos just as i start a new project, i was building an array of canvases, to maybe do some videos on, and lo and behold i run onto this gem, i am taking your javascript course and have watched many of your video, you are very good at explaining your ideas and provide excellent examples to work from, i am going to take some of these canvases you made and adapt them a bit for educational purposes, i will provide a statement giving your videos the inspiration for mine, i am hoping to incorporate a few tricks i have learned from you over the years in my project, and appreciate all that you do, God Bless.

Awesome! other than coding skills, brad is telepathic too! It's been a while that I wanted to learn this subject! Brad, you've read my mind!😂

Thanks a lot Mr. Brad. I hope later on you can help us build chart / diagram / something like that. We really appreciate what U're doing.

This is the video i have been waiting for *+*,Thank you.

Thank you sir, you just saved my time. Well explained... Thanks again !

Totally enjoyable learning experience. Thanks!

wow this really cool i had difficulties in canvas before but not after watching this video

Thank you so much for this amazing video :) all what I needed to know to start :)

The second example is so cool thanks man.

Perfect mate, what a great video. Thank you so much.

explained very simple yet on point

You are really a good teacher.

congratulations for 1M subscribers :))) you deserve everyone of it sir

Beautiful And Amazing Video, Such a helpful short course...Thank you soo much for sharing it man😍😍😍

thank you. very nice. easy to follow and sooo helpful..

Thanks Brad! You are the best!

Sweet great video! I totally need this one 💯👐

I am totally inspired from u love u, sir

This video helps me a lot sir. Thank you!

Thank-you for sharing your knowledge. An Excellent tutorial.

it was fun! thank you as always!

I was planning to start a personal project, a game in canvas + websocket to connect multiple players, and there you go, canvas crash course, Thanks Brad... Love u

Hey, cool! We did this in Visual Basic back in the days, thank you for refreshing my memory! The syntax is different, but the logic is the same. I love understanding the "magic" behind it :)

I'm just really appreciate what you done for us Brad. I am from Myanmar.

Hey Brad, glad you're back, canvas is something fresh after MERN MEVN stacks :P However, would you like to take a look at headless node cms setup based on docker? Its so few tutorials how to make it especially when you want to connect to postgres or something else. As usually thanks for everything what u're doing!

Brad is truly a Wikipedia. men i just love this guy

Thank's so much!! Great as always.

Don't you ever say "it's a long video..." , we will always watch your videos till the end. Thank you so much

Brroooo.... you are a wizard bruh... jeez your ideas are whew 🔥... three years... I found this really late 😂.... well my introduction to react three drei has begun 😅❤thanks Brad you're the best

Great video, thank you!

1M coming soon.... yay❤️🔥 bdw thanks for Canvas tutorial...

Great video! Thanks!

Amazing video. Thank you!

Great Video. You are a great teacher.

Well done as always thanks!

This video is good starting for beginner like me.

Thank you very much brad and god bless you..!

Thank you, that was really good fun 👍

Hey Brad, love your content. do you think you might ever do a video on Jenkins or other CI/CD?

37:48 Whaaaaaatttttttttttttt a moment, One of the best vibe a developer could have😍

Now i know how games can be made. Thank you for this video

It's amazing thank you so much

gracias.. muy buenos videos.. saludos desde Colombia..

49:01 My world needs me now, I shall say goodbye to your 600 x 600 canvas

Appreciated.. You really neiled it...

Great stuff! Thanks.

** Great video and absolutely helpful, you are a full of knowledge and spirit of sharing **

Wow!! Thank u so much!!

Awesome!! Thank you so much :-)

You are # 1, thanks for JS & React courses on Udemy too.

Wonderful!

Yes a Black Mage good stuff man.

Great tutorial. Do you have a follow up video with more details on canvas? for example, how to control how fast the ball moves....

Thank you!

Createjs is a really cool canvas library. Currently using it at work for web games and stuff

Brad is the best 💪 💪

nice tutorial. but could you give me idea, if already draw text in canvas, want to click n drag to draw bounding box then select it, and get what text is currently selected / highlighted?

Thank you

Thanks for the great vid dude! Any chance you could cover some image manipulation with Canvas? :)

Traverse God bless you bro

Hello from russia. Im a little bad in writing comments, but i want to say that ur video very cool, i just watched 24 minutes and i will finish that. U talk very clearly, keep doing that So cringe for me, i think i have many mistakes, but i dont want to use translator

Great!

Thank you for inspiring me i am thinking of making small youtube channel wish me best of luck sir

@Traversy Media At what point do you use more in depth technologies for a client like React/Angular etc. vs a wordpress template or even a custom wordpress theme that you built yourself. Is that more of a how much they're willing to pay, or what they want from a functionality standpoint? When you had your own business how long did it take you to build up to a client that wanted something on a non wordpress platform? p.s. I'm a big fan, ive watched a lot of your videos and Udemy courses. My company is about to stop paying for Udemy and switch to LinkedIn Learning, would you consider adding some of your content to their network?

finally D3 next!!!!1

I've been trying to write a Jest test case for a element. Any advice?

For better keyboard controls, modify the 'KeyUp' function like so: function keyUp(e) { if ( e.key === 'Right' || e.key === 'ArrowRight' || e.key === 'Left' || e.key === 'ArrowLeft' ) { player.dx = 0 } else if ( e.key === 'Up' || e.key === 'ArrowUp' || e.key === 'Down' || e.key === 'ArrowDown' ) { player.dy = 0 } }

GOOOOOOOOOOLD content

Hello. Thank you for the breakdown. I found this very helpful, but my images is being displayed under the canvas and isn't animating even if I copy and paste the code. Any thoughts???

Final Fantasy's Iconic Black Mage Reference!

i love you so mush, from morocco

Thanks Brad for this video. I was wondering how the definition of the Update function is not causing a Stack overflow