JSFiddle - React, Tailwind, and code Playground

by kpowz

HTML

<canvas id="flag" width="100" height="100">
</canvas>

CSS

canvas{
    background: url(http://www.modernmast.com/images/19e980.logo.png) no-repeat 50% 0;
}

JavaScript

var canvas = document.getElementById("flag");
if (!canvas.getContext) return;

var ctx = canvas.getContext('2d');

canvas.className = "supported center";
ctx.fillStyle = "rgba(0,0,0,1)";


    
var red, green, blue;
var rgb = 0;
for (var x = 0; x < canvas.width; x++){     
    for (var y = 0; y < canvas.height; y++){
        red   = (rgb >> 32) & 0xFF;
        green = (rgb >> 16) & 0xFF;
        blue  = (rgb >> 8) & 0xFF;
        console.log("rgba("+red+","+green+","+blue+", 1)");
        ctx.fillStyle = "rgba("+red+","+green+","+blue+", 1)";
        ctx.fillRect(x,y,1,1);
        rgb += 1200;
     }
   }