I would like to move my landscape to simulate a world moving on the x-axis. I use createPattern() to add an image inside my path, but the pattern draws the image at the same position when the path is moving: the top of the "mountains" (the lines) move to the left, but the image stays where it is below the lines.
I generate some coordinates in an array, I draw a line between them and I add an offset with a setInterval. After each iteration, the position of each point is modified by the offset :
let path = 'M'+(points[i-1].x - offsetX)+' '+points[i-1].y;
path += 'L'+(points[i].x - offsetX)+' '+points[i].y;
//etc.
How could I add a texture that follows the movement?
I learned a bit of webgl, even with a shader, I would have to create a new scene with new triangles, how can I tell the program that the texture should move to the left and not being drawn at the same coordinates depending on the viewport? Can you use a 2d canvas and a shader with a webgl context on top of it?
You can see that the pattern is repeated even though the mountains have moved to the left :
EDIT : now the result is thisedit :
The code :
function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(-moveX, 0);
for (let i=Math.max(fromKeyPoint, 1); i<toKeyPoint; ++i){
ctx.beginPath();
ctx.lineCap = 'round';
ctx.lineWidth = size;
ctx.strokeStyle = color;
ctx.moveTo(points[i-1].x, points[i-1].y);
ctx.lineTo(points[i].x, points[i].y);
ctx.stroke();
let path = 'M'+(points[i-1].x)+' '+points[i-1].y;
path += 'L'+(points[i].x)+' '+points[i].y;
path += 'L'+(points[i].x)+' '+canvas.height;
path += 'L'+(points[i-1].x)+' '+canvas.height;
path += 'Z';
let p = new Path2D(path);
console.log("path : "+path);
ctx.fillStyle = ctx.createPattern(imgTexture, "repeat");
ctx.fill(p);
}