Mastering HTML5 Canvas

Getting Started with HTML5 Canvas 5 lectures 29:35 The Course Overview This video will offer an overview of the course. Preparing Our JavaScript for Canvas 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.

• Learn the basics of browser compatibility tests
• Create a Canvas fallback
• Work with ternary operators

Canvas Hello World 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.

• Let's create our first Canvas drawing
• Next, we'll create a rectangle
• Then, we'll define a style using fillStyle

The Palau Flag and the Perfect Circle 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.

• We'll work with the arc method
• Then, let's create a perfect circle
• Finally, we'll create the Palau Flag

Creating Canvas Elements Dynamically 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.

• Add multiple types of Canvas onto our page
• Create a Canvas generator
• Work with the DOM to create new Canvas elements

Getting Started with HTML5 Canvas 5 lectures 29:35 The Course Overview This video will offer an overview of the course. Preparing Our JavaScript for Canvas 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.

• Learn the basics of browser compatibility tests
• Create a Canvas fallback
• Work with ternary operators

Canvas Hello World 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.

• Let's create our first Canvas drawing
• Next, we'll create a rectangle
• Then, we'll define a style using fillStyle

The Palau Flag and the Perfect Circle 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.

• We'll work with the arc method
• Then, let's create a perfect circle
• Finally, we'll create the Palau Flag

Creating Canvas Elements Dynamically 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.

• Add multiple types of Canvas onto our page
• Create a Canvas generator
• Work with the DOM to create new Canvas elements

The Course Overview This video will offer an overview of the course. The Course Overview This video will offer an overview of the course. The Course Overview This video will offer an overview of the course. The Course Overview This video will offer an overview of the course. This video will offer an overview of the course. This video will offer an overview of the course. Preparing Our JavaScript for Canvas 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.

• Learn the basics of browser compatibility tests
• Create a Canvas fallback
• Work with ternary operators

Preparing Our JavaScript for Canvas 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.

• Learn the basics of browser compatibility tests
• Create a Canvas fallback
• Work with ternary operators

Preparing Our JavaScript for Canvas 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.

• Learn the basics of browser compatibility tests
• Create a Canvas fallback
• Work with ternary operators

Preparing Our JavaScript for Canvas 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.

• Learn the basics of browser compatibility tests
• Create a Canvas fallback
• Work with ternary operators

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.

• Learn the basics of browser compatibility tests
• Create a Canvas fallback
• Work with ternary operators

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.

• Learn the basics of browser compatibility tests
• Create a Canvas fallback
• Work with ternary operators

Canvas Hello World 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.

• Let's create our first Canvas drawing
• Next, we'll create a rectangle
• Then, we'll define a style using fillStyle

Canvas Hello World 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.

• Let's create our first Canvas drawing
• Next, we'll create a rectangle
• Then, we'll define a style using fillStyle

Canvas Hello World 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.

• Let's create our first Canvas drawing
• Next, we'll create a rectangle
• Then, we'll define a style using fillStyle

Canvas Hello World 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.

• Let's create our first Canvas drawing
• Next, we'll create a rectangle
• Then, we'll define a style using fillStyle

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.

• Let's create our first Canvas drawing
• Next, we'll create a rectangle
• Then, we'll define a style using fillStyle

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.

• Let's create our first Canvas drawing
• Next, we'll create a rectangle
• Then, we'll define a style using fillStyle

The Palau Flag and the Perfect Circle 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.

• We'll work with the arc method
• Then, let's create a perfect circle
• Finally, we'll create the Palau Flag

The Palau Flag and the Perfect Circle 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.

• We'll work with the arc method
• Then, let's create a perfect circle
• Finally, we'll create the Palau Flag

The Palau Flag and the Perfect Circle 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.

• We'll work with the arc method
• Then, let's create a perfect circle
• Finally, we'll create the Palau Flag

The Palau Flag and the Perfect Circle 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.

• We'll work with the arc method
• Then, let's create a perfect circle
• Finally, we'll create the Palau Flag

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.

• We'll work with the arc method
• Then, let's create a perfect circle
• Finally, we'll create the Palau Flag

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.

• We'll work with the arc method
• Then, let's create a perfect circle
• Finally, we'll create the Palau Flag

Creating Canvas Elements Dynamically 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.

• Add multiple types of Canvas onto our page
• Create a Canvas generator
• Work with the DOM to create new Canvas elements

Creating Canvas Elements Dynamically 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.

• Add multiple types of Canvas onto our page
• Create a Canvas generator
• Work with the DOM to create new Canvas elements

Creating Canvas Elements Dynamically 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.

• Add multiple types of Canvas onto our page
• Create a Canvas generator
• Work with the DOM to create new Canvas elements

Creating Canvas Elements Dynamically 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.

• Add multiple types of Canvas onto our page
• Create a Canvas generator
• Work with the DOM to create new Canvas elements

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.

• Add multiple types of Canvas onto our page
• Create a Canvas generator
• Work with the DOM to create new Canvas elements

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.

• Add multiple types of Canvas onto our page
• Create a Canvas generator
• Work with the DOM to create new Canvas elements

Creating Shapes Using Paths 5 lectures 44:16 Drawing Our First Canvas Lines 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.

• We'll move our mouse pointer with the moveTo method
• Draw a line with the lineTo method
• Here, you'll see the difference between fill and stroke

Meeting Canvas Paths 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.

• Move from standalone lines to paths
• Explicitly define the start point of a shape
• Draw the flag of Greece

Drawing Triangles with 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.

• Work with the beginPath and closePath methods
• Create a utility function
• Draw a triangle in Canvas

Creating the Flag of Guyana 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.

• Create relative resizable designs
• Utilize our new fillTriangle function
• Create the flag of Guyana

Creating Multipoint Shapes 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.

• Create multipoint shapes
• Use loops to create patterns
• Create the flag of Bahrain

Creating Shapes Using Paths e are many flags that...