JSFiddle - React, Tailwind, and code Playground

by radu

HTML

<body onload="draw();">
    <div>
        <h1>A canvas <code>globalCompositeOperation</code> example</h1>
        
        
        
        <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>
    </div>
</body>

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; }

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');

        ctx.font = '16pt Arial';

        ctx.fillStyle = "#09f";
        ctx.fillText("test", 15, 15, 40, 40);

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

        ctx.fillStyle = "#f30";
        ctx.fillText("test", 15, 15, 40, 40);
    

        // control
        ctx.globalCompositeOperation = compositeTypes[0];
        ctx.fillText("test", 15, 30, 40, 40);
    }
}