HTML5 में कैनवास को केंद्र में कैसे संरेखित करें?

कैनवास केंद्रित करना

HTML5 कैनवास एक इंलाइन-ब्लॉक तत्व की तरह व्यवहार करता है। इसे पेज या कंटेनर के केंद्र में संरेखित करने के कई तरीके हैं।

विधि 1: टेक्स्ट-अलाइन (सरलतम)

कैनवास को ब्लॉक तत्व में लपेटें और text-align: center उपयोग करें:

<!DOCTYPE html>
<html>
<body>
    <div style="text-align: center;">
        <canvas id="myCanvas" width="400" height="300" 
                style="background-color: #f0f0f0; border: 1px solid #ccc;">
            आपका ब्राउज़र कैनवास का समर्थन नहीं करता।
        </canvas>
    </div>
    
    <script>
        const ctx = document.getElementById('myCanvas').getContext('2d');
        ctx.fillStyle = '#667eea';
        ctx.fillRect(50, 50, 100, 100);
    </script>
</body>
</html>

विधि 2: फ्लेक्सबॉक्स (आधुनिक, अनुशंसित)

<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;">
    <canvas id="canvas" width="400" height="300" style="border:1px solid #333;"></canvas>
</div>

विधि 3: CSS मार्जिन ऑटो (ब्लॉक तत्व के रूप में)

<style>
    canvas.centered {
        display: block;
        margin: 0 auto;
        border: 1px solid #ccc;
    }
</style>

<canvas class="centered" width="400" height="300"></canvas>

विधि 4: ग्रिड (सबसे साफ)

<div style="display: grid; place-items: center; min-height: 100vh;">
    <canvas id="canvas" width="400" height="300"></canvas>
</div>

विधि 5: निरपेक्ष पोजिशनिंग (सटीक केंद्र)

<div style="position: relative; height: 100vh;">
    <canvas id="canvas" width="400" height="300" 
            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border:1px solid #333;">
    </canvas>
</div>

पूर्ण उदाहरण: रिस्पॉन्सिव केंद्रित कैनवास

<!DOCTYPE html>
<html>
<head>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        .canvas-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }
        
        #gameCanvas {
            border: 2px solid #333;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            background: white;
            /* रिस्पॉन्सिव: कंटेनर से बड़ा न हो */
            max-width: 100%;
            max-height: 100vh;
            height: auto;
        }
        
        @media (max-width: 500px) {
            .canvas-container { padding: 10px; }
        }
    </style>
</head>
<body>
    <div class="canvas-container">
        <canvas id="gameCanvas" width="800" height="600"></canvas>
    </div>
    
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // रिस्पॉन्सिव रेंडरिंग के लिए रीसाइज़ हैंडलर
        function resizeCanvas() {
            const container = canvas.parentElement;
            const maxWidth = container.clientWidth;
            const maxHeight = container.clientHeight;
            
            // पहलू अनुपात बनाए रखें
            const ratio = canvas.width / canvas.height;
            let displayWidth = canvas.width;
            let displayHeight = canvas.height;
            
            if (displayWidth > maxWidth) {
                displayWidth = maxWidth;
                displayHeight = displayWidth / ratio;
            }
            if (displayHeight > maxHeight) {
                displayHeight = maxHeight;
                displayWidth = displayHeight * ratio;
            }
            
            canvas.style.width = displayWidth + 'px';
            canvas.style.height = displayHeight + 'px';
        }
        
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
        
        // डेमो ड्राइंग
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // ग्रेडिएंट पृष्ठभूमि
            const grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
            grad.addColorStop(0, '#667eea');
            grad.addColorStop(1, '#764ba2');
            ctx.fillStyle = grad;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // केंद्र में वृत्त
            ctx.beginPath();
            ctx.arc(canvas.width/2, canvas.height/2, 100, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(255,255,255,0.3)';
            ctx.fill();
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 4;
            ctx.stroke();
            
            // टेक्स्ट
            ctx.fillStyle = 'white';
            ctx.font = 'bold 36px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('केंद्रित कैनवास', canvas.width/2, canvas.height/2);
        }
        
        draw();
    </script>
</body>
</html>

तुलना तालिका