JSFiddle - React, Tailwind, and code Playground

by aaronfrost

HTML

<div id="div">
    <canvas id="can"></canvas>
    <img id="img" src="https://www.google.com/images/srpr/logo4w.png" alt=""/>
</div>

CSS

#img{
/* -webkit-filter: hue-rotate(180deg); */
    -webkit-filter: grayscale(50%);
}

JavaScript

var d = document.getElementById('div');
var c = document.getElementById('can');
var x = c.getContext('2d');
var i = document.getElementById('img');

//setTimeout(function(){
    d.style.backgroundColor = 'black';
    d.style.top = '100px';
    d.style.left = '100px';
    d.style.width = '100px';
    d.style.height = '100px';
    d.style.position = 'fixed';
    
    c.width = i.height;
    c.height = i.width;
    
    x.drawImage(i, 0, 0);
    x.translate(i.height, 0);
    x.rotate(Math.PI/2);
    x.drawImage(i, 0, 0);    
    
    var imageData = x.getImageData(0, 0, c.width, c.height);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
        var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
        // red
        data[i] = brightness;
        // green
        data[i + 1] = brightness;
        // blue
        data[i + 2] = brightness;
    }
    
    // overwrite original image
    x.putImageData(imageData, x, y);


//}, 1000);