levshkatov,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<canvas width="800" height="600" id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var 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";
var dir = {
vx: 0,
vy: 0,
step: 2,
x: 0,
y: 0
};
function drawBg() {
requestAnimationFrame(drawBg);
c.clearRect(0, 0, canvas.width, canvas.height);
for (var k = -img.height; k < canvas.height + img.height; k += img.height-1)
for (var 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
}
function getMousePos(canvas, event) {
var rect = canvas.getBoundingClientRect();
return {
x: event.clientX - rect.left,
y: event.clientY - rect.top
}
}
var x = 0,
y = 0,
timer;
canvas.addEventListener("mousemove", function(event) {
window.clearTimeout(timer);
timer = window.setTimeout(function() {
var mousePos = getMousePos(canvas, event);
var a = Math.atan2(mousePos.y - y, mousePos.x - x);
dir.x = -Math.cos(a);
x = mousePos.x;
dir.y = -Math.sin(a);
y = mousePos.y
}, 50)
});
</script>
</body>
</html>