To draw our pixels on a page, we first need to understand how to draw pixels on a canvas. In this video, we’re going to quickly cover the HTML canvas API and show how we can use it to draw colors.

The first thing we need to do, is add a canvas tag to our HTML page:

Million Ether Page

  

In our canvas tag, we specify a width and height in the number of pixels that we want to show.

In src/index.js, the first thing we want to do is create a draw() function.

We’ll call this function when the body has loaded.

function draw() {
  // ...
}

document.body.onload = function() {
  draw();
};

Next, we need to fetch the canvas element from the page and start working with it. There are a few layers of APIs we need to go through to get to what we want. But what we’re about to do is get the pixel data from the canvas, and write new pixels onto it.

The API can be a little involved at first, but I’ll walk through each step, and you can check out the canvas API documentation if you want to learn more about the details.

From our canvas, we get what’s called a drawing context. In this case, we want a 2d context, which lets us draw pixels.

Next, we read the image data from the drawing context by using getImageData. The arguments mean we want to start at the first pixel (0,0) and capture the entire image, up to (canvas.width,canvas.height).