02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School

HTML5 Canvas

This section is all about giving you a introduction to the process of working with the Canvas 2D API.

Duration: 27:53

Dependency warningThis course builds on concepts from Drawing and animating with SVG.
Beginner Level
Beginner Level
Medium-paced Course
Medium-paced Course

Created with

Ben Fhala

Ben Fhala

Ben Fhala is the creative force and founder behind 02geek, a pioneering platform dedicated to making web development accessible to everyone. With over 18 years of experience in the industry, Ben has a deep passion for teaching and a knack for breaking down complex concepts into easy-to-understand lessons.

HTML5 Canvas Overview

What you'll learn

In the last section we where introduced to SVG (vector art ) and how to manipulate it in an HTML5 world. In this section we move to bitmap art with the Canvas API. This section is all about giving you a introduction to the process of working with the Canvas 2D API. By the end of this session you will know to create and animate with canvas.

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!

Browser support and canvas

Canvas is new and with it some older browsers will not support the full features. Although we won't worry about the overall experience of users that don't support canvas in this title, we want to show

06:55

Starting to draw in Canvas

Now that we know the users have canvas available on their browsers, it's time for us to pick the API we will be working with. We will pick the 2D api. Once we do so we will go ahead and pick a color a

07:56

Drawing out a grid in canvas

Although we don't have the time in this title to go over all the features available in canvas we will go ahead and jump right in deep by drawing out together a grid that will cover the full visible ar

08:55

Animating canvas

Although there is much more to cover in canvas (don't forget to check out my title dedicated fully to canvas), We are ready to wrap things up by creating an animation in canvas.

04:07

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!