Mastering HTML5 Canvas
4.2 (14 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
178 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Mastering HTML5 Canvas to your Wishlist.

Add to Wishlist

Mastering HTML5 Canvas

Revolutionize web visualizations with the power of HTML5 canvas
4.2 (14 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
178 students enrolled
Created by Packt Publishing
Last updated 1/2016
Price: $95
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
What Will I Learn?
  • Familiarize yourself with the foundations of working with the canvas 2D API
  • Control and regulate shapes with the help of quadratic and bezier curves
  • Explore interesting canvas methods to create paths, arcs, shapes, text, and images
  • Work with the beginPath and closePath methods to create your own geometric shapes
  • Use math-based interactions, such as sine and cosine, to build complex shapes and animations with ease
  • Get creative using the canvas features that control curves, colors, images, and gradients
  • Fetch pixel data and manipulate it on the bitmap level with the canvas API
  • Enhance the look and feel of your text using transformation effects such as scale, translate, and rotate
View Curriculum
  • The video course does not assume any previous know how in graphic design or HTML5 Canvas.

Web development is an exciting, ever-changing world that is getting progressively dynamic. What web developers need in this fast-paced world is the power of controlling visualizations on the fly—and in comes HTML5 canvas to the rescue! Powered by JavaScript, this powerful 2D API helps developers create graphics and animations directly in the browser. It offers great portability and works on almost all modern browsers, making it accessible just about anywhere.

Mastering HTML5 Canvas walks you through the fascinating arena of web development, covering all the critical concepts of drawing and manipulating pixels in the canvas through tons of examples and designs.

We start the course off by introducing the foundations of the canvas API. You’ll learn how to create canvas elements dynamically and draw basic shapes, and you’ll get familiar with the work environment. Then we shift our focus on to drawing, where you will draw lines, original shapes, paths, and even multiple pointed shapes.

Next, we’ll then leverage the logic that stands behind the cosine and sine functions and through them, create more complicated shapes. This new insight will enable you to create more complex and advanced shape combinations. We will continue our journey by getting to grips with the various types of curves, images, and gradient colors. Finally, we will deal with manipulation of the canvas itself.

By the end of this course, you will know how to draw in HTML5 canvas, create complex shapes, and use angles, arcs, and curves to create your own art work. You will be a master of the HTML5 2D canvas API.

About The Author

Ben Fhala discovered his passion for data visualization while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.

He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Among Ben's publications are HTML5 Graphing and Data Visualization Cookbook, and five video courses: jQuery UI Development; Learning Object-Oriented JavaScript; Mastering JavaScript; JavaScript Design Patterns; Web Visualization with HTML5, CSS3, and JavaScript, all for Packt Publishing.

Who is the target audience?
  • If you are a JavaScript developer with a solid understanding of the fundamentals of the language and wish to expand your capabilities by learning how to draw and manipulate data through the HTML5 canvas 2D API, this course is for you!
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 26 Lectures Collapse All 26 Lectures 03:23:16
Getting Started with HTML5 Canvas
5 Lectures 29:34

This video will offer an overview of the course.

The Course Overview

Although most modern browsers support Canvas, not all of them do so. While we won't create an optimal experience for users without the HTML5 Canvas support, we want to create a graceful fallback experience. So, before we start our journey into Canvas, we will prepare our source files to accommodate failures.

Preparing Our JavaScript for Canvas

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

Canvas Hello World

In this video, we will continue working with the flag creation we started in the last video. By the end of this video, we will have created the complete flag of Palau along with a perfect arc—more commonly known as a circle.

The Palau Flag and the Perfect Circle

Up until now, we worked with the Canvas element that we added onto the stage manually. We will now learn how to dynamically add new Canvas elements into our HTML.

Creating Canvas Elements Dynamically
Creating Shapes Using Paths
5 Lectures 44:15

We learned as we created the flag for Palau that when we create a circle using the arc method, we have to trigger a request separately to fill the shape. This is true for all shapes that we create from scratch, and it is true for the creation of lines as well. In this video, we shift our attention to lines.

Preview 09:43

In the previous video we, started to create the flag of Greece. We are still short on a few lines of code to complete this flag, but before we can complete creating the flag, we'll encounter another new concept—paths. By the end of this video, you will understand how to work with paths in HTML5 Canvas.

Meeting Canvas Paths

In this video, we will take advantage of the new method we were introduced to in the previous video, beginPath, to define a path. Only this time, we will define this path as a closed path. By the end of this video, you will know how to work with the beginPath and closePath methods and create your own geometric shapes.

Drawing Triangles with Paths

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

Creating the Flag of Guyana

In this video, we continue down the road while creating a multishaped object. By the end of this video, you will have a deep understanding of how to work with paths to create complex shapes.

Creating Multipoint Shapes
Drawing with Angles
5 Lectures 50:53

As you start to develop more complex shapes, you will need to take advantage of the sine and cosine functions to create complex shapes and animations. In this video, we will revisit the basics of working with sine and cosine as we get ready to build an analog clock flag.

Preview 11:31

Now that we know the basics of working with Math.sin and Math.cos, it's time for us to continue and develop a clicking analog clock.

Creating an Animated Clock

It's time to take everything we learned and integrate it into the most complex shape we have seen so far, the Star of David. This star is part of the flag of Israel, and to create it, we will need to use our triangle, sine, and the cosine logic.

Creating Complex Shapes

There are many flags that contain stars that just cannot be created by overlapping triangles. In this video, we will figure out how to create a star that contains an arbitrary number of points. We will create the flag of Somalia, and in the process, we'll figure out how to create a function that will enable us to create stars.

Adding More Vertices

There are many flags and shapes, in general that can be created by combining the shapes we've created so far. One of the most popular shapes in 82 flags that we don't know how to create is the crescent shape, similar to the one in the flag of Turkey. With it, we learn a new skill that uses subtraction to create more in-depth shapes.

Overlapping Shapes to Create Other Shapes
From Curves to Gradients
6 Lectures 41:17

There are three types of curves that we can create in Canvas—using the arc, quadratic curves, and Bezier curves. In this video, we will shift our attention to the arc again, and, this time, we'll really master its full capabilities. At the end of this video, we will create a pacman and a pie chart example.

Preview 07:00

A quadratic curve is one that has a control point. Consider the case when creating a line; we draw it between two points. When we want to create a quadratic curve, we use an external gravity controller that defines the direction of the curve, while the middle line (the dotted line) defines how far the curve will reach. Let’s learn about this.

Drawing with Quadratic Curves

A bezier curve is one that has two control points. When we want to create a bezier curve, we use two external gravity controllers that define the direction of the curve while one control is on one side and the other is on the other side of the bounded area.

Drawing with Bezier Curves

Let's turn our attention to Haiti and get their flag up and running. To create this flag, we need to have the image of the symbol that is placed in the center of the flag. In this video, we will learn how to add images into Canvas, resize them, and how to maintain their original ratio.

Drawing Images into Canvas

Since we started our course, all the colors we used were solid colors. It's time for us to take a look at gradients. By the end of this video, you will know how to work with linear gradients.

Creating an Interactive Linear Gradient

In this video, we will explore a more complex type of gradient—a radial gradient. You will learn how to create with it, understand how to control the two anchor points, and the radius of the gradient.

Working with Interactive Radial Gradient
Manipulating the Canvas
5 Lectures 37:17

Although the main usage of Canvas is to draw, at times, you might need to add text to canvas. To do this, we will take advantage of a few build int methods and properties of the canvas 2D API.

Preview 08:17

Canvas items, when rendered, are represented as bitmap data, and as such, the Canvas API comes with a way for us to manipulate data on the bitmap level. By the end of this video, you will know how to fetch the pixel data and manipulate it.

Pixel Manipulation

Like any modern drawing editor, the canvas API, too, provides a means to create masking in Canvas. Masking is done using the clip method. In this video, we will learn how to work with the clip method.

The Art of Clipping

Throughout this course, all our manipulations have been targeted at the items that were drawn. In the previous video, we moved to a type of transformation that focused on the Canvas itself, and in the next two videos, we will continue down this path. In this video, we will learn how to transform the Canvas.

Transforming the Canvas

To wrap up this course, we are going to cover the three final and major methods that manipulate the full Canvas.

Scale, Rotate, and Translate
About the Instructor
Packt Publishing
3.9 Average rating
4,468 Reviews
35,436 Students
352 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.