Dabonirc,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<canvas width="800" height="600" id="canvas"></canvas>
<script>
let canvas = document.getElementById("canvas");
let c = canvas.getContext("2d");
let img = new Image;
img.onload = function() {
drawBg()
};
img.src = "http://www.vector-eps.com/wp-content/gallery/old-model-paper-background-textures/thumbs/thumbs_old-model-paper-texture3.jpg";
let dir = {
vx: 0,
vy: 0,
step: 2.3, //>0
x: .7,// 1 ... -1
y: .5 // 1 ... -1
};
function drawBg() {
requestAnimationFrame(drawBg);
c.clearRect(0, 0, canvas.width, canvas.height);
for (let k = -img.height; k < canvas.height + img.height; k += img.height - 1)
for (let i = -img.width; i < canvas.width + img.width; i += img.width - 1) c.drawImage(img, i - dir.vx, k - dir.vy);
if (Math.abs(dir.vx) > img.width) dir.vx = 0;
dir.vx += dir.x * dir.step;
if (Math.abs(dir.vy) > img.height) dir.vy = 0;
dir.vy += dir.y * dir.step
}
</script>
</body>
</html>