Sevic,
Вариант анимации ...
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>...</title>
</head>
<body>
<script type="text/javascript">
var canvas = document.createElement("canvas");
canvas.id = "canvas";
canvas.style.border = "double black 4px";
document.body.appendChild(canvas);
var cnvWidth = canvas.width = window.innerWidth - 30;
var cnvHeight = canvas.height = window.innerHeight - 30;
var ctx = canvas.getContext("2d");
function Shkale(c, x) {
var self = this;
this.x = x;
Shkale.prototype.gorLine = function() {
c.beginPath();
c.strokeStyle = "#396";
c.moveTo(0, cnvHeight / 2);
c.lineTo(cnvWidth, cnvHeight / 2);
c.stroke()
};
Shkale.prototype.verLine = function() {
for (var i = 0; i < cnvWidth + 45; i += 45) {
c.beginPath();
c.strokeStyle = "#00f";
c.moveTo(this.x + i, cnvHeight / 2 - 50);
c.lineTo(this.x + i, cnvHeight / 2 + 50);
c.stroke()
}
}
}
var shkale = new Shkale(ctx, 50);
var time = performance.now(),
duration = 1700;//скорость одного деления в ms
function move(b) {
b = (b - time) / duration;
1 <= b && (b = 1);
shkale.x = 45 - 45 * b;
ctx.clearRect(0, 0, cnvWidth, cnvHeight);
shkale.gorLine();
shkale.verLine();
if (b == 1) time = performance.now();
requestAnimationFrame(move);
console.log(shkale.x)
}
requestAnimationFrame(move);
</script>
</body>
</html>