Основание

Ядро нашей программы – функция createPaint, добавляющая интерфейс рисования к элементу DOM, который передаётся в качестве аргумента. Так как мы создаём программу последовательно, мы определяем объект controls, который будет содержать функции для инициализации разных элементов управления под картинкой.

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));

}

У каждого элемента управления есть доступ к контексту рисования на холсте, а через него – к элементу <canvas>. Основное состояние программы хранится в этом холсте – он содержит текущую картинку, выбранный цвет (в свойстве fillStyle) и размер кисти (в свойстве lineWidth).

Мы обернём холст и элементы управления в элементы <div> с классами, чтобы можно было добавить им стили, например серую рамку вокруг картинки.