HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

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

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.

canvas

Introduction to the HTML Canvas element

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

Drawing Paths - Lines and Rectangles

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.

Drawing Paths - Curves and Arcs

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.

Drawing Styles on HTML5 Canvas

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.

Gradient Fills on the HTML5 Canvas

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.

Drawing Text on Canvas

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.

HTML Canvas and Images

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.

Canvas Effects

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

Canvas Transformations

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

Canvas and Pixels

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

Listening for Mouse and Keyboard Events with HTML Canvas

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

Learn HTML5 Graphics and Animation

Keith Peters

Course Content