HTML में <canvas> एलिमेंट का अधिकतम आकार

कैनवास आकार सीमाएँ

सभी वेब ब्राउज़र्स कैनवास एलिमेंट की चौड़ाई, ऊंचाई, और कुल क्षेत्रफल (पिक्सेल्स में) को सीमित करते हैं। ये सीमाएँ GPU मेमोरी, सिक्योरिटी, और प्रदर्शन कारणों से मौजूद हैं।

ब्राउज़र-वार अधिकतम सीमाएँ

सीमाओं का पता लगाना

function getCanvasLimits() {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // बाइनरी सर्च से अधिकतम आकार खोजें
    function findMaxDimension(getSize, setSize) {
        let low = 1, high = 32767;
        while (low <= high) {
            const mid = Math.floor((low + high) / 2);
            try {
                setSize(mid);
                ctx.fillRect(0, 0, 1, 1); // टेस्ट ड्रा
                low = mid + 1;
            } catch (e) {
                high = mid - 1;
            }
        }
        return high;
    }
    
    // ध्यान: यह विधि धीमी हो सकती है और कैनवास को दूषित कर सकती है
    // बेहतर: ज्ञात सीमाओं का उपयोग करें या छोटे टेस्ट कैनवास बनाएँ
}

व्यावहारिक प्रभाव

सुरक्षित कैनवास निर्माण

function createSafeCanvas(width, height, options = {}) {
    const { fallbackWidth = 4096, fallbackHeight = 4096 } = options;
    
    // ज्ञात सुरक्षित सीमाओं के विरुद्ध जांचें
    const MAX_DIM = 16384; // रूढ़िवादी सुरक्षित सीमा (iOS Safari)
    const MAX_AREA = 67108864; // 64 मेगापिक्सेल
    
    if (width > MAX_DIM || height > MAX_DIM || width * height > MAX_AREA) {
        console.warn(`अनुरोधित आकार (${width}x${height}) सुरक्षित सीमा से अधिक है। फॉलबैक उपयोग।`);
        width = Math.min(width, fallbackWidth);
        height = Math.min(height, fallbackHeight);
    }
    
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    
    // सत्यापित करें कि कैनवास वास्तव में बनाया गया था
    try {
        const ctx = canvas.getContext('2d');
        ctx.fillRect(0, 0, 1, 1); // टेस्ट ड्रा
        return canvas;
    } catch (e) {
        console.error('कैनवास निर्माण विफल:', e);
        // छोटे आकार के साथ पुनः प्रयास
        return createSafeCanvas(Math.floor(width/2), Math.floor(height/2), options);
    }
}

// उपयोग
const canvas = createSafeCanvas(20000, 20000); // स्वचालित रूप से सुरक्षित आकार में समायोजित होगा

मेमोरी विचार

• प्रति पिक्सेल: 4 बाइट्स (RGBA32) = 4 MB प्रति मेगापिक्सेल
• 32767×32767 = ~4 GB RAM (सिर्फ बफर के लिए!)
• मोबाइल उपकरणों पर बहुत कम मेमोरी उपलब्ध
• बड़े कैनवास बनाने से पहले navigator.deviceMemory जांचें

// मेमोरी-जागरूक कैनवास निर्माण
function createCanvasWithMemoryCheck(width, height) {
    const bytesPerPixel = 4;
    const requiredMB = (width * height * bytesPerPixel) / (1024 * 1024);
    const availableMB = navigator.deviceMemory ? navigator.deviceMemory * 1024 : 512; // अनुमान
    
    if (requiredMB > availableMB * 0.5) { // 50% से अधिक उपयोग न करें
        throw new Error(`अपर्याप्त मेमोरी: ${requiredMB.toFixed(0)}MB आवश्यक, ~${availableMB}MB उपलब्ध`);
    }
    
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    return canvas;
}