JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
    background-color: ivory;
}
#canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var word1 = "Day1";
var word1Width = ctx.measureText(word1).width;

var r = 0;
animate();

function animate() {
    requestAnimationFrame(animate);
    r += Math.PI / 180;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(100, 100);
    ctx.rotate(r);
    ctx.fillText(word1, -word1Width / 2, 4);
    ctx.restore();
}