Discover HTML5 Canvas essentials, draw shapes, delve into transformations and animations, and explore interactive applications with advanced mouse and keyboard handling. Gain insights into creating dynamic web graphics.

Kirupa is an MIT grad who works at Microsoft as Senior Program Manager. He has been tinkering with web technologies since 1998. He works on the Edge browser team where he gets to sink his teeth into the cutting-edge web technologies.

HTML5 is taking over the browsers and one of the coolest things in HTML5 is the canvas - the immediate mode drawing surface you have in HTML for bringing pixels to life using JavaScript. It is used to create games, graphs, and animations.

This is an extensive course with interactive playgrounds (so you don't have to install anything). The course can be divided into four parts.

1. Understand basics of Canvas and compare it with DOM.
2. Learn how to draw shapes.
3. Take a deep dive into canvas transformations and animations.
4. Explore advanced mouse and keyboard handling to create truly interactive applications using canvas.

If none of what I just wrote makes sense, then the content here is just what you need 😀 . Let's get started.

HTML5 Canvas: From Noob to Ninja - an interactive deep dive

Earlier, we looked at an example where we drew a simple four-sided shape. The `canvas` code for that looked as follows:

<!DOCTYPE html>
<html>
 
<head>
  <title>Simple Example</title>
  <style>
    canvas {
      border: #333 10px solid;
    }
  </style>
</head>
 
<body>
  <canvas id="myCanvas" width="550px" height="350px"></canvas>

</body>
 
</html>

var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");

context.moveTo(160, 130);
context.lineTo(75, 200);
context.lineTo(150, 275);
context.lineTo(250, 230);
context.closePath();
 
context.lineWidth = 5;
context.strokeStyle = "#333333";
context.fillStyle = "#FFCC00";
 
context.fill();
context.stroke();

codemirror

Now, let's say that we want to add another shape to what we have here. The shape we want looks something like this:

var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");

context.moveTo(50, 50);
context.lineTo(450, 300);
context.closePath();
 
context.lineWidth = 45;
context.strokeStyle = "steelblue";
 
context.fill();
context.stroke();


What do you think we should do to combine these shapes? One thing we learned from earlier is that the `stroke()` and `fill()` methods act as the big red button you push to get things displayed on our screen. One reasonable attempt might be to keep the common `stroke()` and `fill()` methods from earlier and merge in the lines of code that represent our diagonal line.

On the surface, this seems like a reasonable thing to do. The first part of the code deals with the four-sided shape and what it looks like. The second (and highlighted) part deals with our diagonal line and what it looks like. In my mind, this seems like a solid solution!

When we preview this in our browser, this is what you will see:

DOM vs. Canvas

Getting Started with the Canvas

Drawing Basics / Lines

Drawing Curves

Drawing Multiple Things

Drawing Rectangles (and Squares)

Drawing Triangles

Drawing Circles

Modifying How Your Corners Look

Working with Colors

Drawing Text

Drawing Images

Canvas Transformations

Structuring Your Drawing Code

Animating with requestAnimationFrame

Creating Animations on the Canvas

Animating Many Things on the Canvas

Creating Motion Trails

Creating Sprite Animations

Working With the Mouse

Follow the Mouse Cursor

Mouse Follow with Ease

Working With the Keyboard

Moving Shapes Using the Keyboard

Resizing the HTML Canvas Element

Detect Whether a Font is Installed

This Seems Simple, No?