HTML5 Canvas API Crash Course

In this video we will look at the HTML5 Canvas element and JavaScript API to draw shapes, paths and do some basic animation

Sponsor: Linode Hosting

Code:

💖 Become a Patron: Show support & get perks!

Website:

Follow Traversy Media:

[TraversyMedia]

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

[mchamouda]

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

[vicente]

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

[maasnicolas]

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

[urielcohen]

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

[mouadtaoussi]

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

[ajithhp]

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

[ufotofu]

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()

[PythonLearningChannel]

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

[Bagunka]

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!

[pcgs_]

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

[sovereignlivingsoul]

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.

[anhi]

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!

[rfryanfavour]

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

[sandravukovic]

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 :)

[justpatrick_]

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

[hakemrayan]

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

[skull]

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

[ascodes]

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

[AmirAli-kjbm]

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