>    cx.strokeStyle = input.value;

>  });

>  return elt("span", null, "Color: ", input);

>};

При смене значения поля >color значения свойств контекста холста >fillStyle и >strokeStyle заменяются на новое значение.

Настройка размера кисти работает сходным образом.

>controls.brushSize = function(cx) {

>  var select = elt("select");

>  var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100];

>  sizes.forEach(function(size) {

>    select.appendChild(elt("option", {value: size},

>                           size + " pixels"));

>  });

>  select.addEventListener("change", function() {

>    cx.lineWidth = select.value;

>  });

>  return elt("span", null, "Brush size: ", select);

>};

Код создаёт варианты размеров кистей из массива, и убеждается в том, что свойство холста >lineWidth обновлено при выборе кисти.

Чтобы объяснить, как работает ссылка на сохранение, сначала мне нужно рассказать про URL с данными. В отличие от обычных http: и https:, URL с данными не указывают на ресурс, а содержат весь ресурс в себе. Это URL с данными, содержащий простой HTML документ:

>data:text/html,

Hello!

Такие URL полезны для разных вещей, как, например, включение небольших картинок прямо в файл стилей. Они также позволяют нам ссылаться на создаваемые файлы на стороне клиента, в браузере, не перемещая их сперва на какой-либо сервер.

У элемента холста есть удобный метод >toDataURL, который возвращает URL с данными, содержащий картинку на холсте в виде графического файла. Но нам не следует обновлять ссылку для сохранения при каждом изменении картинки. В случае больших картинок перемещение данных в URL занимает много времени. Вместо этого мы подключаем обновление к ссылке, чтоб она обновляла свой атрибут >href каждый раз, когда она получает фокус с клавиатуры или над ней появляется курсор мыши.

>controls.save = function(cx) {

>  var link = elt("a", {href: "/"}, "Save");

>  function update() {

>    try {

>      link.href = cx.canvas.toDataURL();

>    } catch (e) {

>      if (e instanceof SecurityError)

>        link.href = "javascript:alert("

>          JSON.stringify("Can't save: " + e.toString()) + ")";

>      else

>        throw e;

>    }

>  }

>  link.addEventListener("mouseover", update);

>  link.addEventListener("focus", update);

>  return link;

>};

Таким образом, линк просто сидит себе тихонечко и указывает на неправильные данные, но как только пользователь приблизится к нему, он волшебным образом обновляет себя так, чтобы указывать на текущую картинку.

Если вы загрузите большую картинку, некоторые браузеры поперхнутся слишком большим URL с данными, который получится в результате. Для маленьких картинок система работает без проблем.