Події клавіатури 1/2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Square</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas, ctx;
var width, height;
var object = [];
var go = 5;
function drawCanvas() {
clear();
ctx.fillStyle = object.color;
ctx.beginPath();
ctx.fillRect(object.x, object.y, object.w, object.h);
ctx.closePath();
ctx.fill();
}
function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function startLoad() {
object.x = 310;
object.y = 230;
object.w = 50;
object.h = 50;
object.color = "rgba(255, 35, 35, 1)";
}
$(function() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
width = canvas.width;
height = canvas.height;
startLoad();
drawCanvas();
var minX = 0;
var maxX = width - object.w;
var minY = 0;
var maxY = height - object.h;
$(window).keydown(function(e) {
switch (e.keyCode) {
case 38:
if ((object.y - go) > minY) {
object.y = object.y - go;
} else {
object.y = minY;
}
break;
case 40:
if ((object.y + go) < maxY) {
object.y = object.y + go;
} else {
object.y = maxY;
}
break;
case 37:
if ((object.x - go) > minX) {
object.x = object.x - go;
} else {
object.x = minX;
}
break;
case 39:
if ((object.x + go) < maxX) {
object.x = object.x + go;
} else {
object.x = maxX;
}
break;
}
});
setInterval(drawCanvas, 30);
});
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Визначаємо мета-дані для кодування та налаштування вигляду сторінки -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Встановлюємо заголовок сторінки -->
<title>Mouse Drawing</title>
<style>
/* Стилі для канваса, щоб додати межу і визначити його вигляд */
#canvas {
    border: 1px solid black;
    display: block;
    margin-bottom: 10px;
}

/* Стилі для кнопок, щоб зробити їх квадратними і зручними для натискання */
button {
    width: 50px;
    height: 50px;
    border: none;
    margin: 5px;
    cursor: pointer; /* Змінюємо курсор на руку при наведенні */
}

/* Стилі для кольорових кнопок */
.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

.green {
    background-color: green;
}
</style>
</head>
<body>
<!-- Канвас, на якому можна малювати за допомогою миші. Визначені події для малювання -->
<canvas id="canvas" width="800" height="600" 
    onmousedown="startDrawing(event)"  
    onmousemove="draw(event)"         
    onmouseup="stopDrawing()">        
</canvas>

<!-- onmousedown - Подія, коли кнопка миші натиснута  -->
<!-- onmousemove - Подія, коли миша рухається з натиснутою кнопкою -->
<!-- onmouseup - Подія, коли кнопка миші відпускається -->

<!-- Кнопки для вибору кольору малювання -->
<button class="red"  onclick="changeColor('red')"></button>  <!-- Кнопка для червоного кольору -->
<button class="blue"  onclick="changeColor('blue')"></button> <!-- Кнопка для синього кольору -->
<button class="green"  onclick="changeColor('green')"></button> <!-- Кнопка для зеленого кольору -->

<script>
    // Отримуємо доступ до елементів канваса і контексту для малювання
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let isDrawing = false; // Статус малювання: чи активне малювання
    let currentColor = 'black'; // Початковий колір малювання

    // Функція для початку малювання
    function startDrawing(event) {
        isDrawing = true; // Включаємо малювання
        let x = event.offsetX; // Отримуємо координати миші по осі X
        let y = event.offsetY; // Отримуємо координати миші по осі Y

        // Налаштовуємо стиль малювання
        ctx.lineWidth = 5; // Ширина лінії
        ctx.lineJoin = 'round'; // Закруглення ліній
        ctx.lineCap = 'round'; // Закруглення кінців лінії
        ctx.strokeStyle = currentColor; // Колір лінії
        ctx.fillStyle = currentColor; // Колір заливки (якщо потрібно)

        ctx.beginPath(); // Починаємо малювати
        ctx.moveTo(x, y); // Переміщаємо точку початку лінії до позиції миші
    }

    // Функція для малювання
    function draw(event) {
        if (!isDrawing) return; // Якщо малювання не активне, не малюємо
        let x = event.offsetX; // Отримуємо координати миші по осі X
        let y = event.offsetY; // Отримуємо координати миші по осі Y
        ctx.lineTo(x, y); // Малюємо лінію до нових координат
        ctx.stroke(); // Застосовуємо лінію на канвас
    }

    // Функція для завершення малювання
    function stopDrawing() {
        isDrawing = false; // Вимикаємо малювання
    }

    // Функція для зміни кольору малювання
    function changeColor(color) {
        currentColor = color; // Оновлюємо поточний колір
    }
</script>
</body>
</html>