JSFiddle - React, Tailwind, and code Playground

by Matthew Ekenstedt

HTML

<button onclick="startScrolling()">Start Scrolling!</button>
<canvas id="canvas1" width="500px" height="100px" />

JavaScript

function startScrolling()
{
    var c = document.getElementById("canvas1");
    var scroller = new Scroller(c, "Welcome to my homepage! Sign my guestbook! Frame count:");
    scroller.doAnimation();
}

function Scroller(canvas, scrollingText)
{
    this.canvas = canvas;
    this.text = scrollingText;
    this.yloc = 10;
    this.xloc = 0;
    var self = this;
    this.animId;
    this.counter = 0;
    this.doAnimation = function()
    {
        this.animId = requestAnimationFrame(function() { self.doAnimation(); });
        this.counter++;
        this.drawText();
    }
    this.drawText = function()
    {
        var context = this.canvas.getContext("2d");
        context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        context.fillText(this.text + this.counter, this.xloc, this.yloc);
    };
}