Question

The core of our program is the createPaint function, which appends the paint interface to the DOM element it is given as an argument. Because we want to build our program piece by piece, we define an object called controls , which will hold functions to initialize the various controls below the image.

var controls = Object.create(null);

function createPaint(parent) {
  var canvas = elt("canvas", {width: 500, height: 300});
  var cx = canvas.getContext("2d");
  var toolbar = elt("div", {class: "toolbar"});
  for (var name in controls)
    toolbar.appendChild(controls[name](cx));

  var panel = elt("div", {class: "picturepanel"}, canvas);
  parent.appendChild(elt("div", null, panel, toolbar));
}

Each control has access to the canvas drawing context and, through that context’s canvas property, to the <canvas> element. Most of the program’s state lives in this canvas—it contains the current picture as well as the selected color (in its fillStyle property) and brush size (in its lineWidth property).

We wrap the canvas and the controls in <div> elements with classes so we can add some styling, such as a gray border around the picture.

This is a book about getting computers to do what you want them to do. Computers are about as common as screwdrivers today, but they contain a lot more hidden complexity and thus are harder to operate and understand. To many, they remain alien, slightly threatening things.