Javascript Paint с использованием Canvas

Итак, для того, чтобы сделать графический редактор нужны:

Базовые знания HTML5, JS
Браузер
Canvas

Создаем объекты:

<div class="container">
  <canvas id='canvas' width="600" height="600">Ваш браузер устарел!</canvas>
  <div id="palette"></div>
  <div id="clear">Очистить изображение</div>
</div>

canvas (холст) - для рисования на нем palette - палитра clear - для очистки контекста Оформим стили:

.button {
  width: 15px;
  height: 15px;
  display: inline-block;
  padding: 1px;
  cursor: pointer;
  border: solid 1px #fff;
}
 
.button:hover {
  border: solid 1px #f00;
}
 
.button:active {
  border: solid 1px #ff0;
}
 
#palette, #canvas {
  display: inline-block;
  border: solid 1px #aaa;
  cursor: default;
  vertical-align: top;
}
 
#palette {
  width: 95px;
}
 
#clear {
  background: #eee;
  color: #777;
  padding: 10px;
  width: 200px;
  text-align: center;
  margin: 15px auto;
  cursor: pointer;
}
 
.container {
   white-space: normal;
   width: 710px;
}

Собственно приступаем к реализации:

// Выполняем по завершении загрузки страницы
window.addEventListener("load", function onWindowLoad() {
    // Инициализируем переменные
    // Генерируем палитру в элемент #palette
    generatePalette(document.getElementById("palette"));
 
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
 
    // переменные для рисования
    context.lineCap = "round";
    context.lineWidth = 8;
 
    // вешаем обработчики на кнопки
    // очистка изображения
    document.getElementById("clear").onclick = function clear() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    };
 
    // На любое движение мыши по canvas будет выполнятся эта функция
    canvas.onmousemove = function drawIfPressed (e) {
      // в "e"  попадает экземпляр MouseEvent
      var x = e.offsetX;
      var y = e.offsetY;
      var dx = e.movementX;
      var dy = e.movementY;
 
      // Проверяем зажата ли какая-нибудь кнопка мыши
      // Если да, то рисуем
      if (e.buttons > 0) {
        context.beginPath();
        context.moveTo(x, y);
        context.lineTo(x - dx, y - dy);
        context.stroke();
        context.closePath();
      }
    };
 
    function generatePalette(palette) {
      // генерируем палитру
      // в итоге 5^3 цветов = 125
      for (var r = 0, max = 4; r <= max; r++) {
        for (var g = 0; g <= max; g++) {
          for (var b = 0; b <= max; b++) {
            var paletteBlock = document.createElement('div');
            paletteBlock.className = 'button';
            paletteBlock.addEventListener('click', function changeColor(e) {
              context.strokeStyle = e.target.style.backgroundColor;
            });
 
            paletteBlock.style.backgroundColor = (
              'rgb(' + Math.round(r * 255 / max) + ", "
              + Math.round(g * 255 / max) + ", "
              + Math.round(b * 255 / max) + ")"
            );
 
            palette.appendChild(paletteBlock);
          }
        }
      }
    }
});

Очистить изображение

Спасибо за внимание.

Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Циклы и перебирающие методы в JavaScript Canvas с нуля. Аналоговые часы на JS Что такое JavaScript 2D игра на JS. Canvas, поворот изображения. Блог на ReactJS #1. Компоненты. npm, jsx, webpack, webpack-dev-server