javascript - HTML5 Canvas: Moving/panning world with arrow keys in EaselJS -

After one year of study and experimentation through trial and error, I think I started to understand javascript a bit more I am doing . So, now, I want to try my hand in writing a simple 2D platform game (think Super Mario World or Sonic Hejshog). For this, I will employ the EaselJS library.

I am trying to explain how I can pan / pan the 'world' within the canvas using the left and right arrow keys. I know how I can run a function on a keydown of the arrow key, but I do not even know how I should go on the edge / panning.

Do I have everything within the keyboard Status / coordinate should be adjusted, when a key is pressed? Or do I want to move the container's position / coordinates by putting everything in a container?

Whatever I bow in the right direction, I appreciate it. Tyvm :)

Update with the answer confirmed that I had to put everything in it so that I could determine the status of that container. I have drafted this code, and it works.

  // canvas work platform = new createj.Stage ('game'); Createjs.Ticker.addEventListener ('Tic', Tic); Function tick (event) {stage.update (); } // cave var cave = new createjs.Bitmap ('img / cave.png'); Cave. X = cave.y = 0; // World // Panj World if left or right arrow keys are pressed then world = new createj.Container (); World.x = 0; World.y = 0; World.addChild (cave); Stage.addChild (world); $ (Window). KidDown (Function (e) {Switch (EHIIEEE.E.Code) {Case 39: // Right Arrow Key World.Regx + = 10; Break; Case 37: // Left arrow key world .regx - = 10; break;}});   
 I tried to update  world.x  and  world.regX . In some way,  world.regX  seems to be smooth.   
 
 
 I like the way all the display objects will be scrolled in the scrollable Object Container (You probably have stable elements like lifestyle).  
 So when you move, just update the scroll object container.regx.  
 You can use the tinbizzes for a smooth scroll.