Learn HTML5 Graphics and Animation

84 minutes

HTML5 includes powerful drawing APIs that allow you to use the canvas element and JavaScript to draw whatever you want, directly on the page.

pro-course-rss-logo

PRO RSS Feed

Introduction to the HTML Canvas element

Drawing Paths - Lines and Rectangles

Drawing Paths - Curves and Arcs

P

Drawing Styles on HTML5 Canvas

P

Gradient Fills on the HTML5 Canvas

P

Drawing Text on Canvas

P

HTML Canvas and Images

P

Canvas Effects

P

Canvas Transformations

P

Canvas and Pixels

P

Listening for Mouse and Keyboard Events with HTML Canvas

P

Animating with Canvas

P
js tutorial about Introduction to the HTML Canvas element

Introduction to the HTML Canvas element

4:55 js

The HTML Canvas element allows us to access powerful drawing APIs from JavaScript. In this lesson, the first in a series, we will learn about <canvas>, and get ready to start drawing.

js tutorial about Drawing Paths - Lines and Rectangles

Drawing Paths - Lines and Rectangles

3:06 js

Now that we have an HTML5 canvas to draw on, let's take a look at drawing simple lines and rectangles with JavaScript

js tutorial about Drawing Paths - Curves and Arcs

Drawing Paths - Curves and Arcs

5:16 js PRO

When drawing on your HTML canvas in JavaScript, you aren't restricted to straight lines. Using curves and arcs you are able to create smooth curved lines.

js tutorial about Drawing Styles on HTML5 Canvas

Drawing Styles on HTML5 Canvas

5:31 js PRO

You aren't limited to boring black lines when drawing on the HTML5 canvas element. Using styles, you can program interesting colorful images with JavaScript.

js tutorial about Gradient Fills on the HTML5 Canvas

Gradient Fills on the HTML5 Canvas

5:20 js PRO

When drawing on the HTML5 canvas element, your fills aren't limited to flat colors. You can use gradients to get smoothly blended color fills on your drawn elements.

js tutorial about Drawing Text on Canvas

Drawing Text on Canvas

6:45 js PRO

With the HTML canvas you can easily draw text as well as graphics. Let's take a look at basic text manipulation on the canvas.

js tutorial about HTML Canvas and Images

HTML Canvas and Images

6:50 js PRO

In addition to vector drawing, you can draw bitmap images into a canvas, and also retrieve a bitmap based on the content in a canvas.

js tutorial about Canvas Effects

Canvas Effects

7:14 js PRO

Learn some of the different ways you can affect the graphical content that you are drawing to a canvas. We'll cover global alpha, global composite operations and shadows.

js tutorial about Canvas Transformations

Canvas Transformations

8:44 js PRO

Transformations can change the default canvas coordinate system and create complex drawings with much less code.

js tutorial about Canvas and Pixels

Canvas and Pixels

10:38 js PRO

In this lesson, you'll learn how to read and write individual pixel color values from a canvas.

js tutorial about Listening for Mouse and Keyboard Events with HTML Canvas

Listening for Mouse and Keyboard Events with HTML Canvas

10:40 js PRO

In this lesson, listening for and handling mouse and keyboard events in Canvas is covered.

js tutorial about Animating with Canvas

Animating with Canvas

9:18 js PRO

In this lesson, we cover several different ways to animate graphics drawn to Canvas.

Presented by:

Keith Peters

Keith Peters is a developer based in the Boston area. He is the author / coauthor of over a dozen programming books including Playing with Chaos: Programming Fractals and Strange Attractors in JavaScript and HTML 5 Animation with Javascript and the Actionscript 3.0 Cookbook.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?