Lynda.COM HTML5 Graphics and Animation Canvas

Author:
Joe Marini

Duration:
03h 07m

Released on:
6/3/2011

Exercise files:
Yes


One of the most exciting additions that HTML5 offers to designers is the ability to draw free-form graphics on a drawing surface known as the Canvas. In this course, author Joe Marini introduces the technical concepts behind Canvas and shows how to perform drawing operations directly in a web page. The course covers drawing basic and complex shapes, setting colors and styles, adding shadows, patterns, and gradients, more advanced techniques such as scaling, rotating, and compositing objects, and how to incorporate Canvas elements in a slideshow and an animation. Exercise files are included with the course.
Topics include:

    Understanding the differences between Canvas and SVG Graphics
    Drawing shapes
    Drawing arcs and paths
    Rendering text
    Using clipping paths
    Drawing images and video
    Transforming objects with the translate tag
    Manipulating raw pixels
    Applying a custom transformation
    Creating an animation or slideshow control with Canvas




Introduction
Welcome           01m 03s
Using the exercise files           02m 03s
Using the HTML5 Canvas element in the real world           01m 48s

1. Examples of Current HTML5 Sites
Real-world example: CanvasMol           02m 09s
Real-world example: Raphaël-JavaScript Library           01m 47s
Real-world example: The Wilderness Downtown           04m 01s
Real-world example: Sketchpad           01m 10s
Real-world example: Pirates Love Daisies           01m 24s

2. Setting Up Your Workspace
Installing the tools           01m 29s
Exploring the Canvas examples used in this course           01m 59s

3. Introducing the Canvas Element
Introducing the Canvas tag           06m 30s
Understanding the differences between Canvas and SVG           02m 28s

4. Understanding the Canvas Element and 2D Drawing API
Identifying the Canvas element's methods and properties           01m 40s
Using the Canvas drawing context           03m 56s

5. Basic Canvas Drawing Techniques
Setting and using colors and styles           03m 19s
Drawing basic shapes: Rectangles and lines           10m 21s
Understanding the Canvas state           05m 15s
Drawing complex shapes: Arcs and paths           09m 15s
Drawing complex shapes: Bézier and quadratic curves           05m 46s
Rendering text           09m 18s

6. Complex Canvas Drawing Techniques
Creating shadows           06m 41s
Drawing with patterns           07m 20s
Drawing with gradients           06m 18s
Using clipping paths           04m 46s
Drawing images and video           07m 30s

7. Advanced Canvas Drawing Operations
Transforming objects using the translate tag           04m 18s
Scaling objects with the scale transformation           04m 07s
Rotating objects with the rotate transformation           04m 33s
Applying a custom transformation           06m 58s
Compositing in Canvas using globalAlpha           06m 36s
Manipulating raw pixels           09m 10s

8. Building Practical Examples
Building an image slideshow control           04m 24s
Using smooth transitions in a slideshow           04m 28s
Creating a basic animation           05m 42s
Creating animation with double buffering           13m 13s
Incorporating Canvas into a real page           13m 36s

Conclusion
Goodbye           00m 48s