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:
Then we step things up looking at more advanced techniques such as:
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!
Welcome to the course! Let's take a look at whats included in this HTML5 Canvas course.
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.
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.
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.
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.
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.
Understanding co-ordinates is essential to creating drawings effectively on the Canvas.
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.
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.
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.
This video looks at the arc and arcTo methods. These methods allow us to draw arcs, circles and rounded corners.
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.
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.
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.
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.
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.
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.
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.
This lecture covers how to scale, rotate and also translate drawings on the canvas.
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.
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.
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.
In this video i go through my solution to the canvas greyscaling challenge.
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.
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.
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.
This video takes a look at my version of the project and the methods I used to draw Mickey Mouse to the canvas.
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!
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.