JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<canvas id="testCanvas" width="500" height="500"></canvas>

JavaScript

var cnt = 1;

function draw() {
// setup canvas
    var tcanvas = document.getElementById("testCanvas");
    var ctx = tcanvas.getContext("2d");
    ctx.clearRect(0,0,500,500); // clear canvas
   
    // set composite property
    ctx.globalCompositeOperation = 'xor';

    // draw text
    ctx.fillStyle="#0099FF";
    ctx.font = "35px sans-serif";
    ctx.fillText("test "+cnt, 22, 25+cnt);


    // draw square
    ctx.fillStyle = "#FF3366";
    ctx.fillRect(15,15,170,170);

// draw circle    
    ctx.fillStyle = "#0099FF";
    ctx.beginPath();
    ctx.arc(1+cnt,75,35,0,Math.PI*2,true);
    ctx.fill();
    
    cnt++; 
    if (cnt > 200) cnt = 0;
    window.requestAnimationFrame(draw);
}

window.requestAnimationFrame(draw);