New Pluralsight Course: HTML5 Canvas Fundamentals
I just finished up a new course for Pluralsight titled HTML5 Canvas Fundamentals that I had a blast putting together. It’s all about the client and involves a lot of pixel manipulation and graphics creation which is challenging and fun at the same time. The goal of the course is to walk you through the fundamentals, start a gradual jog into the API functions, and then start sprinting as you learn how to build a business chart canvas application from scratch that uses many of the available APIs . It’s fun stuff and very useful in a variety of scenarios including Web (desktop or mobile) and even Windows 8 Metro applications. Here’s a sample video from the course that talks about building a simple bar chart using the HTML5 Canvas:
Additional details about the course are shown next.
HTML5 Canvas Fundamentals
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!
|
Getting Started with the HTML5 Canvas
|
| Introduction |
| HTML5 Canvas Usage Scenarios |
| Demo: Game Demos |
| Demo: Engaging Applications |
| Demo: Charting |
| HTML5 Canvas Fundamentals |
| Hello World Demo |
| Overview of the Canvas API |
| Demo: Canvas API Documentation |
| Summary |
|
Drawing with the HTML5 Canvas
|
| Drawing Rectangles and Ellipses |
| Demo: Simple Bar Chart |
| Demo: Simple Bar Chart with Transforms |
| Demo: Drawing Circles |
| Demo: Using arcTo() |
| Drawing Lines and Paths |
| Demo: Drawing Lines |
| Demo: Simple Line Chart |
| Demo: Using bezierCurveTo() |
| Demo: Using quadraticCurveTo() |
| Drawing Text |
| Demo: Filling, Stroking, and Measuring Text |
| Demo: Using Canvas Transforms with Text |
| Drawing Images |
| Demo: Using Image Functions |
| Drawing Videos |
| Demo: Syncing Video with a Canvas |
| Summary |
|
Manipulating Pixels
|
| Introduction |
| Rendering Gradients |
| Demo: Creating Linear Gradients |
| Demo: Creating Radial Gradients |
| Using Transforms |
| Demo: Getting Started with Transform Functions |
| Demo: Using transform() and and setTransform() |
| Accessing Pixels |
| Demo: Creating Pixels Dynamically |
| Demo: Grayscale Pixels |
| Animation Fundamentals |
| Demo: Getting Started with Animation |
| Demo: Using Gradients, Transforms, and Animations |
| Summary |
|
Building a Custom Data Chart
|
| Introduction |
| Creating the CanvasChart Object |
| Creating the CanvasChart Shell Code |
| Rendering Text and Gradients |
| Rendering Data Points Text and Guide Lines |
| Connecting Data Point Lines |
| Rendering Data Points |
| Adding Animation |
| Adding Overlays and Interactivity |
| Summary |
Related Courses:
