HTML5 Canvas Fundamentals
Pluralsight
Course Summary
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 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!
-
+
Course Syllabus
Getting Started with the HTML5 Canvas- 41m 26s
—Introduction 3m 28s
—HTML5 Canvas Usage Scenarios 4m 49s
—Demo: Game Demos 5m 57s
—Demo: Engaging Applications 2m 29s
—Demo: Charting 2m 15s
—HTML5 Canvas Fundamentals 5m 29s
—Hello World Demo 9m 5s
—Overview of the Canvas API 3m 53s
—Demo: Canvas API Documentation 2m 50s
—Summary 1m 11sDrawing with the HTML5 Canvas- 1h 32m
—Introduction 1m 12s
—Drawing Rectangles and Ellipses 5m 48s
—Demo: Simple Bar Chart 12m 6s
—Demo: Simple Bar Chart with Transforms 7m 17s
—Demo: Drawing Circles 8m 19s
—Demo: Using arcTo() 5m 13s
—Drawing Lines and Paths 5m 23s
—Demo: Drawing Lines 6m 20s
—Demo: Simple Line Chart 4m 14s
—Demo: Using bezierCurveTo() 3m 3s
—Demo: Using quadraticCurveTo() 3m 17s
—Drawing Text 1m 24s
—Demo: Filling, Stroking, and MeasuringText 3m 59s
—Demo: Using Canvas Transforms with Text 5m 50s
—Drawing Images 1m 49s
—Demo: Using Image Functions 9m 59s
—Drawing Video 1m 26s
—Demo: Syncing Video with a Canvas 4m 37s
—Summary 1m 15sManipulating Pixels- 1h 15mBuilding a Custom Data Chart- 1h 3m