- Додав назву
- ==Додавання розміру полотна:
- Додав тег <canvas> з ідентифікатором.
- Додав в css властивість та значення для полотна.
- Додав у функцію isNumenric(value) перевірку на пробіли value.trim() !== " ".
- Заповнив тіло функції setWidth(), якщо функція isNumeric(value) істина тоді canvas.width = value; в інакшому випадку alert("Помилка вводу");
- Додав в html поле для вводу ширини.
- Створив функцію setHeight() з перевіркою функції isNumeric() яка змінює висоту полотна paintcanvas.height.
- Додав в html поле для вводу розміру полотна type="text; onchange="setHeight(this.value);
- ==Малювання:==
- Додав дві функції startPaint() та endPaint() де isPainting істинний перша функція, друга функція встановлює isPainting - хибний.
- Створив функцію doPaint() з параметрами x та y. Ця функція перевіряє чи можна малювати якщо зміна isPainting == true тоді виконуємо функцію paintCircle(x, y).
- Додав в канву атрибути для керування мишею які виконують функції: startPainting(), doPaint(event.offsetX, event.offsetY), endPaint().
- ==Вибір кольору:==
- Створив функцію setColor(newColor) з параметром newColor куди передався колір та присвоїв змінній color = newColor.
- Створив кнопку для вибору кольору з обробником подій onchange="setColor(this.value)
- ==Додавання повзунка для зміни розміру пера.==
- Додав функцію resizeBrush(newSize) з параметром.
- В тілі функції змінній radius присвоїв значення змінної newSize.
- document.getElementById("sizeOutput").value = newSize;
- На панелі html створив повзунок:
<input type="range" min="1" max="50" value="50" oninput="resizeBrush(this.value)"/>- Додав тег для виводу розміру пера:
<otput id="sizeOutput">10</output> - Додав кнопку на html панель для очистки полотна.