[pluralsight-training] HTML5 Canvas Fundamentals (2012)

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 00:41:23
Introduction 03:27
HTML5 Canvas Usage Scenarios 04:48
Demo: Game Demos 05:56
Demo: Engaging Applications 02:29
Demo: Charting 02:15
HTML5 Canvas Fundamentals 05:29
Hello World Demo 09:05
Overview of the Canvas API 03:53
Demo: Canvas API Documentation 02:50
Summary 01:11

Drawing with the HTML5 Canvas 01:32:23
Introduction 01:11
Drawing Rectangles and Ellipses 05:48
Demo: Simple Bar Chart 12:06
Demo: Simple Bar Chart with Transforms 07:17
Demo: Drawing Circles 08:18
Demo: Using arcTo() 05:13
Drawing Lines and Paths 05:22
Demo: Drawing Lines 06:19
Demo: Simple Line Chart 04:13
Demo: Using bezierCurveTo() 03:03
Demo: Using quadraticCurveTo() 03:17
Drawing Text 01:24
Demo: Filling, Stroking, and Measuring Text 03:59
Demo: Using Canvas Transforms with Text 05:50
Drawing Images 01:48
Demo: Using Image Functions 09:58
Drawing Video 01:26
Demo: Syncing Video with a Canvas 04:36
Summary 01:15

Manipulating Pixels 01:15:03
Introduction 01:17
Rendering Gradients 04:36
Demo: Creating Linear Gradients 03:43
Demo: Creating Radial Gradients 04:30
Using Transforms 07:58
Demo: Getting Started with Transform Functions 05:09
Demo: Using transform() and setTransform() 04:52
Accessing Pixels 08:15
Demo: Creating Pixels Dynamically 08:50
Demo: Grayscale Pixels 05:27
Animation Fundamentals 06:09
Demo: Getting Started with Animation 06:00
Demo: Using Gradients, Transforms, and Animations 07:31
Summary 00:46

Building a Custom Data Chart 01:03:27
Introduction 01:47
Creating the CanvasChart Object 04:12
Creating the CanvasChart Shell Code 10:04
Rendering Text and Gradients 07:40
Rendering Data Points Text and Guide Lines 08:23
Connecting Data Point Lines 07:47
Rendering Data Points 04:23
Adding Animation 09:26
Adding Overlays and Interactivity 08:30
Summary 01:15