HTML5 Canvas Fundamentals

The HTML5 Canvas Fundamentals course provides an in-depth look at working with the HTML5 Canvas and shows how it can be used to display data, animate shapes, and perform many other useful functions.
Course info
Rating
(264)
Level
Intermediate
Updated
Jun 12, 2012
Duration
4h 32m
Table of contents
Getting Started with the HTML5 Canvas
Drawing with the HTML5 Canvas
Manipulating Pixels
Building a Custom Data Chart
Description
Course info
Rating
(264)
Level
Intermediate
Updated
Jun 12, 2012
Duration
4h 32m
Description

The HTML5 Canvas provides a powerful way to render graphics, charts, and other types of visual data without relying on plugins such as Flash or Silverlight. In this course you’ll be introduced to key features available in the canvas API and see how they can be used to render shapes, text, video, images, and more. You’ll also learn how to work with gradients, perform animations, transform shapes, and build a custom charting application from scratch. If you're looking to learn more about using the HTML5 Canvas in your Web applications then this course will break down the learning curve and give you a great start!

About the author
About the author

Dan Wahlin founded Wahlin Consulting, which provides consulting and training services on JavaScript, Angular, Node.js, C#, ASP.NET MVC, Web API, and Docker. He is a Google GDE, Microsoft MVP and Regional Director, and speaks at conferences and user groups around the world.

More from the author
More courses by Dan Wahlin
Section Introduction Transcripts
Section Introduction Transcripts

Drawing with the HTML5 Canvas
In this module, we're going to jump into the different functions and properties that can be used to draw different types of shapes, lines, and other objects onto a canvas dynamically with JavaScript. So, I'm going to start off by talking about some of the more familiar shapes such as rectangles, ellipses, circles, and arcs. And explain the API functions you can use and how we can style those and add color and other items into those using properties. From there, we're going to go into lines and talk about different types of paths such as Bezier curves and quadratic curves, and show some different types of shape that you can draw dynamically there. From there, we'll switch gears and talk about text, images, and videos. So we'll first start off by talking about how we can render just some simple text. We can actually measure text to see how big it is, to make sure it fits in a certain area. We can then also embed images, if we'd like. And we can even tie the HTML5 video tag into the canvas to do some pretty creative types of effects and I showed a pretty cool example of that in module 1 in the different HTML file canvas demos that I did. So let's go ahead and jump right into the first set of APIs and that relates to rectangles and ellipses.

Manipulating Pixels
In this module, we're going to drop down to the pixel level of the HTML5 canvas and learn how we can interact with pixels directly. Up to this point you've seen how we can render shapes and lines and images and even video. But what if you want to dynamically generate graphics and render pixels on the fly or manipulate a picture in some way that may be on the canvas, work with gradients, or even animate pixels and the different items that are in your canvas. So here's the overall agenda of this module. We're going to start off by talking about how to work with linear and radial gradients. From there we'll move into transforms and we'll even learn a little matrix algebra along the way and learn how we can scale and rotate and translate items on a canvas. We'll talk about direct pixel access. And this is very useful if you want to get little more advanced and iterate through pixels on a canvas and maybe grayscale an image, for instance. And then finally we'll talk about how do we animate pixels on the canvas, and we'll talk about a loop we can write using either a timer or a built-in browser feature for some of the more modern browsers out there that allow us on a time basis update the pixels on the canvas. So let's go ahead and jump into gradients.

Building a Custom Data Chart
Up to this point in the course, you've seen several of the different API's available with the HTML5 canvas. And what we're going to do in this module is put many of those together in a single canvas application. And what I'm going to demonstrate is building a type of business chart using the canvas from start to finish. We'll start out literally with an empty screen and we'll add some code, add a lot of different features along the way including a lot of the key features we've already talked about like gradients, lines, circles, and more. So the official agenda shown here we're going to start off by creating a CanvasChart Object. And that's just going to be an empty Java script object that follows a pattern called the revealing module pattern to allow for better re-use and better encapsulation of our code and really simplifies maintenance down the road as well. From there we're going to talk about how we can renderText and gradients to start out with our canvas in our chart we're going to build. We'll learn about rendering different types of text as far as the individual data points and the individual lines, kind of the guidelines for the chart. We'll then render the actual lines for the data supplied by the end user, render the data points which will be some circles. And you're going to see the user will have an option to just rend the lines or the points or both. And then finally we're going to talk about how we can add animations into the mix and animate the points that will actually render on this chart and also show how those points as you mouse over them can have some interactivity and have some overlays to show the actual data. So let's go ahead and start off by taking a look at how we can create the CanvasChart Object that will represent our canvas.