HTML5 Javascript Canvas : Collision - Drag And Drop

by Spsoi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <canvas id ="tutorial" width="1000" height="1000"></canvas>
    <script src="canvas.js"></script>
</body>
</html>

CSS

canvas{
    border: 1px solid black;
}

JavaScript

let ctx = null;
let elementClick = null;
let x_before;
let y_before;
let elements = [ // элементы для отрисовки
    {
        name: '1',
        color: 'blue',
        width: 100,
        height: 100,
        top: 20,
        left: 15
    },
    {
        name: '2',
        color: 'red',
        width: 100,
        height: 100,
        top: 50,
        left: 125
    },
    {
        name: '3',
        color: 'yellow',
        width: 100,
        height: 100,
        top: 150,
        left: 185
    },
    {
        name: '4',
        color: 'green',
        width: 100,
        height: 100,
        top: 300,
        left: 235
    },
];


function coordinateMouseByCanvas(event) {
    let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport 
    x_click = event.clientX - infoPos.left; // пиксель по x внутри тэга canvas на который нажали
    y_click = event.clientY - infoPos.top; // пиксель по y внутри тэга canvas на который нажали
    return { x: x_click, y: y_click }
}

function releaseMouseButton(event) { // отпускаем мышку
    // 5
    let mouse = coordinateMouseByCanvas(event);
    if (!elementClick) { return }
    elementClickLeftEdge = elementClick.left; // левая сторона
    elementClickRightEdge = elementClick.left + elementClick.width; // правая сторона

    elementClickTopEdge = elementClick.top; // верхняя сторона
    elementClickBottomEdge = elementClick.top + elementClick.height; // нижняя сторона

    let elementFound = false;
    elements.forEach(function (element) { // где находятся элементы

        x_final = element.left + element.width; // правый край элемента по x
        y_final = element.top + element.height; // низ края элемента по y

        // Мышка над элементом
        if (mouse.x > element.left && mouse.x < x_final && mouse.y > element.top && mouse.y < y_final) { //!*
            elementClick.top = element.top;
            elementClick.left = element.left;
           ...