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() {
c.drawImage(img,0,0);
}
img.src = "http://nevsepic.com.ua/uploads/posts/2011-10/1317583107_www.nevsepic.com.ua_kazumasa-uchio-ucchiey-003.jpg";
function getMousePos(canvas, event) {
var rect = canvas.getBoundingClientRect();
return {
x: event.clientX - rect.left,
y: event.clientY - rect.top
};
}
canvas.addEventListener('mousemove', function(event) {
var mousePos = getMousePos(canvas, event);
var x = (img.width - canvas.width) * (mousePos.x /canvas.width );
var y = (img.height - canvas.height) * (mousePos.y /canvas.height );
c.clearRect(0, 0, canvas.width, canvas.height);
c.drawImage(img,-x|0,-y|0);
});
</script>
</body>
</html>