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

Getting Started with HTML5 Canvas

In this section we will learn the foundations of working with the canvas API.

Duration: 28:24

Advanced Level
Advanced Level
Fast-pace
Fast-pace

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.

Getting Started with HTML5 Canvas Overview

What you'll learn

In this section we will learn the foundations of working with the canvas API. By the end of this session you will learn how to create canvas elements dynamically, draw basic shapes, and get familiar with the environment.

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!

Preparing our JavaScript for Canvas

in this lecture we will prepare our source files to accommodate failure.

10:08

Canvas Hello World

We start our canvas journey creating a simple rectangle in the process we will learn how to define the canvas size, how to define a fill style and how to fill it up using the fillRect method.

06:36

The Palau flag and the perfect circle

By the end of this lecture will will have the complete flag of Palau and will create a perfect arc - more commonly known as a circle.

05:16

Creating Canvas elements dynamically

This is the last DOM specific lecture in this title as from here on words we will be deep into the world of the canvas API.

06:25

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!