globalCompositeOperation2

by fangsmile

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            width: 100vw;
            height: 100vh;
        }

        body {
            min-height: 100%;
            text-align: center;
        }

        .wrapper {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: flex-start;
            align-content: flex-start;
        }

JavaScript

window.onload=eventWindowLoaded();

        function eventWindowLoaded() {
            canvasApp();
        }

        function canvasApp() {

            var canvas1 = document.createElement('canvas');
            var canvas2 = document.createElement('canvas');
            // document.body.appendChild(canvas1);
            // document.body.appendChild(canvas2);
            //document.body.insertBefore(canvas2, document.body.firstChild);
            //document.body.insertBefore(canvas1, document.body.firstChild);

            var gco = ['source-over', 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'copy', 'xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'].reverse();

            var width = 320;
            var height = 340;

            // lum in sRGB
            var lum = {
                r: 0.33,
                g: 0.33,
                b: 0.33
            }

            // HSV (1978) = H: Hue / S: Saturation / V: Value
            Color = {}
            Color.HSV_RGB = function (o) {
                var H = o.H / 360;
                var S = o.S / 100;
                var V = o.V / 100;
                var R, G, B, A, C, D;

                if (S == 0) {
                    R = G = B = Math.round(V * 255);
                } else {
                    if (H >= 1) H = 0;
                    H = 6 * H;
                    D = H - Math.floor(H);
                    A = Math.round(255 * V * (1 - S));
                    B = Math.round(255 * V * (1 - S * D));
                    C = Math.round(255 * V * (1 - (S * (1 - D))));
                    V = Math.round(255 * V);

                    switch (Math.floor(H)) {
                        case 0:
                            R = V;
                            G = C;
                            B =...