为什么我的背景不向右移动？

Question

<canvas id="caneva" width="800" height="600"></canvas>
  <script>
    var canvas1 = document.querySelector("#caneva");
    var ctx  = canvas1.getContext("2d");
    var img = new Image();

        img.src = 'img/lvl1.jpg';
        var pattern = null;
        var posx = null;
        img.onload = function() {
          pattern = ctx.createPattern(img, 'repeat');
          ctx.fillStyle = pattern;
          ctx.fillRect(0, 0, 800, 600);
          posx = 0;
            function animate() {
                posx += 1;
                ctx.fillStyle = pattern;
                ctx.fillRect(posx, 0, 800, 600);
            }
            setInterval(animate, 10)
        };


      </script>

I Want to background image to move to the right. It does not work. I tried all and I didn't successfully to do it.

Answer 1

The pattern has a fixed transform and does not move with the rectangle.

You can use the pattern's setTransform function or use the canvas transform.

Changing the function to

ctx.fillStyle = pattern;
function animate() {
   ctx.setTransform(1, 0, 0, 1, posx++, 0);  // last two are x, y of origin
   ctx.fillRect(0, 0, 800, 600);  // draw at origin
}

Will move the pattern.