JSFiddle - React, Tailwind, and code Playground

by nhunzaker

HTML

<canvas width="400" height="400"></canvas>

CSS

body {
    background: #d9d9d9;
    margin: auto;
    text-align: center;
}
canvas {
    background: #fff;
}

JavaScript

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

var content = 'Viget Labs';
var rotation = 0;
var x = 90;
var y = 90;

var RADIANS = Math.PI / 180;

setInterval(function draw() {
    ctx.save();

    // Cause previous drawings to fade a way
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Set the font parameters
    ctx.font = '50px Helvetica';
    ctx.fillStyle = '#1496bb'
    
    // Overcompensate for the offset, rotate, then counter-compensate
    // when painting text
    ctx.translate(x, y);
    ctx.rotate(rotation * RADIANS);
    ctx.fillText(content, 0, 0);

    // For animation purposes, increase rotation for the next pass
    rotation += 15;
    
    ctx.restore();
}, 500);