JSFiddle - React, Tailwind, and code Playground

by Sam Wray

HTML

<canvas></canvas>

CSS

body {
    margin: 0;
}

canvas {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

function r() {
    canvas.width = window.innerWidth * window.devicePixelRatio;
    canvas.height = window.innerHeight * window.devicePixelRatio;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
}

window.addEventListener('resize', r);
r();

var fontSize = 120;
var kerning = 60;
var alternative = false;
ctx.font = fontSize + 'px sans-serif';

var DemoText = function(text, speed, canvas) {
    var self = this,
        cWidth = canvas.width,
        position = canvas.width;
    
    textArray = text.split('');
    var widthArray = [];
    var totalWidth = 0;
    
	totalWidth += textArray.length * fontSize;
    
    console.log(widthArray);
    
    self.draw = function(canvas, ctx, delta) {
        
        for(var i=0; i < textArray.length; i++) {
            var char = textArray[i];
                        
            if(alternative) {
                ctx.fillText(char, position+(i*fontSize),
                             ((canvas.height / 2) - (fontSize/2) - Math.sin(delta/300+i)*140 +
                              Math.cos(delta/100+i+i+i)*10)
                );
            } else {
                ctx.fillText(char, position+(i*fontSize),
                             ((canvas.height / 2) - (fontSize/2) - Math.sin(delta/300+i)*140
                ));
            }
            
        }
                
        if(position > 0 - totalWidth) position-= 4;
        else position = cWidth;
                
    };
};

var dText = new DemoText('Welcome to modV. This scroller text is gonna be pretty long. Greetz to @hughrawlinson, @nevosegal, @hellocatfood, @radiodario', 10, canvas);

var hue = 0;

function loop(delta) {
    requestAnimationFrame(loop);
    
    //ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'rgba(0,0,0,0.4)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle =...