HTML5 ক্যানভাস একটি কম্পোজিশন অ্যাট্রিবিউট globalCompositeOperation প্রদান করে যা সকল ড্রইং অপারেশনকে প্রভাবিত করে।
উদাহরণ
আমরা নতুন আকারগুলো বিদ্যমান আকারগুলোর পেছনে আঁকতে পারি এবং নির্দিষ্ট এলিয়া মাস্ক করতে পারি, 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'); // আয়ত আঁকুন ctx.fillStyle = "#FF3366"; ctx.fillRect(15,15,70,70); // কম্পোজিট প্রপার্টি সেট করুন ctx.globalCompositeOperation = compositeTypes[i]; // বৃত্ত আঁকুন 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><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><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> 