RSK World - C++ Shape Drawer - Project Files Browser | RSK World - Free Programming Resources & Source Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>C++ Shape Drawer - Masterpiece Edition | RSK World</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            color: white;
            padding: 50px 0;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 15px;
            margin-bottom: 30px;
        }

        .logo {
            font-size: 4rem;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
        }

        .demo-section {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .demo-container {
            position: relative;
            width: 100%;
            height: 500px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .demo-ui {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 12px;
            font-size: 12px;
            font-family: monospace;
            z-index: 1000;
        }

        .demo-canvas {
            display: block;
            width: 100%;
            height: 100%;
            background: #f0f2f5;
            cursor: crosshair;
        }

        .demo-controls {
            position: absolute;
            bottom: 10px;
            left: 10px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            z-index: 1000;
        }

        .shape-btn-demo {
            background: rgba(255, 255, 255, 0.9);
            border: none;
            width: 35px;
            height: 35px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: all 0.2s;
        }

        .shape-btn-demo:hover {
            background: white;
            transform: scale(1.05);
        }

        .shape-btn-demo.active {
            background: #667eea;
            color: white;
        }

        .color-palette-demo {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: flex;
            gap: 5px;
            z-index: 1000;
        }

        .color-btn-demo {
            width: 25px;
            height: 25px;
            border: 2px solid white;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s;
        }

        .color-btn-demo:hover {
            transform: scale(1.1);
        }

        .color-btn-demo.active {
            border-color: #333;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .feature-card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        .feature-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .feature-description {
            color: #666;
        }

        .controls-section {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 30px;
            margin: 30px 0;
        }

        .control-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .control-item {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }

        .control-key {
            background: #f8f9fa;
            padding: 5px 10px;
            border-radius: 4px;
            font-family: monospace;
            font-weight: bold;
            color: #495057;
        }

        .download-section {
            text-align: center;
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 40px;
            border-radius: 15px;
            margin: 30px 0;
        }

        .download-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-block;
            padding: 15px 30px;
            background: white;
            color: #333;
            text-decoration: none;
            border-radius: 25px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }

        .btn-primary {
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            color: white;
        }

        .btn-secondary {
            background: linear-gradient(45deg, #2ed573, #1e90ff);
            color: white;
        }

        footer {
            text-align: center;
            color: white;
            padding: 30px 0;
            opacity: 0.8;
        }

        .social-links {
            margin-top: 15px;
        }

        .social-links a {
            color: white;
            margin: 0 10px;
            text-decoration: none;
            font-size: 1.5rem;
            transition: opacity 0.3s ease;
        }

        .social-links a:hover {
            opacity: 0.7;
        }

        @media (max-width: 768px) {
            .logo {
                font-size: 2.5rem;
            }

            .features-grid {
                grid-template-columns: 1fr;
            }

            .control-grid {
                grid-template-columns: 1fr;
            }

            .download-buttons {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">🎨 C++ Shape Drawer</div>
            <div class="subtitle">Masterpiece Edition - Create Amazing Art with Code</div>
        </header>

        <div class="demo-section">
            <h2 style="text-align: center; margin-bottom: 20px; color: #333;">🎨 Interactive Demo</h2>
            <div class="demo-container">
                <div class="demo-ui">
                    <strong>C++ Shape Drawer Demo</strong> |
                    Left Click: Place Shape | Right Click: Pan | Scroll: Zoom |
                    1-6: Shapes | R/G/B/Y/P: Colors | Q/E: Rotate | +/-: Scale | Z: Undo | C: Clear
                </div>
                <canvas id="demo-canvas" class="demo-canvas"></canvas>
                <div class="demo-controls">
                    <button class="shape-btn-demo active" data-shape="circle">⭕</button>
                    <button class="shape-btn-demo" data-shape="rectangle">▭</button>
                    <button class="shape-btn-demo" data-shape="triangle">△</button>
                    <button class="shape-btn-demo" data-shape="star">⭐</button>
                    <button class="shape-btn-demo" data-shape="polygon">⬡</button>
                    <button class="shape-btn-demo" data-shape="text">📝</button>
                </div>
                <div class="color-palette-demo">
                    <button class="color-btn-demo active" data-color="#FF0000" style="background: #FF0000;"></button>
                    <button class="color-btn-demo" data-color="#00FF00" style="background: #00FF00;"></button>
                    <button class="color-btn-demo" data-color="#0000FF" style="background: #0000FF;"></button>
                    <button class="color-btn-demo" data-color="#FFFF00" style="background: #FFFF00;"></button>
                    <button class="color-btn-demo" data-color="#FF00FF" style="background: #FF00FF;"></button>
                </div>
            </div>
            <p style="text-align: center; margin-top: 15px; color: #666; font-size: 14px;">
                Try it! Click to draw shapes, use controls to manipulate them. This demo runs your C++ Shape Drawer logic in JavaScript!
            </p>
        </div>

        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">🎯</div>
                <div class="feature-title">6 Shape Types</div>
                <div class="feature-description">
                    Draw circles, rectangles, triangles, stars, polygons, and even add text to your canvas
                </div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🎨</div>
                <div class="feature-title">Advanced Effects</div>
                <div class="feature-description">
                    Apply gradients, animations (pulse, bounce, shake), and transparency to create stunning visuals
                </div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">⚡</div>
                <div class="feature-title">Real-time Controls</div>
                <div class="feature-description">
                    Pan, zoom, rotate, and scale shapes instantly with intuitive keyboard and mouse controls
                </div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">💾</div>
                <div class="feature-title">Save & Export</div>
                <div class="feature-description">
                    Save your projects and export beautiful PNG images of your masterpieces
                </div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🔧</div>
                <div class="feature-title">Modern C++</div>
                <div class="feature-description">
                    Built with C++17, Raylib graphics, and object-oriented design for optimal performance
                </div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🌟</div>
                <div class="feature-title">Pattern Generator</div>
                <div class="feature-description">
                    Create stunning grid and spiral patterns with automatic color gradients
                </div>
            </div>
        </div>

        <div class="controls-section">
            <h2 style="text-align: center; margin-bottom: 30px; color: #333;">Control Scheme</h2>
            <div class="control-grid">
                <div class="control-item">
                    <strong>Shape Selection:</strong><br>
                    <span class="control-key">1-6</span> - Choose different shapes
                </div>
                <div class="control-item">
                    <strong>Colors:</strong><br>
                    <span class="control-key">R/G/B/Y/P</span> - Select colors
                </div>
                <div class="control-item">
                    <strong>Transform:</strong><br>
                    <span class="control-key">Q/E</span> - Rotate, <span class="control-key">+/-</span> - Scale
                </div>
                <div class="control-item">
                    <strong>Effects:</strong><br>
                    <span class="control-key">A</span> - Animation, <span class="control-key">G</span> - Gradient
                </div>
                <div class="control-item">
                    <strong>Navigation:</strong><br>
                    Right-click + drag - Pan, Scroll wheel - Zoom
                </div>
                <div class="control-item">
                    <strong>File Ops:</strong><br>
                    <span class="control-key">K/L</span> - Save/Load, <span class="control-key">E</span> - Export PNG
                </div>
            </div>
        </div>

        <div class="download-section">
            <h2>Ready to Create Masterpieces?</h2>
            <p style="margin: 20px 0; opacity: 0.9;">
                Download the complete C++ Shape Drawer source code and start creating amazing graphics today!
            </p>
            <div class="download-buttons">
                <a href="https://github.com/rskworld/cpp-shape-drawer" class="btn">
                    📦 Download Source Code
                </a>
                <a href="https://github.com/rskworld/cpp-shape-drawer/releases" class="btn">
                    🚀 View Releases
                </a>
                <a href="https://rskworld.in" class="btn btn-primary">
                    🌐 Visit RSK World
                </a>
            </div>
        </div>

        <footer>
            <p>&copy; 2026 RSK World. Created by Molla Samser</p>
            <div class="social-links">
                <a href="https://github.com/rskworld" target="_blank">🐙 GitHub</a>
                <a href="https://rskworld.in" target="_blank">🌐 Website</a>
                <a href="mailto:hello@rskworld.in" target="_blank">📧 Email</a>
            </div>
        </footer>
    </div>

    <script>
        class Shape {
            constructor(x, y, type, color, filled = true) {
                this.x = x;
                this.y = y;
                this.type = type;
                this.color = color;
                this.filled = filled;
                this.rotation = 0;
                this.scale = 1;
                this.alpha = 1;
                this.gradient = false;
                this.animation = 0; // 0: none, 1: pulse, 2: bounce, 3: shake
                this.animTime = 0;
                this.selected = false;
                this.id = Math.random();
            }

            draw(ctx, camera, time) {
                ctx.save();

                // Apply camera transform
                ctx.translate(this.x - camera.x, this.y - camera.y);
                ctx.rotate(this.rotation * Math.PI / 180);
                ctx.scale(this.scale, this.scale);

                // Animation effects
                let animOffset = { x: 0, y: 0 };
                let animScale = 1;

                if (this.animation === 1) { // Pulse
                    animScale = 1 + Math.sin(time * 0.005) * 0.2;
                } else if (this.animation === 2) { // Bounce
                    animOffset.y = Math.sin(time * 0.01) * 10;
                } else if (this.animation === 3) { // Shake
                    animOffset.x = Math.sin(time * 0.02) * 5;
                    animOffset.y = Math.cos(time * 0.015) * 3;
                }

                ctx.translate(animOffset.x, animOffset.y);
                ctx.scale(animScale, animScale);

                ctx.globalAlpha = this.alpha;

                if (this.gradient) {
                    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, 50);
                    gradient.addColorStop(0, this.color);
                    gradient.addColorStop(1, this.lightenColor(this.color, 0.5));
                    ctx.fillStyle = gradient;
                    ctx.strokeStyle = this.color;
                } else {
                    ctx.fillStyle = this.color;
                    ctx.strokeStyle = this.color;
                }

                ctx.lineWidth = 2;

                this.drawShape(ctx);

                // Selection indicator
                if (this.selected) {
                    ctx.strokeStyle = '#FF0000';
                    ctx.lineWidth = 2;
                    ctx.setLineDash([5, 5]);
                    ctx.strokeRect(-60, -60, 120, 120);
                    ctx.setLineDash([]);
                }

                ctx.restore();
            }

            drawShape(ctx) {
                switch (this.type) {
                    case 'circle':
                        this.drawCircle(ctx);
                        break;
                    case 'rectangle':
                        this.drawRectangle(ctx);
                        break;
                    case 'triangle':
                        this.drawTriangle(ctx);
                        break;
                    case 'star':
                        this.drawStar(ctx);
                        break;
                    case 'polygon':
                        this.drawPolygon(ctx);
                        break;
                    case 'text':
                        this.drawText(ctx);
                        break;
                }
            }

            drawCircle(ctx) {
                ctx.beginPath();
                ctx.arc(0, 0, 25, 0, Math.PI * 2);
                if (this.filled) ctx.fill();
                ctx.stroke();
            }

            drawRectangle(ctx) {
                if (this.filled) {
                    ctx.fillRect(-35, -20, 70, 40);
                }
                ctx.strokeRect(-35, -20, 70, 40);
            }

            drawTriangle(ctx) {
                ctx.beginPath();
                ctx.moveTo(0, -30);
                ctx.lineTo(25, 20);
                ctx.lineTo(-25, 20);
                ctx.closePath();
                if (this.filled) ctx.fill();
                ctx.stroke();
            }

            drawStar(ctx) {
                const spikes = 5;
                const outerRadius = 25;
                const innerRadius = 12;

                ctx.beginPath();
                for (let i = 0; i < spikes * 2; i++) {
                    const radius = i % 2 === 0 ? outerRadius : innerRadius;
                    const angle = (i * Math.PI) / spikes;
                    const x = Math.cos(angle) * radius;
                    const y = Math.sin(angle) * radius;

                    if (i === 0) ctx.moveTo(x, y);
                    else ctx.lineTo(x, y);
                }
                ctx.closePath();
                if (this.filled) ctx.fill();
                ctx.stroke();
            }

            drawPolygon(ctx) {
                const sides = 6;
                const radius = 25;

                ctx.beginPath();
                for (let i = 0; i < sides; i++) {
                    const angle = (i * Math.PI * 2) / sides;
                    const x = Math.cos(angle) * radius;
                    const y = Math.sin(angle) * radius;

                    if (i === 0) ctx.moveTo(x, y);
                    else ctx.lineTo(x, y);
                }
                ctx.closePath();
                if (this.filled) ctx.fill();
                ctx.stroke();
            }

            drawText(ctx) {
                ctx.font = '16px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillStyle = this.color;
                ctx.fillText('RSK', 0, 0);
            }

            lightenColor(color, amount) {
                const num = parseInt(color.replace("#", ""), 16);
                const amt = Math.round(2.55 * amount * 100);
                const R = (num >> 16) + amt;
                const G = (num >> 8 & 0x00FF) + amt;
                const B = (num & 0x0000FF) + amt;
                return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
                    (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
                    (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
            }

            contains(x, y) {
                const dx = x - this.x;
                const dy = y - this.y;
                return Math.sqrt(dx * dx + dy * dy) < 40;
            }
        }

        class DemoCanvas {
            constructor() {
                this.canvas = document.getElementById('demo-canvas');
                this.ctx = this.canvas.getContext('2d');
                this.shapes = [];
                this.camera = { x: 0, y: 0, zoom: 1 };
                this.currentShape = 'circle';
                this.currentColor = '#FF0000';
                this.filled = true;
                this.selectedShape = null;
                this.dragging = false;
                this.dragOffset = { x: 0, y: 0 };
                this.panning = false;
                this.lastMousePos = { x: 0, y: 0 };

                this.resize();
                this.setupEventListeners();
                this.animate();
            }

            resize() {
                const container = this.canvas.parentElement;
                this.canvas.width = container.clientWidth;
                this.canvas.height = container.clientHeight;
            }

            setupEventListeners() {
                // Mouse events
                this.canvas.addEventListener('mousedown', (e) => this.handleMouseDown(e));
                this.canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e));
                this.canvas.addEventListener('mouseup', () => this.handleMouseUp());
                this.canvas.addEventListener('wheel', (e) => this.handleWheel(e));

                // Keyboard events
                document.addEventListener('keydown', (e) => this.handleKeyDown(e));

                // Shape selector buttons
                document.querySelectorAll('.shape-btn-demo').forEach(btn => {
                    btn.addEventListener('click', () => {
                        document.querySelectorAll('.shape-btn-demo').forEach(b => b.classList.remove('active'));
                        btn.classList.add('active');
                        this.currentShape = btn.dataset.shape;
                    });
                });

                // Color buttons
                document.querySelectorAll('.color-btn-demo').forEach(btn => {
                    btn.addEventListener('click', () => {
                        document.querySelectorAll('.color-btn-demo').forEach(b => b.classList.remove('active'));
                        btn.classList.add('active');
                        this.currentColor = btn.dataset.color;
                    });
                });

                // Window resize
                window.addEventListener('resize', () => this.resize());
            }

            handleMouseDown(e) {
                const rect = this.canvas.getBoundingClientRect();
                const x = (e.clientX - rect.left) / this.camera.zoom + this.camera.x;
                const y = (e.clientY - rect.top) / this.camera.zoom + this.camera.y;

                if (e.button === 0) { // Left click
                    const clickedShape = this.getShapeAt(x, y);
                    if (clickedShape) {
                        this.selectedShape = clickedShape;
                        this.dragging = true;
                        this.dragOffset.x = x - clickedShape.x;
                        this.dragOffset.y = y - clickedShape.y;
                        clickedShape.selected = true;
                    } else {
                        this.addShape(x, y);
                    }
                } else if (e.button === 2) { // Right click
                    this.panning = true;
                }

                this.lastMousePos = { x: e.clientX, y: e.clientY };
                e.preventDefault();
            }

            handleMouseMove(e) {
                if (this.dragging && this.selectedShape) {
                    const rect = this.canvas.getBoundingClientRect();
                    const x = (e.clientX - rect.left) / this.camera.zoom + this.camera.x;
                    const y = (e.clientY - rect.top) / this.camera.zoom + this.camera.y;

                    this.selectedShape.x = x - this.dragOffset.x;
                    this.selectedShape.y = y - this.dragOffset.y;
                } else if (this.panning) {
                    const deltaX = e.clientX - this.lastMousePos.x;
                    const deltaY = e.clientY - this.lastMousePos.y;

                    this.camera.x -= deltaX / this.camera.zoom;
                    this.camera.y -= deltaY / this.camera.zoom;

                    this.lastMousePos = { x: e.clientX, y: e.clientY };
                }
            }

            handleMouseUp() {
                if (this.selectedShape) {
                    this.selectedShape.selected = false;
                }
                this.dragging = false;
                this.panning = false;
                this.selectedShape = null;
            }

            handleWheel(e) {
                e.preventDefault();
                const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
                const rect = this.canvas.getBoundingClientRect();
                const mouseX = e.clientX - rect.left;
                const mouseY = e.clientY - rect.top;

                // Zoom towards mouse position
                const worldX = mouseX / this.camera.zoom + this.camera.x;
                const worldY = mouseY / this.camera.zoom + this.camera.y;

                this.camera.zoom *= zoomFactor;
                this.camera.zoom = Math.max(0.3, Math.min(3, this.camera.zoom));

                this.camera.x = worldX - mouseX / this.camera.zoom;
                this.camera.y = worldY - mouseY / this.camera.zoom;
            }

            handleKeyDown(e) {
                switch (e.key.toLowerCase()) {
                    case '1': this.setShape('circle'); break;
                    case '2': this.setShape('rectangle'); break;
                    case '3': this.setShape('triangle'); break;
                    case '4': this.setShape('star'); break;
                    case '5': this.setShape('polygon'); break;
                    case '6': this.setShape('text'); break;

                    case 'r': this.setColor('#FF0000'); break;
                    case 'g': this.setColor('#00FF00'); break;
                    case 'b': this.setColor('#0000FF'); break;
                    case 'y': this.setColor('#FFFF00'); break;
                    case 'p': this.setColor('#FF00FF'); break;

                    case 'f': this.filled = !this.filled; break;
                    case 'z': this.undo(); break;
                    case 'c': this.clear(); break;

                    case 'q': if (this.selectedShape) this.selectedShape.rotation -= 15; break;
                    case 'e': if (this.selectedShape) this.selectedShape.rotation += 15; break;

                    case '=': case '+': if (this.selectedShape) this.selectedShape.scale *= 1.1; break;
                    case '-': if (this.selectedShape) this.selectedShape.scale *= 0.9; break;

                    case 'a': if (this.selectedShape) {
                        this.selectedShape.animation = (this.selectedShape.animation + 1) % 4;
                    } break;

                    case ' ': this.generateRandomPattern(); e.preventDefault(); break;
                }
            }

            setShape(shape) {
                this.currentShape = shape;
                document.querySelectorAll('.shape-btn-demo').forEach(btn => {
                    btn.classList.toggle('active', btn.dataset.shape === shape);
                });
            }

            setColor(color) {
                this.currentColor = color;
                document.querySelectorAll('.color-btn-demo').forEach(btn => {
                    btn.classList.toggle('active', btn.dataset.color === color);
                });
            }

            addShape(x, y) {
                const shape = new Shape(x, y, this.currentShape, this.currentColor, this.filled);
                this.shapes.push(shape);
            }

            getShapeAt(x, y) {
                for (let i = this.shapes.length - 1; i >= 0; i--) {
                    if (this.shapes[i].contains(x, y)) {
                        return this.shapes[i];
                    }
                }
                return null;
            }

            undo() {
                if (this.shapes.length > 0) {
                    this.shapes.pop();
                }
            }

            clear() {
                this.shapes = [];
            }

            generateRandomPattern() {
                const centerX = this.camera.x + this.canvas.width / 2 / this.camera.zoom;
                const centerY = this.camera.y + this.canvas.height / 2 / this.camera.zoom;

                // Generate spiral pattern
                for (let i = 0; i < 15; i++) {
                    const angle = i * 0.3;
                    const radius = i * 12;
                    const x = centerX + Math.cos(angle) * radius;
                    const y = centerY + Math.sin(angle) * radius;

                    const hue = (i * 25) % 360;
                    const color = `hsl(${hue}, 70%, 60%)`;

                    const shape = new Shape(x, y, ['circle', 'star', 'triangle'][i % 3], color, true);
                    shape.scale = 0.5 + Math.random() * 0.5;
                    this.shapes.push(shape);
                }
            }

            animate() {
                const time = Date.now();

                // Clear canvas
                this.ctx.fillStyle = '#f0f2f5';
                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

                // Apply camera transform
                this.ctx.save();
                this.ctx.scale(this.camera.zoom, this.camera.zoom);
                this.ctx.translate(-this.camera.x, -this.camera.y);

                // Draw grid
                this.drawGrid();

                // Draw shapes
                this.shapes.forEach(shape => shape.draw(this.ctx, this.camera, time));

                this.ctx.restore();

                requestAnimationFrame(() => this.animate());
            }

            drawGrid() {
                const gridSize = 50;
                const startX = Math.floor(this.camera.x / gridSize) * gridSize;
                const startY = Math.floor(this.camera.y / gridSize) * gridSize;
                const endX = startX + (this.canvas.width / this.camera.zoom) + gridSize;
                const endY = startY + (this.canvas.height / this.camera.zoom) + gridSize;

                this.ctx.strokeStyle = '#e0e0e0';
                this.ctx.lineWidth = 1;

                for (let x = startX; x <= endX; x += gridSize) {
                    this.ctx.beginPath();
                    this.ctx.moveTo(x, startY);
                    this.ctx.lineTo(x, endY);
                    this.ctx.stroke();
                }

                for (let y = startY; y <= endY; y += gridSize) {
                    this.ctx.beginPath();
                    this.ctx.moveTo(startX, y);
                    this.ctx.lineTo(endX, y);
                    this.ctx.stroke();
                }
            }
        }

        // Initialize demo when page loads
        document.addEventListener('DOMContentLoaded', () => {
            new DemoCanvas();
        });

        // Prevent context menu on right click
        document.addEventListener('contextmenu', (e) => {
            if (e.target === document.getElementById('demo-canvas')) {
                e.preventDefault();
            }
        });
    </script>
</body>
</html>

904 lines•32.1 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size