JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var c = document.getElementById('myCanvas');
var ctx = c.getContext("2d");

// Positions for the text startint off
var xText = -100;
var yText = 150;

// This will update the canvas as fast as possible (not good)
setInterval(function () {
    // Clear the canvas
    ctx.fillStyle = "#F0F";
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.save()
    
    // We create a clip rect 
    ctx.rect(200,0,400,400);
    ctx.clip();
    
    // Draw text
    ctx.fillStyle = "#FFF";
    ctx.font = "30px Arial";
    ctx.fillText("Hello World", xText, yText);
    
    ctx.restore();

    // Increase the text x position
    if (xText < 200) {
        xText += 2;
    }

}, 15);