HTML5 Canvas Projects

Learn HTML5 Canvas by doing15 H 29 M

Just you? Training a whole team? There's an ITProTV plan that fits.

Start Training Today
  • Pong
    • Overview
    • Project Planning and Setup
    • Creating the Ball
    • Creating the Paddle
    • Creating the Human Player Paddle
    • Creating the Computer Player Paddle
    • Creating the Computer Player Paddle Part 2
    • Refactoring into a Game Object
    • Refactoring into a Game Object Part 2
    • Refactoring into a Game Object Part 3
    • Creating the Scoreboard
    • Detecting Collisions
  • Image Editor
    • Designing an Image Editor
    • Setting up the Interface
    • Accessing the Image
    • Building Image Manipulation Functions
    • Building Image Manipulation Functions Part 2
    • Saving the Image
  • AtmoAttack
    • Planning the Project
    • Creating a Basic Fighter
    • Creating a Basic Attacker
    • Creating the Pellets
    • Creating the Pellets Part 2
    • Cleaning Up and Refactoring
    • Creating a Swarm
    • Creating a Swarm Part 2
    • Adding Sprites
    • Adding Sprites Part 2
    • Adding Sounds
    • Adding Sounds Part 2
    • Ending the Game
  • DevPaint
    • Planning The Devpaint Project
    • Creating A Pencil Drawing
    • Creating a Pencil Drawing Pt2
    • Creating a Pencil Drawing Pt3
    • Adding Color Selections
    • Adding Size Choices
    • Saving the Image


3 M

itprotv course thumbnailitprotv course thumbnailitprotv course thumbnail
  • Episode Description
  • Transcript

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!

[MUSIC] Hello and thank you for choosing DevPro TV. We're talking about HTML5 canvas projects with Justin Dennison. Justin, give us an overview, what's the course like? >> So this course is to really submit some of the skills maybe you've acquired through HTML5 canvas. I know what the canvas element is, I know the 2D rendering context, but how do these all come into play, what can I build? So what I've done during this course is created a few projects, a couple of games and a couple of non-games. Where we can really apply the skills that we know, the features about the HTML canvas, as well as sprinkled in a few other things from web development. What are we gonna build? Well, we have a couple of simple games like Atmos Attackers. We have little creatures coming down the screen and we're fending them off. What else? We have an image editor. We have the ability to paint and scribe. And well, a few other ones, but you'll have to come and see to figure those out. >> Now who is this show targeted towards? >> So this show is definitely for someone who has some previous web development experience and admittedly, some HTML5 canvas element experience. What does that mean? That means you need to know some JavaScript, you need to know some HTML, you need to know probably not as much CSS as some other people may require you to know. But if you don't know those, then a lot of the things that I'm gonna be doing in this course, well, they're gonna become difficult. They may not have any real kind of impetus of why I am doing them. So, I would say this is more of an intermediate level skill set required, in order to start leveling up. Now, with that said, that does not mean that it cannot be approachable for someone who, maybe has just started, and wants to see what the capabilities are for the HTML5 canvas element. >> Justin, is there a certification available for this? >> So for this course, there is no certification available. Mainly because it's gear toward, I know a little bit, and I wanna know more. I want to take the next step. I want to power up, level up, so to speak. So there is no explicit certification other than the wonderful warm, fuzzy feeling that you get by creating graphics within the browser. And seeing some of the power that is divvied out by the browser environment. >> So what topics are covered in the show? >> So this show is taking those HTML5 canvas elements, like figures. I have the canvas element, I have the 2D rendering context, and now I wanna learn how to create data models, in order to create a user interface, in order to create interactivity to create games like Atmo Attackers. As well as, how do I draw on this? What kind of data structures do I need? How do I think about this? How do I attack? Now I know that was very general in nature. So it is more about application of the HTML 5 canvas element and its associated kind of pieces. About how to attack and approach solving a problem. I have an idea for something I want to build. How do I take the skill set that I know a little bit about, plan it out, and then make it come to fruition. >> Well, this sounds like something you're excited about. And I know I am. You're going to make sure to watch every single episode of HTML5 canvas projects. Thank you for watching DevPro TV. [MUSIC]

Start training today

Just you? Check out our personal plans


$529 per seat/per year


Total seats


$349 per seat/per year


Total seats

Credit card required

This is for your account.
This is for your account.
We will contact you with this phone number about your trial.
We will contact you with this email about your trial.
What is the name of your company?
In which country is your company located?

Step 1 of 2

Get a demo or a start a team trial