问HTML5画布滚动滞后

EN

//setting everything up.
var canvas = document.getElementById("canvas"),
	ctx = canvas.getContext("2d"),
	wrapper = document.getElementById("wrapper"),
	requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame,
	then = Date.now(),
	now,
	framesPerSecond = 30,
	counter = 1000/framesPerSecond,
	delta = 0,
	//for smooth movement.
	friction = 0.9,
	//to track key presses.
	keyDown = {};

var main = function(){
	now = Date.now();
	delta += now - then;
	then = now;

	if(delta >= counter){
		delta = 0;
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		tick();
		render();
	}

	requestAnimationFrame(main);
}

var player = {
	x:0,
	y:115,
	w:20,
	h:20,
	velX:0,
	speed:3,
	color:"maroon",
	camX:0,
	camY:0,
	camOffsetX:250,
	camOffsetY:125,

	tick:function(){
		this.velX *= friction
		this.x += 2*this.velX;

		//left arrow key.
		if(37 in keyDown){
			if(this.velX > -this.speed){
				this.velX--;
			}
		}

		//right arrow key.
		if(39 in keyDown){
			if(this.velX < this.speed){
				this.velX++;
			}
		}

		//update new camera position after the player's position got updated.
		this.updateCamera();
	},

	render:function(){
		ctx.fillStyle = this.color;
		ctx.fillRect(this.x, this.y, this.w, this.h);
	},

	updateCamera:function(){
		//sets the center of the camera view to the center of the player
		this.camX = this.x + this.w/2 - this.camOffsetX;
		this.camY = this.y + this.h/2 - this.camOffsetY;
		//scrolls canvas with the camera
		wrapper.scrollLeft = this.camX;
	}
};

var tick = function(){
	player.tick();
}

var render = function(){
	player.render();
  
  //arrow pointing to the problem
  ctx.fillText("<---", player.camX + 10, player.y);

	//camera bounderies
	ctx.strokeRect(player.x + player.w/2 - player.camOffsetX, player.y + player.h/2 - player.camOffsetY, 2*player.camOffsetX, 2*player.camOffsetY);
		
	//sets markers so you can tell your're scrolling.
	ctx.fillText("250 pixels", 250, 10);
	ctx.fillText("500 pixels", 500, 10);
	ctx.fillText("750 pixels", 750, 10);
	ctx.fillText("1000 pixels", 1000, 10);
	ctx.fillText("1250 pixels", 1250, 10);
	ctx.fillText("1500 pixels", 1500, 10);
	ctx.fillText("1750 pixels", 1750, 10);
}

//adds or removes keys from keyDown on keydown or keyup
document.addEventListener("keydown", function(e){
	keyDown[e.keyCode] = true;
});

document.addEventListener("keyup", function(e){
	delete keyDown[e.keyCode];
});

requestAnimationFrame(main);

#wrapper {
  width:250px;
  height:250px;
  overflow:hidden;
  border:1px solid navy;
}

<!-- div is so the canvas can scroll. -->
<div id="wrapper" style="width:500px; height:250px; border:1px solid navy; overflow:hidden;">
	<canvas id="canvas" width="2000" height="250"></canvas>
</div>