JSFiddle - React, Tailwind, and code Playground

HTML

<canvas style="display:none; border: 1px solid red; opacity:0.3;" id="c1" width="1536" height="50"></canvas>
<canvas style="border: 1px solid green" id="c2" width="512" height="512"></canvas>

JavaScript

function alphaBlend(gamma, c1, c2, alpha) {
    c1 = c1/255.0;
    c2 = c2/255.0;
    var c3 = Math.pow(
	Math.pow(c1, gamma) * (1 - alpha)
	    + Math.pow(c2, gamma) * alpha,
	1/gamma
    );
    return Math.round(c3 * 255);
 }

function process(textPixels, destPixels, fg, bg) {
    var gamma = 2.2;
    for (var y = 0; y < textPixels.height; y ++) {
        var history = [255, 255, 255];
        var pixel_number = y * textPixels.width;
        var component = 0;
        for (var x = 0; x < textPixels.width; x ++) {
            var alpha = textPixels.data[(y * textPixels.width + x) * 4 + 1] / 255.0;
            alpha = Math.pow(alpha, gamma);
            history[component] = alpha;
            alpha = (history[0] + history[1] + history[2]) / 3;
            out = alphaBlend(gamma, bg[component], fg[component], alpha);
            destPixels.data[pixel_number * 4 + component] = out;	
            /* advance to next component/pixel */
            component ++;
            if (component == 3) {
            pixel_number ++;
            component = 0;
            }
        }
    }
}

function toColor(colorString) {
    return [parseInt(colorString.substr(1, 2), 16),
	parseInt(colorString.substr(3, 2), 16),
	parseInt(colorString.substr(5, 2), 16)];
}

function renderOnce() {
	var phrase = "Corporate GOVERNANCE"
	var c1 = document.getElementById("c1"); //the hidden canvas
	var c2 = document.getElementById("c2"); //the canvas
	var textSize=40;

	var font = textSize+"px Arial"
	var fg = "#ff0000";
	var bg = "#fff9e1";

	var ctx1 = c1.getContext("2d");
	var ctx2 = c2.getContext("2d");
	ctx1.fillStyle = "rgb(255, 255, 255)";
	ctx1.fillRect(0, 0, c1.width, c1.height);
	
	ctx1.save();
	ctx1.scale(3, 1);
	ctx1.font = font;
	ctx1.fillStyle = "rgb(255, 0, 0)";
	ctx1.fillText(phrase, 0, textSize);
	ctx1.restore();

	var textPixels = ctx1.getImageData(0, 0, c1.width, c1.height);

	var colorFg = toColor(fg);
	var colorBg = toColor(bg);
	var destPixels3 = ctx1.getImageData(0, 0,...