JSFiddle - React, Tailwind, and code Playground

by nhulea

HTML

<table>
    <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>
        <td>
            <canvas id="tut3" width="125" height="125"></canvas>
            <br/>
            <label id="lab3"></label>
        </td>
    </tr>
    <tr>
        <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>
        <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>
    </tr>
    <tr>
        <td>
            <canvas id="tut8" width="125" height="125"></canvas>
            <br/>
            <label id="lab8"></label>
        </td>
        <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>

CSS

body {
          margin: 20px;
          font-family: arial, verdana, helvetica;
          background: #fff;
      }
      h1 {
          font-size: 140%;
          font-weight:normal;
          color: #036;
          border-bottom: 1px solid #ccc;
      }
      canvas {
          border: 2px solid #000;
          margin-bottom: 5px;
      }
      td {
          padding: 7px;
      }
      pre {
          float:left;
          display:block;
          background: rgb(238, 238, 238);
          border: 1px dashed #666;
          padding: 15px 20px;
          margin: 0 0 10px 0;
      }

JavaScript

var compositeTypes = [
          'source-over', 'source-in', 'source-out', 'source-atop',
          'destination-over', 'destination-in', 'destination-out', 'destination-atop',
          'lighter', 'darker', 'copy', 'xor'];

      function draw() {
          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');

              var img = new Image();
              img.onload = function () {};
              img.src = 'http://i.imgur.com/0EIDPzq.png';

              // draw rectangle
              //ctx.fillStyle = "#09f";
              ctx.fillRect(15, 15, 70, 70);
              ctx.drawImage(img, 15, 15, 70, 70);

              // set composite property
              ctx.globalCompositeOperation = compositeTypes[i];

              // draw circle
              ctx.fillStyle = "#f30";
              ctx.beginPath();
              ctx.arc(75, 75, 35, 0, Math.PI * 2, true);
              ctx.fill();
          }
      }
      draw();