एक HTML5 कैनवास की सामग्री को दूसरे कैनवास में स्थानीय रूप से कैसे कॉपी करें?

कैनवास से कैनवास कॉपी करना

drawImage() मेथड का उपयोग करके एक कैनवास की सामग्री को दूसरे कैनवास पर खींचा जा सकता है। यह छवियों, वीडियो, और अन्य कैनवास तत्वों को स्रोत के रूप में स्वीकार करता है।

बुनियादी सिंटैक्स

// गंतव्य कैनवास का कॉन्टेक्स्ट प्राप्त करें
const destCtx = destinationCanvas.getContext('2d');

// स्रोत कैनवास को गंतव्य पर खींचें
destCtx.drawImage(sourceCanvas, 0, 0);

// या विशिष्ट आयामों के साथ
destCtx.drawImage(sourceCanvas, 
    0, 0,           // स्रोत x, y
    sourceCanvas.width, sourceCanvas.height,  // स्रोत चौड़ाई, ऊंचाई
    0, 0,           // गंतव्य x, y
    destWidth, destHeight  // गंतव्य चौड़ाई, ऊंचाई
);

पूर्ण उदाहरण

<!DOCTYPE html>
<html>
<body>
    <h2>कैनवास कॉपी डेमो</h2>
    
    <div style="display: flex; gap: 20px; align-items: flex-start;">
        <div>
            <h3>स्रोत कैनवास</h3>
            <canvas id="sourceCanvas" width="300" height="200" style="border:2px solid blue;"></canvas>
            <br><button onclick="drawOnSource()">स्रोत पर ड्रा करें</button>
        </div>
        
        <div>
            <h3>गंतव्य कैनवास</h3>
            <canvas id="destCanvas" width="300" height="200" style="border:2px solid green;"></canvas>
            <br><button onclick="copyCanvas()">कॉपी करें →</button>
        </div>
    </div>
    
    <script>
        const sourceCanvas = document.getElementById('sourceCanvas');
        const destCanvas = document.getElementById('destCanvas');
        const srcCtx = sourceCanvas.getContext('2d');
        const destCtx = destCanvas.getContext('2d');
        
        // स्रोत पर कुछ बनाएँ
        function drawOnSource() {
            srcCtx.clearRect(0, 0, sourceCanvas.width, sourceCanvas.height);
            
            // यादृच्छिक आकृतियाँ
            for (let i = 0; i < 10; i++) {
                srcCtx.fillStyle = `hsl(${Math.random() * 360}, 70%, 50%)`;
                srcCtx.globalAlpha = 0.7;
                srcCtx.beginPath();
                srcCtx.arc(
                    Math.random() * 300,
                    Math.random() * 200,
                    20 + Math.random() * 40,
                    0, Math.PI * 2
                );
                srcCtx.fill();
            }
            srcCtx.globalAlpha = 1.0;
        }
        
        // स्रोत से गंतव्य पर कॉपी करें
        function copyCanvas() {
            // पूरी कैनवास कॉपी करें
            destCtx.drawImage(sourceCanvas, 0, 0);
            
            // या आकार बदलकर कॉपी करें
            // destCtx.drawImage(sourceCanvas, 0, 0, 300, 200, 0, 0, 150, 100);
        }
        
        // प्रारंभिक ड्राइंग
        drawOnSource();
    </script>
</body>
</html>

महत्वपूर्ण नोट्स

• स्रोत कैनवास तत्व पास करें, कॉन्टेक्स्ट नहीं: drawImage(sourceCanvas, ...) न कि drawImage(srcCtx, ...)
• स्रोत हो सकता है: HTMLCanvasElement, HTMLImageElement, HTMLVideoElement, ImageBitmap, OffscreenCanvas
• कैनवास कॉन्टेक्स्ट (CanvasRenderingContext2D) सीधे स्रोत के रूप में उपयोग नहीं किया जा सकता
• यदि आपके पास केवल कॉन्टेक्स्ट है, तो context.canvas से मूल कैनवास तत्व प्राप्त करें

आंशिक कॉपी और स्केलिंग

// स्रोत का एक भाग कॉपी करें
destCtx.drawImage(
    sourceCanvas,
    50, 50, 200, 100,   // स्रोत आयत: x, y, width, height
    0, 0, 300, 150      // गंतव्य आयत: x, y, width, height
);

// मिरर/फ्लिप करने के लिए नकारात्मक स्केल उपयोग करें
destCtx.save();
destCtx.scale(-1, 1);   // क्षैतिज फ्लिप
destCtx.drawImage(sourceCanvas, -sourceCanvas.width, 0);
destCtx.restore();

प्रदर्शन टिप्स

• बार-बार कॉपी के लिए, OffscreenCanvas (वर्कर्स में) या ImageBitmap का उपयोग करें
• drawImage GPU-त्वरित होता है
• बड़े कैनवास के लिए, केवल गंदे क्षेत्रों को कॉपी करें