HTML5 Canvas Projects

Name: HTML5 Canvas Projects
Rating: 4.1 (10 reviews)

Learn HTML5 Canvas by Doing

Created byITPro TV, Justin Dennison

Last updated 2/2020

English

What you'll learn

HTML5 Canvas drawing with JavaScript.
Game programming.
Use sounds in a web application.
Saving images in a web application.
Keyboard controls.

Course content

5 sections • 38 lectures • 15h 28m total length

Overview3:24
With the advent of the HTML5 Canvas tag, the world of graphical manipulation in the browser has become a reality. This series is an exploration of some the possibility that are available when using the canvas element. The ultimate aim is to use project-based exploration of the capabilities of the HTML5 Canvas element by building games as well as some utilities. Along the way, you may learn some other interesting JavaScript uses. See you there!

Project Planning and Setup28:05
Justin and Zach begin to build their homage to the game PONG, stress the importance of knowing about HTML5 Canvas Planning, using ATOM for text editor, use Chrome as web browser, file-add project folder, animations can be on a single HTML Page, C55, <!DocType html>, using the Mozilla Developer Network, and Console.Log.
Creating the Ball28:23
Justin and Zach begin to create the 'Ball' to be used in their home to the game PONG, what we need to think about in creating it, Angular JS is the running logic, using UPDATE-RENDER-DATA, App. JS is the game state, and if we need to make the ball circular and why.
Creating the Paddle27:04
Justin and Zach explain a general approach of creating a paddle object to illustrate designing the paddle for the player and for the computer, showing how to utilize this custom object to extend for use as a player paddle as well as a computer paddle.
Creating the Human Player Paddle27:46
Justin and Zach continue to build their homage to PONG, and demonstrate the use of the standard paddle to create a player controlled paddle.
Creating the Computer Player Paddle22:59
Justin and Zach create the computer paddle that the game will use to play against the human player, demonstrating how to create different strategies that can be applied to the computer player.
Creating the Computer Player Paddle Pt. 222:07
Justin and Zach continue to create the computer paddle that the game will use to play against the human player, demonstrating how to create different strategies that can be applied to the computer player.
Refactoring into a Game Object19:08
Justin and Zach add some structure to the Game by creating a managing Game Object that will oversee the Game, and setting up further expansion to score inclusion & other "setup" plus "managed" features.
Refactoring into a Game Object Pt. 225:16
In this episode, Justin and Zach continue the discussion about adding some structure to the game by creating a managing game object that will oversee the game, using this time to setup for further expansion to score inclusion & other "setup" & "managed" features.
Refactoring into a Game Object Pt. 327:51
In this episode, Justin and Zach conclude the discussion about adding some structure to the game by creating a managing game object that will oversee the game, using this time to setup for further expansion to score inclusion & other "setup" & "managed" features.
Creating the Scoreboard24:38
In this episode, Justin and Zach take us through creating a scoreboard that will take both of the players, and the scoreboard will be used to determine the game winning condition.
Detecting Collisions30:10
In this episode, Justin demonstrates how to change the the paddle objects to become aware of the ball object. By doing this, the paddle can determine if the ball has collided with it. Moreover, Justin discusses how this method compares and contrasts with making the ball aware of the paddle.

Designing the Image Editor14:42
In this episode, Justin shows the design of the image editor that we are going to create in the browser. He shows how the planning leads to knowing how to implement a solution based on small pieces of a project.
Setting up the Interface19:23
In this episode, Justin demonstrates implementing the interface design from the previous episode. As a first pass on the layout, this may change as more functionality is necessary.
Accessing the Image26:41
In this episode, Justin demonstrates obtaining an image from a local source. Moreover, he shows how to hold the image into an in-memory representation to be manipulated and drawn.
Building Image Manipulation Functions21:08
In this episode, Justin demonstrates building different image manipulation filters that are going to be available in the application such as greyscale, sepia, and blurring.
Building Image Manipulation Functions Pt. 228:18
In this episode, Justin and Zach demonstrate different image manipulation filters that are going to be available in the application such as greyscale-sepia-blurring, and we begin this episode by covering why we need to make copies.
Saving the Image23:50
In this episode, Justin demonstrates how to take the one can use the browser functionality to create a downloaded file that is a copy of the transformed image.

Planning the Project20:10
In this episode, Justin plans out the project for AtmoAttackers. He designs the interface as well as the interactions that are necessary for creating the game dynamic. Moreover, he sets up the project structure in preparation for implementing the game.
Creating a Basic Fighter24:57
In this episode, Justin creates a basic fighter object that will be controlled by the player. He uses a simplified version [rectangle] to get the placement and movements wired up.
Creating a Basic Attacker25:44
In this episode, Justin creates a simple attacker. He demonstrates creating the data representation, how the attacker will move, as well as rendering the attacker to the game screen.
Creating the Pellets29:49
In this episode, Justin creates the data representation of a pellet as well as how it will be rendered on the screen. Moreover, Justin creates the user input instructions for firing the pellets from the fighter as well as demonstrates how to manage the limitations of having multiple pellets.
Creating the Pellets Pt. 219:42
In this episode, Justin alters the interactions of the pellets in order to remove the pellets from play if they contact an attacker as well as limit the amount of pellets on screen to eliminate spamming the fire button.
Cleaning Up and Refactoring29:56
In this episode, Zack and Justin take some time to organize and cleanup as well as refactor the code to separate the concerns of the fighter, attacker, and pellet structures. Moreover, Justin creates a main game object that will be used to manage the animation and interactions.
Creating a Swarm25:50
In this episode, Zack and Justin create a swarm of attackers that behave in unison. Moreover, he shows that the swarm now defines the collection of attackers, but that the attackers can still have behaviors and properties themselves. The swarm object allows easier management of the collection of attackers.
Creating a Swarm Pt. 236:15
In this episode, Justin refactors the original implementation of the swarm of attackers in order to address the changing boundary issues as well as make the main game code more readable.
Adding Sprites25:34
In this episode, Zack and Justin return to the game to add image based sprites to the fighter and attacker.
Adding Sprites Pt. 218:18
In this episode, Zack and Justin return to the game to add image based sprites to the attacker.
Adding Sounds26:28
In this episode, Zack and Justin demonstrate adding sound to the game in order to add a little extra flair to the playing experience.
Adding Sounds Pt. 220:10
In this episode, Zack and Justin continue adding sounds to the game including fixing the lag between rapid fire shots and the pellet sound, the game over sound as well as the explosion sounds upon enemy destruction.
Ending the Game31:21
In this episode, Zack and Justin explore how the game over state of the game is decided. More specifically, Justin demonstrates how to manage the two states of the game, the attackers reach the fighter or the fighter destroys all of the attackers.

Planning the DevPaint Project17:03
In this episode, Zack and Justin plan out a graphical editing application in the browser that will allow for basic drawing in the browser.
Creating a Pencil Drawing30:22
In this episode, Vonne and Justin get started implementing the first drawing capability of DevPaint.
Creating a Pencil Drawing Pt. 224:37
In this episode, Vonne and Justin take a look at how to fix the tracking of the pointer in order to make rendering the line more accurate to the mouse cursor. Justin also refactors the application code to provide a little more readability.
Creating a Pencil Drawing Pt. 325:48
In this episode, Vonne and Justin fix the single continuous path so that users can draw multiple yet separate lines. In order to accomplish this, Justin introduces a new object into the application and refactors, yet again, the application code.
Adding Color Selections25:13
In this episode, Vonne and Justin demonstrate how to use new features of HTML5 to interface with DevPaint to allow selecting different colors.
Adding Size Choices18:44
In this episode, Vonne and Justin describe and implement the ability to change the pen tool size when drawing. Justin emphasizes how that information propagates to other objects within the application.
Saving the Image31:28
In this episode, Zack and Justin demonstrate how to save the masterpieces that you have drawn with the tool.

Requirements

HTML and JavaScript familiarity.
Understand DOM events.

Description

HTML5 Canvas Projects

With the advent of the HTML5 Canvas tag, the world of graphical manipulation in the browser has become a reality. This series is an exploration of some the possibility that are available when using the canvas element. The ultimate aim is to use project-based exploration of the capabilities of the HTML5 Canvas element by building games as well as some utilities. Along the way, you may learn some other interesting JavaScript uses. See you there!

Course Format

• Binge-worthy TV shows! Watch comprehensive, in-depth episodes that use a talk show-like format to keep you engaged while learning.

• You can pick and choose episodes or you can watch as a complete series.

• A little humor, anecdotes, and real-world examples.

Other Courses

Ready to become a DevPro? Get more DevProTV training with a variety of topics. Join Justin and DevProTV to level up your programming prowess!

Updates and Versions

The programming world updates at a break neck pace. As a result, there are times that certain tools, editors, libraries have changed. While syntax or names may change, the foundations remain the same. Though we hope to keep things updated, there may be time before that can occur. I recommend seeing if you can translate between changes and if all fails, ask questions!

Who this course is for:

Programmers looking to utilize the graphical capabilities of HTML5 and JavaScript.

HTML5 Canvas Projects

What you'll learn

Explore related topics

Course content

Overview1 lecture • 3min

Pong11 lectures • 4hr 43min

Image Editor6 lectures • 2hr 14min

AtmoAttack13 lectures • 5hr 34min

DevPaint7 lectures • 2hr 53min

Requirements

Description

Who this course is for: