Пофиксите... "<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Улучшенная Рисовалка с Undo/Redo и Манипуляцией Фигурами</title>
    <!-- Подключение Google Fonts для улучшения типографики -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        /* Сброс базовых стилей и установка коробочной модели */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        h1 {
            margin-bottom: 20px;
            color: #333;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        #toolbar {
            background: #fff;
            padding: 15px 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 20px;
            width: 90%;
            max-width: 1200px;
        }

        .tool-group {
            display: flex;
            align-items: center;
            margin-right: 20px;
            flex-wrap: wrap;
        }

        .color-button, .tool-button {
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 50%;
            margin-right: 10px;
            cursor: pointer;
            transition: transform 0.2s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .color-button:hover, .tool-button:hover {
            transform: scale(1.1);
        }

        .color-button.active, .tool-button.active {
            border: 2px solid #333;
        }

        #colorPicker {
            margin-right: 15px;
            border: none;
            width: 36px;
            height: 36px;
            cursor: pointer;
            padding: 0;
            background: none;
        }

        #lineWidth {
            width: 100px;
            margin-right: 15px;
        }

        #controls {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        #controls button {
            padding: 10px 15px;
            margin-right: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.3s, transform 0.2s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            background: #95a5a6;
            color: #fff;
        }

        #controls button:hover {
            background: #7f8c8d;
            transform: scale(1.05);
        }

        #canvasContainer {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            overflow: hidden;
            position: relative;
            width: 100%;
            max-width: 1200px;
        }

        #canvas {
            display: block;
            width: 100%;
            height: 700px;
            touch-action: none; /* Отключает прокрутку при рисовании на сенсорных устройствах */
        }

        /* Адаптивность для мобильных устройств */
        @media (max-width: 600px) {
            #toolbar {
                flex-direction: column;
                align-items: flex-start;
            }

            #controls {
                margin-top: 10px;
                width: 100%;
                justify-content: space-between;
            }

            #lineWidth {
                width: 80px;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <h1>Улучшенная Рисовалка с Undo/Redo и Манипуляцией Фигурами</h1>
    <div id="toolbar">
        <div class="tool-group">
            <!-- Цветные кнопки -->
            <button class="color-button active" style="background-color: #000000;" data-color="#000000" title="Чёрный"></button>
            <button class="color-button" style="background-color: #e74c3c;" data-color="#e74c3c" title="Красный"></button>
            <button class="color-button" style="background-color: #f1c40f;" data-color="#f1c40f" title="Жёлтый"></button>
            <button class="color-button" style="background-color: #2ecc71;" data-color="#2ecc71" title="Зелёный"></button>
            <button class="color-button" style="background-color: #3498db;" data-color="#3498db" title="Синий"></button>
            <button class="color-button" style="background-color: #9b59b6;" data-color="#9b59b6" title="Фиолетовый"></button>
            <button class="color-button" style="background-color: #ffffff; border: 1px solid #ccc;" data-color="#ffffff" title="Белый"></button>
            <!-- Цветовой пикер -->
            <input type="color" id="colorPicker" title="Выбрать цвет" value="#000000">
        </div>
        <div class="tool-group">
            <!-- Выбор толщины линии -->
            <label for="lineWidth" style="margin-right: 5px; font-weight: 500;">Толщина:</label>
            <input type="range" id="lineWidth" min="1" max="20" value="2">
        </div>
        <div class="tool-group">
            <!-- Инструменты рисования фигур -->
            <button class="tool-button" id="penBtn" title="Перо">
                <!-- SVG иконка пера -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#555">
                    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm20.71-14.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a1.003 1.003 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
                </svg>
            </button>
            <button class="tool-button" id="eraserBtn" title="Ластик">
                <!-- SVG иконка ластика -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#555">
                    <path d="M16.24,3.76c-0.39-0.39-1.02-0.39-1.41,0l-10,10c-0.39,0.39-0.39,1.02,0,1.41l5.3,5.3c0.39,0.39,1.02,0.39,1.41,0l10-10 C16.63,4.78,16.63,4.15,16.24,3.76z M15,14.41l-5.3,5.3L5.71,14c-0.19-0.19-0.19-0.51,0-0.7l9-9c0.19-0.19,0.51-0.19,0.7,0l4.14,4.14 C15.19,13.9,15.19,14.22,15,14.41z"/>
                </svg>
            </button>
            <!-- Инструменты рисования фигур -->
            <button class="tool-button" id="lineBtn" title="Прямая линия">
                <!-- SVG иконка линии -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#555">
                    <path d="M19,19H5V5h14V19z M19,3H5c-1.1,0-2,0.9-2,2v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M7,17l5-5l-5-5V17z"/>
                </svg>
            </button>
            <button class="tool-button" id="rectangleBtn" title="Квадрат">
                <!-- SVG иконка квадрата -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#555">
                    <path d="M19,5H5c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V7C21,5.9,20.1,5,19,5z M19,19H5V7h14V19z"/>
                </svg>
            </button>
            <button class="tool-button" id="circleBtn" title="Окружность">
                <!-- SVG иконка окружности -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#555">
                    <path d="M12,4c4.41,0,8,3.59,8,8s-3.59,8-8,8s-8-3.59-8-8S7.59,4,12,4 M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10 s10-4.48,10-10S17.52,2,12,2z"/>
                </svg>
            </button>
            <button class="tool-button" id="triangleBtn" title="Треугольник">
                <!-- SVG иконка треугольника -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#555">
                    <path d="M12,2L22,20H2L12,2z"/>
                </svg>
            </button>
        </div>
        <div class="tool-group">
            <!-- Undo и Redo -->
            <button id="undoBtn" title="Отменить (Ctrl+Z)">Undo</button>
            <button id="redoBtn" title="Повторить (Ctrl+Y)">Redo</button>
            <!-- Управление порядком наложения -->
            <button id="bringToFrontBtn" title="Переместить вперед">Вперед</button>
            <button id="sendToBackBtn" title="Переместить назад">Назад</button>
            <!-- Очистить и Сохранить -->
            <button id="clearBtn" title="Очистить холст">Очистить</button>
            <button id="saveBtn" title="Сохранить рисунок">Сохранить</button>
        </div>
    </div>
    <div id="canvasContainer">
        <canvas id="canvas" width="1200" height="700"></canvas>
    </div>

    <script>
        // Получение элементов DOM
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d', { willReadFrequently: true });
        const colorButtons = document.querySelectorAll('.color-button');
        const colorPicker = document.getElementById('colorPicker');
        const lineWidthRange = document.getElementById('lineWidth');
        const clearBtn = document.getElementById('clearBtn');
        const saveBtn = document.getElementById('saveBtn');
        const eraserBtn = document.getElementById('eraserBtn');
        const penBtn = document.getElementById('penBtn');
        const lineBtn = document.getElementById('lineBtn');
        const rectangleBtn = document.getElementById('rectangleBtn');
        const circleBtn = document.getElementById('circleBtn');
        const triangleBtn = document.getElementById('triangleBtn');
        const undoBtn = document.getElementById('undoBtn');
        const redoBtn = document.getElementById('redoBtn');
        const bringToFrontBtn = document.getElementById('bringToFrontBtn');
        const sendToBackBtn = document.getElementById('sendToBackBtn');

        // Переменные состояния
        let isDrawing = false;
        let isDragging = false;
        let isResizing = false;
        let currentColor = '#000000';
        let lineWidth = 2;
        let currentTool = 'pen'; // Возможные значения: pen, eraser, line, rectangle, circle, triangle
        let shapes = []; // Массив для хранения фигур
        let undoStack = [];
        let redoStack = [];
        let selectedShape = null;
        let dragOffsetX = 0;
        let dragOffsetY = 0;
        let startX = 0;
        let startY = 0;
        const resizeHandleSize = 8;

        // Класс для фигур
        class Shape {
            constructor(type, x, y, w, h, color, lineWidth, points=[]) {
                this.type = type; // pen, eraser, line, rectangle, circle, triangle
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
                this.color = color;
                this.lineWidth = lineWidth;
                this.points = points; // Для freehand (pen)
            }

            draw(ctx) {
                ctx.strokeStyle = this.color;
                ctx.lineWidth = this.lineWidth;
                ctx.lineCap = 'round';
                ctx.lineJoin = 'round';
                ctx.beginPath();

                if (this.type === 'line') {
                    ctx.moveTo(this.x, this.y);
                    ctx.lineTo(this.w, this.h);
                } else if (this.type === 'rectangle') {
                    ctx.rect(this.x, this.y, this.w - this.x, this.h - this.y);
                } else if (this.type === 'circle') {
                    const radius = Math.sqrt(Math.pow(this.w - this.x, 2) + Math.pow(this.h - this.y, 2));
                    ctx.arc(this.x, this.y, radius, 0, Math.PI * 2);
                } else if (this.type === 'triangle') {
                    ctx.moveTo(this.x, this.y);
                    ctx.lineTo(this.w, this.h);
                    ctx.lineTo(2 * this.x - this.w, this.h);
                    ctx.closePath();
                } else if (this.type === 'pen' || this.type === 'eraser') {
                    if (this.points.length < 2) return;
                    ctx.moveTo(this.points[0].x, this.points[0].y);
                    for (let i = 1; i < this.points.length; i++) {
                        ctx.lineTo(this.points[i].x, this.points[i].y);
                    }
                }

                ctx.stroke();
            }

            isPointInside(x, y) {
                if (['pen', 'eraser'].includes(this.type)) {
                    // Для freehand рисунков можно реализовать детекцию, если необходимо
                    // Сейчас не реализовано
                    return false;
                }

                if (this.type === 'line') {
                    const distance = pointToLineDistance(x, y, this.x, this.y, this.w, this.h);
                    return distance <= this.lineWidth + 5;
                } else if (this.type === 'rectangle') {
                    const width = this.w - this.x;
                    const height = this.h - this.y;
                    return x >= this.x && x <= this.x + width &&
                           y >= this.y && y <= this.y + height;
                } else if (this.type === 'circle') {
                    const distance = Math.sqrt(Math.pow(x - this.x, 2) + Math.pow(y - this.y, 2));
                    const radius = Math.sqrt(Math.pow(this.w - this.x, 2) + Math.pow(this.h - this.y, 2));
                    return distance <= radius + this.lineWidth;
                } else if (this.type === 'triangle') {
                    // Barycentric Technique
                    const x1 = this.x, y1 = this.y;
                    const x2 = this.w, y2 = this.h;
                    const x3 = 2 * this.x - this.w, y3 = this.h;

                    const areaOrig = Math.abs((x1*(y2 - y3) + x2*(y3 - y1) + x3*(y1 - y2)) / 2.0);
                    const area1 = Math.abs((x - x1)*(y2 - y1) - (x2 - x1)*(y - y1)) / 2.0;
                    const area2 = Math.abs((x - x2)*(y3 - y2) - (x3 - x2)*(y - y2)) / 2.0;
                    const area3 = Math.abs((x - x3)*(y1 - y3) - (x1 - x3)*(y - y3)) / 2.0;

                    return (area1 + area2 + area3) <= (areaOrig + this.lineWidth);
                }

                return false;
            }

            getResizeHandle() {
                return {
                    x: this.w,
                    y: this.h,
                    size: resizeHandleSize
                };
            }

            isOverResizeHandle(x, y) {
                const handle = this.getResizeHandle();
                return x >= handle.x - handle.size && x <= handle.x + handle.size &&
                       y >= handle.y - handle.size && y <= handle.y + handle.size;
            }
        }

        // Функция для расчёта расстояния от точки до линии
        function pointToLineDistance(px, py, x1, y1, x2, y2) {
            const A = px - x1;
            const B = py - y1;
            const C = x2 - x1;
            const D = y2 - y1;

            const dot = A * C + B * D;
            const len_sq = C * C + D * D;
            let param = -1;
            if (len_sq !== 0) // in case of 0 length line
                param = dot / len_sq;

            let xx, yy;

            if (param < 0) {
                xx = x1;
                yy = y1;
            }
            else if (param > 1) {
                xx = x2;
                yy = y2;
            }
            else {
                xx = x1 + param * C;
                yy = y1 + param * D;
            }

            const dx = px - xx;
            const dy = py - yy;
            return Math.sqrt(dx * dx + dy * dy);
        }

        // Перерисовка всех фигур
        function redraw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            shapes.forEach(shape => shape.draw(ctx));
            // Если есть выбранная фигура, выделить её
            if (selectedShape) {
                highlightShape(selectedShape);
            }
        }

        // Выделение выбранной фигуры
        function highlightShape(shape) {
            ctx.save();
            ctx.strokeStyle = 'blue';
            ctx.lineWidth = 1;
            ctx.setLineDash([5, 3]);
            if (shape.type === 'line') {
                ctx.beginPath();
                ctx.moveTo(shape.x, shape.y);
                ctx.lineTo(shape.w, shape.h);
                ctx.stroke();
            } else if (shape.type === 'rectangle') {
                ctx.strokeRect(shape.x, shape.y, shape.w - shape.x, shape.h - shape.y);
            } else if (shape.type === 'circle') {
                const radius = Math.sqrt(Math.pow(shape.w - shape.x, 2) + Math.pow(shape.h - shape.y, 2));
                ctx.beginPath();
                ctx.arc(shape.x, shape.y, radius, 0, Math.PI * 2);
                ctx.stroke();
            } else if (shape.type === 'triangle') {
                ctx.beginPath();
                ctx.moveTo(shape.x, shape.y);
                ctx.lineTo(shape.w, shape.h);
                ctx.lineTo(2 * shape.x - shape.w, shape.h);
                ctx.closePath();
                ctx.stroke();
            }
            // Рисуем ресайз-хэндл
            const handle = shape.getResizeHandle();
            ctx.fillStyle = 'white';
            ctx.strokeStyle = 'black';
            ctx.setLineDash([]);
            ctx.beginPath();
            ctx.rect(handle.x - resizeHandleSize, handle.y - resizeHandleSize, resizeHandleSize * 2, resizeHandleSize * 2);
            ctx.fill();
            ctx.stroke();
            ctx.restore();
        }

        // Отмена действия
        function undo() {
            if (undoStack.length > 0) {
                redoStack.push(JSON.stringify(shapes));
                const previousState = undoStack.pop();
                shapes = JSON.parse(previousState, reviveShape);
                selectedShape = null;
                redraw();
            }
        }

        // Повтор действия
        function redo() {
            if (redoStack.length > 0) {
                undoStack.push(JSON.stringify(shapes));
                const nextState = redoStack.pop();
                shapes = JSON.parse(nextState, reviveShape);
                selectedShape = null;
                redraw();
            }
        }

        // Функция для восстановления экземпляров Shape после JSON.parse
        function reviveShape(key, value) {
            if (value && value.type) {
                const shape = new Shape(value.type, value.x, value.y, value.w, value.h, value.color, value.lineWidth, value.points);
                return shape;
            }
            return value;
        }

        // Добавление фигур и элементов в undo stack
        function pushToUndo() {
            undoStack.push(JSON.stringify(shapes));
            // Ограничение размера undo stack
            if (undoStack.length > 50) {
                undoStack.shift();
            }
            // Очистка redo stack
            redoStack = [];
        }

        // Установка активного инструмента
        function setActiveTool(toolButton, toolType) {
            document.querySelectorAll('.tool-button').forEach(btn => btn.classList.remove('active'));
            if (toolButton) {
                toolButton.classList.add('active');
            }
            currentTool = toolType;
            // Если выбран инструмент рисования, снять выделение с фигур
            if (['pen', 'eraser', 'line', 'rectangle', 'circle', 'triangle'].includes(toolType)) {
                selectedShape = null;
            }
            redraw();
        }

        // Инициализация: установка цветового пикера и толщины линии
        colorPicker.value = '#000000';

        // Установка текущего цвета и обновление активной кнопки цвета
        colorButtons.forEach(button => {
            button.addEventListener('click', () => {
                currentColor = button.getAttribute('data-color');
                colorPicker.value = currentColor;
                // Снять активность инструментов
                document.querySelectorAll('.tool-button').forEach(btn => btn.classList.remove('active'));
                currentTool = 'pen';
            });
        });

        // Изменение текущего цвета при выборе из цветового пикера
        colorPicker.addEventListener('change', (e) => {
            currentColor = e.target.value;
            // Снять активность инструментов
            document.querySelectorAll('.tool-button').forEach(btn => btn.classList.remove('active'));
            currentTool = 'pen';
        });

        // Обновление толщины линии
        lineWidthRange.addEventListener('input', (e) => {
            lineWidth = e.target.value;
        });

        // Очистка холста
        clearBtn.addEventListener('click', () => {
            if (confirm('Вы действительно хотите очистить холст?')) {
                pushToUndo();
                shapes = [];
                selectedShape = null;
                redraw();
            }
        });

        // Сохранение рисунка
        saveBtn.addEventListener('click', () => {
            const link = document.createElement('a');
            link.download = 'рисунок.png';
            link.href = canvas.toDataURL();
            link.click();
        });

        // Undo и Redo
        undoBtn.addEventListener('click', () => {
            undo();
        });
        redoBtn.addEventListener('click', () => {
            redo();
        });

        // Управление порядком наложения
        bringToFrontBtn.addEventListener('click', () => {
            if (selectedShape) {
                const index = shapes.indexOf(selectedShape);
                if (index > -1) {
                    pushToUndo();
                    shapes.splice(index, 1);
                    shapes.push(selectedShape);
                    redraw();
                }
            }
        });

        sendToBackBtn.addEventListener('click', () => {
            if (selectedShape) {
                const index = shapes.indexOf(selectedShape);
                if (index > -1) {
                    pushToUndo();
                    shapes.splice(index, 1);
                    shapes.unshift(selectedShape);
                    redraw();
                }
            }
        });

        // Инструмент "Ластик"
        eraserBtn.addEventListener('click', () => {
            setActiveTool(eraserBtn, 'eraser');
        });

        // Инструмент "Перо"
        penBtn.addEventListener('click', () => {
            setActiveTool(penBtn, 'pen');
        });

        // Инструменты фигур
        lineBtn.addEventListener('click', () => {
            setActiveTool(lineBtn, 'line');
        });

        rectangleBtn.addEventListener('click', () => {
            setActiveTool(rectangleBtn, 'rectangle');
        });

        circleBtn.addEventListener('click', () => {
            setActiveTool(circleBtn, 'circle');
        });

        triangleBtn.addEventListener('click', () => {
            setActiveTool(triangleBtn, 'triangle');
        });

        // Начало взаимодействия
        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', endDrawing);
        canvas.addEventListener('mouseout', endDrawing);

        // Обработка сенсорных устройств
        canvas.addEventListener('touchstart', startDrawing);
        canvas.addEventListener('touchmove', draw);
        canvas.addEventListener('touchend', endDrawing);

        function getMousePos(e) {
            const rect = canvas.getBoundingClientRect();
            if (e.touches) {
                return {
                    x: e.touches[0].clientX - rect.left,
                    y: e.touches[0].clientY - rect.top
                };
            } else {
                return {
                    x: e.clientX - rect.left,
                    y: e.clientY - rect.top
                };
            }
        }

        function startDrawing(e) {
            e.preventDefault();
            const pos = getMousePos(e);
            startX = pos.x;
            startY = pos.y;

            // Проверка на выбор фигуры
            const shape = getShapeAt(pos.x, pos.y);
            if (shape) {
                selectedShape = shape;
                const handle = shape.getResizeHandle();
                if (shape.isOverResizeHandle(pos.x, pos.y)) {
                    isResizing = true;
                } else {
                    isDragging = true;
                    dragOffsetX = pos.x - shape.x;
                    dragOffsetY = pos.y - shape.y;
                }
                redraw();
                return;
            }

            // Если не выбрана фигура, начинается новое рисование
            isDrawing = true;
            pushToUndo();
            if (currentTool === 'pen' || currentTool === 'eraser') {
                const color = currentTool === 'eraser' ? '#ffffff' : currentColor;
                shapes.push(new Shape(currentTool, pos.x, pos.y, pos.x, pos.y, color, lineWidth, [{x: pos.x, y: pos.y}]));
            } else if (['line', 'rectangle', 'circle', 'triangle'].includes(currentTool)) {
                shapes.push(new Shape(currentTool, pos.x, pos.y, pos.x, pos.y, currentColor, lineWidth));
            }
            selectedShape = null;
            redraw();
        }

        function draw(e) {
            e.preventDefault();
            const pos = getMousePos(e);

            if (isDrawing) {
                const currentShape = shapes[shapes.length - 1];
                if (currentTool === 'pen' || currentTool === 'eraser') {
                    currentShape.points.push({x: pos.x, y: pos.y});
                } else if (['line', 'rectangle', 'circle', 'triangle'].includes(currentTool)) {
                    currentShape.w = pos.x;
                    currentShape.h = pos.y;
                }
                redraw();
            } else if (isDragging && selectedShape) {
                selectedShape.x = pos.x - dragOffsetX;
                selectedShape.y = pos.y - dragOffsetY;
                // Для фигур, кроме пера и ластика, обновляем координаты
                if (['line', 'rectangle', 'circle', 'triangle'].includes(selectedShape.type)) {
                    selectedShape.w = selectedShape.type === 'line' ? selectedShape.w + (pos.x - startX) : selectedShape.w;
                    selectedShape.h = selectedShape.type === 'line' ? selectedShape.h + (pos.y - startY) : selectedShape.h;
                }
                redraw();
            } else if (isResizing && selectedShape) {
                selectedShape.w = pos.x;
                selectedShape.h = pos.y;
                redraw();
            }
        }

        function endDrawing(e) {
            if (isDrawing || isDragging || isResizing) {
                pushToUndo();
            }
            isDrawing = false;
            isDragging = false;
            isResizing = false;
        }

        // Обработка клавиатурных сокращений для Undo и Redo
        document.addEventListener('keydown', (e) => {
            if (e.ctrlKey && e.key === 'z') {
                undo();
            }
            if (e.ctrlKey && e.key === 'y') {
                redo();
            }
        });

        // Получение фигуры под курсором
        function getShapeAt(x, y) {
            for (let i = shapes.length - 1; i >= 0; i--) {
                if (shapes[i].isPointInside(x, y)) {
                    return shapes[i];
                }
            }
            return null;
        }

        // Функция для преобразования RGB в HEX (если необходимо)
        function rgbToHex(color) {
            // Создаём временный элемент для получения computed стиля
            const tempElem = document.createElement('div');
            tempElem.style.color = color;
            document.body.appendChild(tempElem);
            const rgb = getComputedStyle(tempElem).color;
            document.body.removeChild(tempElem);

            const result = rgb.match(/\d+/g).map(Number);
            return "#" + ((1 << 24) + (result[0] << 16) + (result[1] << 8) + result[2]).toString(16).slice(1);
        }

        // Перерисовка по умолчанию (можно добавить фон или другие элементы)
        redraw();
    </script>
</body>
</html>"