Learn how to animate canvas elements using HTML5 Canvas. This course covers animation basics, object-oriented JavaScript, and random number generation to help you get objects moving on the screen. By mastering skills such as using requestAnimationFrame, clearing the canvas, understanding velocity, and creating multiple objects, you will be able to create dynamic animations for your web projects. The teaching method includes practical demonstrations and coding examples. This course is designed for beginners interested in game development or interactive web design using HTML5 Canvas.
Overview
Syllabus
- Animation with requestAnimationFrame
- Clearing the canvas with clearRect
- What is velocity?
- How to bounce our objects off the edges of the screen
- Creating randomization x, y coordinates and dx, dy velocities
- Intro to object oriented JavaScript
- Creating multiple circle objects, and storing them in one variable
- Drawing and animating all of our circles using a for loop, array, and object oriented programming
- How to ensure circles are only being spawned within the canvas's boundaries
Taught by
Chris Courses
Related Courses
-
Create simple HTML5 Canvas Game with JavaScript Pong Game
-
Building HTML5 Canvas projects from scratch
-
Code a 2D Game Using JavaScript, HTML, and CSS (w/ Free Game Assets) – Tutorial
-
Animated Physics Game with JavaScript - Tutorial
-
Masterclass In C# Programing & Unity 2D Game Development
-
Interacting with The Canvas - HTML5 Canvas Tutorial for Beginners
