HTML5 Canvas-এ কম্পোজিশন অ্যাট্রিবিউট

HTML5 ক্যানভাসে 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 (var 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>
        <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>