Function blend

pattern/canvas.js:3230–3293

(mode, img1, img2, dx, dy, alpha)

var HUE       = "hue";       // Hue from the blend image, brightness and saturation from the base image.

function blend(mode, img1, img2, dx, dy, alpha) {
    /* Applies the second image as a blend layer with the first image.
     * - dx: horizontal offset (in pixels) of the blend layer.
     * - dy: vertical offset (in pixels) of the blend layer.
     */
    alpha = (alpha || alpha == 0)? alpha : 1;
    switch(mode) {
        case ADD      : op = function(x, y) { return x + y;          }; break;
        case SUBTRACT : op = function(x, y) { return x + y - 255;    }; break;
        case LIGHTEN  : op = function(x, y) { return Math.max(x, y); }; break;
        case DARKEN   : op = function(x, y) { return Math.min(x, y); }; break;
        case MULTIPLY : op = function(x, y) { return x * y / 255;    }; break;
        case SCREEN   : op = function(x, y) { return 255 - (255-x) * (255-y) / 255; }; break;
        case OVERLAY  : op = function(x, y, luminance) { };
        case HARDLIGHT: op = function(x, y, luminance) {
            var a = 2 * x * y / 255;
            var b = 255 - 2 * (255-x) * (255-y) / 255;
            return (luminance < 0.45)? a :
                   (luminance > 0.55)? b : 
                    geometry.lerp(a, b, (luminance - 0.45) * 255); }; break;
        default:
            op = function(x, y) { return 0; };
    }
    function mix(p1, p2, op, luminance) {
        var p = [0,0,0,0];
        var a = p2[3] / 255 * alpha;
        p[0] = geometry.lerp(p1[0], op(p1[0], p2[0], luminance), a);
        p[1] = geometry.lerp(p1[1], op(p1[1], p2[1], luminance), a);
        p[2] = geometry.lerp(p1[2], op(p1[2], p2[2], luminance), a);
        p[3] = geometry.lerp(p1[3], 255, a);
        return p;
    }
    // Some blend modes swap opaque blend (alpha=255) with base layer to mimic Photoshop.
    // Some blend modes use luminace (overlay & hard light).
    if (mode == ADD|| mode == SUBTRACT) {
        return composite(img1, img2, dx, dy, function(p1, p2) {
            return mix(p1, p2, op); 
        });    
    }
    if (mode == LIGHTEN || mode == DARKEN || mode == MULTIPLY || mode == SCREEN) {
        return composite(img1, img2, dx, dy, function(p1, p2) {
            return (p2[3] == 255)? mix(p2, p1, op) : mix(p1, p2, op); 
        });
    }
    if (mode == OVERLAY) {
        return composite(img1, img2, dx, dy, function(p1, p2) {
            return mix(p1, p2, op, Math.dot(p1.slice(0, 3), LUMINANCE)); 
        });
    }
    if (mode == HARDLIGHT) {
        return composite(img1, img2, dx, dy, function(p1, p2) {
            return mix(p1, p2, op, Math.dot(p2.slice(0, 3), LUMINANCE)); 
        });
    }
    if (mode == HUE) {
        return composite(img1, img2, dx, dy, function(p1, p2) {
            var p, a=p1[3];
            p1 = _rgb2hsb(p1[0], p1[1], p1[2]);