We can deconstruct a Canvas drawing into three simple steps:

1. Create the canvas and its context.
2. Configure the context.
3. Render the resulting bitmap.

To mount the canvas within your DOM you create a <canvas> element in HTML:

<canvas id=”main-canvas” width = “600” height=”400”></canvas>

It will look empty, as expected:

This will be all the DOM you will see of your canvas. All other operations will happen via the Canvas context in JavaScript.

If you wanted to draw a rectangle in, say, royalblue, you would move onto JavaScript without looking back to the HTML and write:

var canvas = d3.select('#main-canvas').node();
var context = canvas.getContext('2d');

context.fillStyle = 'royalblue';
context.fillRect(50, 50, 200, 100);

Let's go through our first steps one by one:

1. First, you reference the canvas in a variable. We'll use d3.select() to do so. As you will need a reference to the canvas element itself, not a selection, you should use D3's selection.node() method to grab the element itself. The next line references the drawing context to this specific canvas element. The context includes all the tools you can use to draw. You can console.log(‘context') to have a look at the context object:

At this point, you have the canvas to draw on and the drawing tools, but you still haven't drawn anything.

2. In the second step you prepare the drawing. You configure the context to produce the desired drawing. The example is purposefully simple in that the only configuration is to set the fill of our yet non-existent object to royalblue. Note that context.fillStyle is a property, not a method, of the Canvas context. It's like you are a painter telling your brush box what color you want to use for the object you paint next.

3. This third step produces the following image. context.fillRect() takes four arguments: the x and the y position of the rectangle's starting point as well as the width and the height. Canvas – like SVG – uses a Cartesian co-ordinate system with the origin 0, 0 at the top-left corner increasing to the right and to the bottom. All values are given in pixels:

This rectangle is not present in the DOM. You can see its configuration in JavaSript and the canvas its drawn to in the DOM, but there's no <rect> element or the like we could refer to. Again, don't grow worry lines; we will get clever about how to re-address it in the next two chapters.

You have seen the basic steps to follow when producing pretty much any drawing with Canvas. These key conceptual steps will help you to approach any Canvas drawing. Now let's draw more.