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">
<script>
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
}ctx.drawImage(img,0+x,-45)}
</script>
<noscript>最高の体験をするためには、JavaScriptを有効にする必要があります。</noscript>
</canvas>
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?
