JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:doIt()">shift 25 pixels to the left using `translate`</a><br>
<a href="javascript:shiftImage()">shift 25 pixels to the left using `getImageData/putImageData`</a><br>
<canvas id="canvas" width="600" height="200"></canvas>

CSS

body {
    background-color: #CCC;
}

JavaScript

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

var xOff = 0;
var redraw = function() {
        ctx.clearRect(0, 0, 600, 200);
        ctx.save();
        ctx.translate(xOff, 0);

        ctx.font = "100px Arial";
        ctx.fillText( "Google", 20, 130 );

        ctx.restore();
};
    
window.doIt = function() {
    xOff -= 25;
    redraw();
}
    
    redraw();

        var shiftContext = function(ctx, w, h, dx, dy) {
      var clamp = function(high, value) { return Math.max(0, Math.min(high, value)); };
      var imageData = ctx.getImageData(clamp(w, -dx), clamp(h, -dy), clamp(w, w-dx), clamp(h, h-dy));
    ctx.clearRect(0, 0, w, h);
    ctx.putImageData(imageData, 0, 0);
    }
    
    window.shiftImage = function() {
      shiftContext(ctx, 600, 200, -25, 0);   
    }