Paint

Холст для рисования представлен с помощью <canvas>, к нему добавлен addEventListener('mousemove', (...))
и если нажата левая клавиша мыши рисует линию с помощью пути:

  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x - dx, y - dy);
  ctx.stroke();
  ctx.closePath();

Для настроек кисти используется object:

const options = {
  penSize: 5,
  penColor: "Black",
};

Линия рисуется, используя цвет из options
Выбор цвета(button) и размера кисти(<input type="range">) меняют соответствующее значение в options
Определение цвета по текстовому полю реализовано с помощью регулярного выражения, таким образом что допустимыми значениями будут (123 , 123 ,123) и (123,123,123), (123, 123, 123) и тд. Каждое значение R, G и B является отдельной группой в регулярном выражении.

Направление: