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

Creating Shapes using Paths

We will learn to draw lines, original shapes, paths, and even multiple pointed shapes(unlimited).

Duration: 46:41

Dependency warningThis course builds on concepts from Getting Started with HTML5 Canvas.
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.

Creating Shapes using Paths Overview

What you'll learn

Last session we get used to the world of canvas, and in this session we focus on drawing. We will learn to draw lines, original shapes, paths, and even multiple pointed shapes(unlimited).

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!

Drawing our first canvas lines

In this lecture, we move our attention to lines.

10:21

Meeting canvas paths

By the end of this lesson you will understand how to work with paths in HTML5 Canvas.

05:43

Drawing triangles with paths

By the end of this lesson you will know how to work with the beginPath and closePath methods and create your own geometric shapes.

08:35

Creating the Flag of Guyana

In this lecture we will take advantage of this new utility function to create the flag of Guyana. In the process we will learn how to create relative designs that can easily scale.

12:59

Creating Multi Pointed Shapes ( Kingdom of Bahrain )

By the end of this lesson you will have a deep understanding of how to work with paths to create complex shapes.

09:04

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!