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!
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.