How do I stop the of Cumulative Layout Shift of this full width canvas animation item in the header.php file? Where is the vertical shift coming from in the code below?

<canvas id="myCanvas" height="75" width="1000">
myCanvas = document.getElementById("myCanvas");
ctx = myCanvas.getContext('2d');
img = new Image();
img.src = "https://yoursite.com/images/image-optimized.webp";
img.alt = "Full Width animation"; 
setInterval(movebgnd, 30);//animation slow, if high: 30
var x = window.innerWidth + 5;//first starting pos 0 is left xx max width of canvas is right -about 1200
var myCanvas, ctx;var img;function movebgnd(){ 
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
x -= 1.4;//side faster, if bigger
//if (x <= -2000) { where the image goes to from the right to left -1000
if (x <= -1000) {
x = window.innerWidth + 100; //start pos of sliding pic-about 1200

Tom: I made a WordPress template page and when I run Google Lighthouse it say there is a cumulative shift in the animated canvas. I'm not sure how to stop the shift but wanna keep everything the correct size and make sure there is no cumulative shift. If you are on a PC you can see the animation at the top of the page here: animated canvas with slight shift Is it better to put the canvas with animation in the page template file, just have it in the content area or put it in the headed.php file?

  • Can you ellaborate what you mean by cumulative shift? This looks like a frontend JS/CSS issue, I'm not seeing the WordPress connection here, are you sure it's WordPress specific expertise you need? Pure CSS/JS/HTML questions should be asked on stackoverflow instead – Tom J Nowell Feb 13 at 13:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.