JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<canvas id="myCanvas" width="1500" height="500">

JavaScript

var canvas, ctx, step = 50, steps = 255;
    var delay = 20;
    var rgbstep = 50;

	function Textfadeup() {
        rgbstep++;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = "43pt Tahoma";
        ctx.fillStyle = "rgb(" + rgbstep + "," + rgbstep + "," + rgbstep + ")";
        ctx.fillText('innovative technologies', 379, 255);
        ctx.restore();
        if (rgbstep < 255) {
            var t = setTimeout('Textfadeup()', 10);
        }
        if (rgbstep == 255) {
            Textfadedown();
        }
    }

    function Textfadedown() {
        rgbstep = rgbstep-1;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = "43pt Tahoma";
        ctx.fillStyle = "rgb(" + rgbstep + "," + rgbstep + "," + rgbstep + ")";
        ctx.fillText('innovative technologies', 379, 255);
        ctx.restore();
        if (rgbstep > 80) {
            var t = setTimeout('Textfadedown()', 10);
        }
        if (rgbstep == 80) {
            Textfadeup();
        }
    }

    function init() {
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext("2d");

        // Fire text
        ctx.font = "Bold 160pt Trebuchet MS";
        ctx.fillStyle = "#8DC63F";
        ctx.fillText('F', 350, 195);
        ctx.font = "Bold 120pt Trebuchet MS";
        ctx.fillStyle = "#8DC63F";
        ctx.fillText('IRE', 469, 195);


        //Fly text
        ctx.font = "Bold 160pt Trebuchet MS";
        ctx.fillStyle = "#A7A9AC";
        ctx.fillText('F', 705, 195);
        ctx.font = "Bold 120pt Trebuchet MS";
        ctx.fillStyle = "#A7A9AC";
        ctx.fillText('LY', 825, 195);
        ctx.save();

        var img = new Image();
        img.src = 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRDsQLIEY3ZX-3LPlZeVh6wQ8Vl5CKDtueit7OfJMBOBvC-GDCPoA';

        img.onload = function() {
            ctx.drawImage(img, 500, 0);
        };

        Textfadeup();
    }

init();