Coding a Street Fighter game | JavaScript, HTML Canvas | Setup & Canvas Basics (Part 2)

Part 2 of my tutorial series on making a Street Fighter game using web technologies. In this video, we'll get our project folder set up and learn the basics of using the canvas element, setting the foundations for future videos. Complete Playlist: https://www.youtube.com/playlist?list=PLf9yt-2olqyLxr-vouWl-qk4toUfjF2LC Patreon Page: https://www.patreon.com/shezzor #Tutorial #Canvas #StreetFighter Timestamps: 0:00 Title 0:17 Intro 1:43 Initial project set-up 4:25 Initial canvas set-up 6:59 Resizing the canvas element 9:30 Installing a server extension 11:13 Understanding the canvas coordinate system 11:56 Drawing a cross with some basic drawing functions 13:30 Final canvas resizing solution 14:56 Setting that "retro" look and feel 16:34 Sourcing an image 17:44 Drawing the image to the canvas 19:02 Correcting our image transparency 19:57 Understanding requestAnimationFrame 21:55 Using the dev-tools to examine our fps 22:58 Adding movement to our image 23:30 Understanding frames using clearRect 24:39 Adding constraints to our image movement 26:05 Adding a background 28:34 Final clean up 29:02 Summary 29:26 Ending