Learning HTML Canvas

Learning HTML Canvas

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 2h 10m | 345 MB

JavaScript developers can create freeform graphics on a drawing surface known as the Canvas. The Canvas unlocks the ability to create rich, native web applications with 2D and 3D graphics. In this course, instructor Joe Marini introduces the technical concepts behind Canvas and shows how to perform drawing operations directly in a webpage. Learn how to draw basic and complex shapes, adjust colors and styles, and add shadows, patterns, and gradients. Then explore more advanced techniques such as scaling, rotating, and compositing objects. Plus, discover how to use Canvas elements to build a full-featured slideshow and a double-buffered animation.

Topics include:

  • Canvas examples
  • Drawing shapes, arcs, paths, and curves
  • Drawing text
  • Drawing shadows, patterns, and gradients
  • Using clipping paths
  • Displaying images and video
  • Transforming objects with scaling and rotation
  • Manipulating raw pixels
  • Applying transitions
  • Creating animations
Table of Contents

1 Graphics programming with JavaScript
2 What you should know
3 Interesting canvas examples
4 The canvas element
5 The canvas drawing context
6 Colors and styles
7 Rectangles
8 Lines
9 The canvas state
10 Arcs
11 Paths
12 Bezier and quadratic curves
13 Drawing text
14 Drawing shadows
15 Using patterns
16 Using gradients
17 Images and video
18 Clipping paths
19 Using translate
20 Using scaling
21 Using rotation
22 Custom transformations
23 Compositing and globalAlpha
24 Compositing and globalAlpha example
25 Manipulating raw pixels
26 Building an image slideshow
27 Using smooth transitions
28 Basic animation
29 Double-buffered animation
30 Next steps