JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<html>
    <head>
        <title>Random Phrase Flow</title>
        <style>
            body {
                background-color: #eee;
            }
            canvas {
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas"></canvas>
        <script src="script.js"></script>
    </body>
</html>

JavaScript

let phrases = [
        "Custom Solutions",
        "Inventory Services",
        "Pipeline Integration",
        "Market Analysis"
    ];
    let currentPhrase;
    let position;

    function setup() {
        createCanvas(1200, 800)
        currentPhrase = 0;
        position = 0;
        textSize(20);
        textAlign(CENTER);
        background(255);
    }

    function draw() {
        background(255);

        text(phrases[currentPhrase], position, 200);
        position += 0.5;
        if (position > width) {
            position = 0;
            currentPhrase++;
            if (currentPhrase >= phrases.length) {
                currentPhrase = 0;
            }
        }
    }