JSFiddle - React, Tailwind, and code Playground

by abubelinha

HTML

<a href="http://jsfiddle.net/pHwmL/1/" target=_blank>Base jsfiddle</a> & <a href="https://stackoverflow.com/a/13401362/710788" target=_blank>stackoverflow</a>
<br>
<img id='myImage'...

JavaScript

function tintImage(imgElement,tintColor) {
        // create hidden canvas (using image dimensions)
        var canvas = document.createElement("canvas");
        canvas.width = imgElement.offsetWidth;
        canvas.height = imgElement.offsetHeight;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(imgElement,0,0);

        var map = ctx.getImageData(0,0,320,240);
        var imdata = map.data;

        // convert image to grayscale
        var r,g,b,avg;
        for(var p = 0, len = imdata.length; p < len; p+=4) {
            r = imdata[p]
            g = imdata[p+1];
            b = imdata[p+2];
            
            avg = Math.floor((r+g+b)/3);

            imdata[p] = imdata[p+1] = imdata[p+2] = avg;
        }

        ctx.putImageData(map,0,0);

        // overlay filled rectangle using lighter composition
        ctx.globalCompositeOperation = "lighter";
        ctx.globalAlpha = 0.5;
        ctx.fillStyle=tintColor;
        ctx.fillRect(0,0,canvas.width,canvas.height);

        // replace image source with canvas data
        imgElement.src = canvas.toDataURL();
    }



/// some buttons for testing the demo



var redBtt = document.createElement("button");
redBtt.appendChild(document.createTextNode("Red"));
redBtt.onclick = function() {
 tintImage(
        document.getElementById('myImage'),
        "#550000" 
 );      
}
document.body.appendChild(redBtt);

var bluBtt = document.createElement("button");
bluBtt.appendChild(document.createTextNode("Blue"));
bluBtt.onclick = function() {
 tintImage(
        document.getElementById('myImage'),
        "#000055" 
 );      
}
document.body.appendChild(bluBtt);