JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="out"></canvas>

CSS

#out { position:absolute; top:0; left:0; }

JavaScript

function setBg(width,height,algo){
    var size = width * height, colors = [];

    for(var x=0;x<width;x++)
	    for(var y=0;y<height;y++)
            colors[y*width+x] = algo(x,y);

    // set canvas with defined sizes
    var $out = $("#out").width(width).height(height);
    var out = $out[0];
    var ctx = out.getContext('2d');

    // a temp buffer for the canvas object
    var cbuffer = ctx.createImageData(width,height);
    var buffer = cbuffer.data;

    // now fill canvas with the colors generated
    var i=0, n=0, r,g,b,color;

    if(colors[0].rgb !== undefined)
        while(i < size){
            color = colors[i]; // get color
            
            // extract r,g,b ...
            var r = (color>>16)&255;
            var g = (color>>8)&255;
            var b = color&255;
        
            // fill buffer with each color part
            buffer[n++] = r;
            buffer[n++] = g;
            buffer[n++] = b;
            buffer[n++] = 255; // alpha to max
            i++;
        } else
        while(i < size){
            color = colors[i]; // get color
        
            // fill buffer with each color part
            buffer[n++] = color.r;
            buffer[n++] = color.g;
            buffer[n++] = color.b;
            if(color.a !== undefined)
                    buffer[n++] = color.a;
            else    buffer[n++] = 255; // alpha to max
            i++;
        }
    
    // apply on the canvas
    ctx.putImageData(cbuffer,1,1);
}

function pinkIt(x,y)
{   var red = 0x6b+(x>>2)+(y>>2); if(red>0xff) red = 0xff;
    //return {rgb:(red<<16)|(0x2b<<8)|0xc6};
    return {r:red,g:0x2b,b:0xc6};
}

$(window).on("resize",function(){
    var $w = $(this);
    setBg($w.width(),$w.height(),pinkIt);
}).resize();