HTML5 Canvas में कंपोजिशन एट्रिब्यूट?

HTML5 Canvas कंपोजिशन एट्रिब्यूट globalCompositeOperation प्रदान करता है जो सभी ड्राइंग ऑपरेशन्स को प्रभावित करता है।

<!DOCTYPE HTML> <html> 
    <head> 
        <script> 
            var compositeTypes = [ 
                'source-over','source-in','source-out','source-atop', 
                'destination-over','destination-in','destination-out', 
                'destination-atop','lighter','darker','copy','xor' 
            ]; 
            function drawShape(){ 
                for (i = 0; i < compositeTypes.length; i++){ 
                    var label = document.createTextNode(compositeTypes[i]); 
                    document.getElementById('lab'+i).appendChild(label); 
                    var ctx = document.getElementById('tut'+i).getContext('2d'); 
                    // draw rectangle 
                    ctx.fillStyle = "#FF3366"; 
                    ctx.fillRect(15,15,70,70); 
                    // set composite property 
                    ctx.globalCompositeOperation = compositeTypes[i]; 
                    // draw circle 
                    ctx.fillStyle = "#0066FF"; 
                    ctx.beginPath(); 
                    ctx.arc(75,75,35,0,Math.PI*2,true); 
                    ctx.fill(); 
                } 
            } 
        </script> 
    </head> 
    <body onload = "drawShape();"> 
        <table border="1" align = "center"> 
            <tr> 
                <td><canvas id = "tut0" width = "125" height = "125"></canvas><br/> 
                    <label id = "lab0"></label> 
                </td> 
                <td><canvas id = "tut1" width = "125" height = "125"></canvas><br/> 
                    <label id = "lab1"></label> 
                </td> 
                <td><canvas id = "tut2" width = "125" height = "125"></canvas><br/> 
                    <label id = "lab2"></label> 
                </td> 
            </tr> 
            <tr> 
                <td><canvas id = "tut3" width = "125" height = "125"></canvas><br/> 
                    <label id = "lab3"></label> 
                </td> 
                <td><canvas id = "tut4" width = "125" height = "125"></canvas><br/> 
                    <label id = "lab4"></label> 
                </td> 
                <td><canvas id = "tut5" width = "125" height = "125"></canvas><br/> 
                    <label id = "lab5"></label> 
                </td> 
            </tr> 
            <tr> 
                <td><canvas id = "tut6" width = "125" height = "125"></canvas><br/> 
                    <label id = "lab6"></label> 
                </td> 
                <td><canvas id = "tut7" width = "125" height = "125"></canvas><br/> 
                    <label id = "lab7"></label> 
                </td> 
                <td><canvas id = "tut8" width="125" height = "125"></canvas><br/> 
                    <label id = "lab8"></label> 
                </td> 
            </tr> 
            <tr> 
                <td><canvas id = "tut9" width = "125" height = "125"></canvas><br/> 
                    <label id = "lab9"></label> 
                </td> 
                <td><canvas id = "tut10" width = "125" height = "125"></canvas><br/> 
                    <label id = "lab10"></label> 
                </td> 
                <td><canvas id = "tut11" width = "125" height = "125"></canvas><br/> 
                    <label id = "lab11"></label> 
                </td> 
            </tr> 
        </table> 
    </body> </html>