New Pluralsight Course: HTML5 Canvas Fundamentals
- by dwahlin
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 Introduction 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:
