Get Creative With the HTML5 Canvas
4.9 (12 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.
103 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Get Creative With the HTML5 Canvas to your Wishlist.

Add to Wishlist

Get Creative With the HTML5 Canvas

Create awesome Canvas graphics & animations for websites, apps or games!
4.9 (12 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.
103 students enrolled
Created by Chris Dixon
Last updated 12/2016
English
Curiosity Sale
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Confidently draw to the canvas
  • Create simple or complex canvas shapes
  • Use scripting to add text, gradients, shadows & patterns
  • Add images to the canvas
  • Access image pixel data to manipulate images
  • Loop through patterns to reduce repetitive code
  • Transform canvas drawings such as scaling, rotating and translating
  • Save and restore the canvas state
  • Have a skill which can be applied when building websites, apps or games
View Curriculum
Requirements
  • A basic understanding of Javascript is required to get the most out of this course
  • Students will need to have some basic experience of building a website using HTML
  • A computer with internet connection is required
Description

Learn how to draw amazing graphics and animations using the HTML5 Canvas!

The Canvas is a HTML5 element we can use to add a drawing area to our websites, applications or browser based games. The Canvas is packed full of features to create some amazing graphics.

We begin this course with the basic features including:

  • Setting up the Canvas and creating fallback content for unsupported browsers
  • Scripting 
  • Drawing shapes such as squares, rectangles, arc's and circles
  • Lines & paths
  • Line widths and matching to pixels
  • Working with different types of corners and miters
  • How to remove sections of the canvas
  • Adding Canvas text and styling
  • Color fills, patterns, gradients and shadows

Then we step things up looking at more advanced techniques such as:

  • Bezier & quadratic curves
  • How to save and restore the Canvas
  • Scaling, rotating and translating drawings
  • How to use transformations
  • Accessing pixel data to both draw to the canvas and also manipulate images.
  • Use loops for repetitive tasks
  • Adding canvas animations

This course also includes a free cheat/reference sheet for you to use in the course, or for future reference.

The uses for the Canvas is only limited to your imagination! Everything you need to complete the course is included or free to use, there is no extra software, subscriptions or purchases etc to complete or take this course.

So are you ready to take your skills to the next level?

Join me now and I look forward to having you on board!


Who is the target audience?
  • The ideal student will have a little HTML experience
  • Anybody looking to add the Canvas to their skill set
  • Somebody looking at learning the Canvas to use in HTML5 game development
  • Beginner web designers/developers looking to expand their knowledge
  • Creatives who want to add fun or interactivity to websites
Students Who Viewed This Course Also Viewed
Curriculum For This Course
28 Lectures
03:02:36
+
Introduction & Getting Started
4 Lectures 09:40

Welcome to the course! Let's take a look at whats included in this HTML5 Canvas course.

Preview 02:47

Provided free of charge with this course is a reference/cheat sheet to use both in the course, or for the future. This is available to download in this lecture.

Bonus: Download reference sheet
00:07

Before we get to work on drawing to the Canvas, we first take a quick look at what the Canvas is and what we can use it for.

What is the HTML5 Canvas?
04:10

This is a quick overview of the Udemy dashboard you will see when taking a course. If you have taken Udemy courses previously fell free to skip this lecture.

Udemy guide
02:36
+
Canvas Basics
12 Lectures 01:34:00

This lecture focuses on setting up the Canvas. We begin by registering with CodePen to easily create our development environment. By the end of the video we will have our first Canvas element on the screen with fallback content for non supported browsers. 

Setting up the Canvas
06:54

Now the Canvas is set up we can get to work with some basic rectangles and squares. We also set up of canvas and context variables to re use throughout this course.

Scripting & drawing rectangles
10:00

Understanding co-ordinates is essential to creating drawings effectively on the Canvas.

Understanding the Canvas co-ordinates
02:21

This video introduces you to canvas lines and paths. We look at some methods such as beginPath and closePath. You will also learn about moving the pen on the canvas, drawing lines and filling/stroking techniques. Finally we look at dashed lines. 

Lines & paths
11:48

We move on from the last video by looking at changing line widths. You will also learn how matching to pixels can avoid blurred edges on our drawings.

Line widths & matching to pixels
05:22

You will now learn about various canvas methods to add different types of corners to our drawings. We look at how to round, bevel and miter our corners. Then we move onto lineCap methods and restricting the miter size of a corner.

Corners & miters
06:51

This video looks at the arc and arcTo methods. These methods allow us to draw arcs, circles and rounded corners.

Preview 09:26

The Canvas also allows us to write text and add our own styles and fonts. We look at styling, positioning and also how to change the text baseline.

Adding canvas text
07:43

In this lecture you will learn how to cover up and also remove unwanted sections of the Canvas. This allows us to not only cover unwanted areas, but we can also remove sections to create some interesting shapes.

Removing sections of the canvas
06:24

Using gradients allows to to add some nice visual effects by blending colours. We look at how to create both linear and radial gradients in this video.

Gradients
09:21

We can also add images to the canvas. This video shows you how to draw images and also how to grab images from other areas of the web page to display on the canvas.

Adding images to the canvas
09:27

We begin this lecture by looking at creating canvas patterns using tile images. We also cover adding different shadows to text such as blurs and offsets.

Patterns & shadows
08:23

Section Quiz
4 questions
+
Stepping It Up
9 Lectures 01:08:09

In this video you will learn about 2 different methods for creating curves. We cover both quadratic and bezier type curves. The difference between the two is mainly the number of control points we use to create the curves.

Bezier & quadratic curves
10:10

Saving and restoring the canvas state is a really useful feature of the canvas. We can save the current state at any point and restore back when required.

Preview 06:39

This lecture covers how to scale, rotate and also translate drawings on the canvas.

Scale, rotate & translate
05:04

We take what we learned in the last video and apply these within one canvas method. The transform and setTransform methods allow us to scale, skew and translate in one method.

Canvas transformations
07:28

Now we take a look at dealing with pixels and image data. We use a loop to access all of the pixel data on the canvas and manipulate the pixels individually. This video is preparation for the upcoming challenge to convert a image to black and white.

Working with pixels
10:30

Using what you have learned in the last video, I would now like to challenge you to take a colour image and convert it to black and white by accessing the photos pixel data.

Challenge intro: Converting images to greyscale
03:17

In this video i go through my solution to the canvas greyscaling challenge.

Challenge: Converting images to greyscale
09:43

This video is all about creating patterns by looping. We create a shape and store it inside a function, we then use a for loop to repeat and rotate on each loop.

Looping
09:49

Taking the drawing from the last video, we now move on to looking at animating our canvas drawings. We use the setInterval method to create a spinning effect on our drawing.

Animating
05:29

Section Quiz
3 questions
+
Project
2 Lectures 08:37

Congratulations on getting to the final project! I would like you to use what you have learned throughout the course to draw Mickey Mouses face.

Project intro
01:26

This video takes a look at my version of the project and the methods I used to draw Mickey Mouse to the canvas. 

Let's have some fun: Draw Mickey Mouse!
07:11
+
Thank You
1 Lecture 02:10

Thank you for taking this course. I hope you have learned a lot about the HTML5 Canvas, and also had some fun along the way!

Thank You
02:10
About the Instructor
Chris Dixon
4.5 Average rating
1,148 Reviews
14,682 Students
8 Courses
Web Developer and teacher at CodeSmart Academy

Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and i have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like when I was learning. I also believe the best way to learn is by doing and try to include as many practical examples as possible in my courses.

Thanks for taking an interest and I look forward to you joining me.

Chris