JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

<title>Clipping lab</title>

<script type="text/javascript">
var ctx;
const tpf = 33;

var imageObj = new Image();
imageObj.src = "redhead_base.png";

var x = 10;
var y = 10;
var w = 53;
var h = 178;

function init() {
    canvas = document.getElementById('kCanvas');
    ctx = canvas.getContext('2d');    
    
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#333';
    ctx.fillStyle = "rgb(0,128,0)";
    ctx.fillRect (0,0,320,240);

    ctx.save();

    // Doesn't work with jsfiddle, see moveSprite()
    // setInterval(function () { update(); }, tpf);
}

function moveSprite() {
     
    setDirtyArea(x,y,w+10,h)
    
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#333';
    ctx.fillStyle = "rgb(0,0,128)";
    ctx.fillRect (0,0,320,240);
    
    x+=10;
     
    // paint image
    ctx.clearRect(x,y,w,h);
    //ctx.drawImage(imageObj, x, y);
    

}

function setDirtyArea(x,y,w,h) {

    ctx.restore();    

    // define new dirty zone
    ctx.beginPath();
    ctx.rect(x, y, w, h);
    ctx.clip();
 
}    

    
    /*
function update() {
    setDirtyArea(x,y,w+1,h)
    
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#333';
    ctx.fillStyle = "rgb(0,0,128)";
    ctx.fillRect (0,0,320,240);
    
    x++;
    
    // paint image
    ctx.clearRect(x,y,w,h);
    //ctx.drawImage(imageObj, x, y);
    

}
    */


</script>
    
</head>
<body>

<canvas id="kCanvas" width="320" height="240" style="border: 1px solid grey">
</canvas>

<script>
    init();
</script>

<a href="#" onclick="javascript:moveSprite(); return false">move sprite</a>
    
</body>
</html>