กล้องบน HTML 5 Canvas

โปสเตอร์ครั้งแรกที่นี่

ฉันได้ค้นหาวิธีแก้ไขปัญหานี้มาหลายวันแล้ว แต่ก็ไม่มีประโยชน์ หากถูกถาม ฉันขอให้คุณเชื่อมโยงฉันเนื่องจากหาไม่พบ อย่างไรก็ตามนี่คือ:

ฉันกำลังทำงานกับแอปพื้นที่ทำงานแบบเรียงต่อกันและมีปัญหาในการเคลื่อนย้ายกล้อง โดยพื้นฐานแล้ว ฉันต้องการให้ฮีโร่อยู่ตรงกลางหน้าจอ เว้นแต่เขาจะเข้ามาใกล้และขอบ ฉันได้ลองใช้การแปลผืนผ้าใบในขณะที่ฮีโร่เคลื่อนไหว แต่มีปัญหาในการตัดเฉือน ฉันลงเอยด้วยการแก้ไขตรรกะของฉันใหม่ และตอนนี้ก็คิดออกแล้วว่าจะเริ่มวาดตรงไหนตามพิกัดของฮีโร่ จากนั้นให้วาดฮีโร่ของฉันไว้ที่กึ่งกลางผืนผ้าใบ มันทำงานได้ดีจนกว่าฉันจะเข้าใกล้ขอบของหน้าจอ นี่คือโค้ดปัจจุบันของฉันสำหรับการวาดแผนที่ leoX และ leoY เป็นพิกัดสัมบูรณ์ของฮีโร่ ผืนผ้าใบคือ 600X600

var topLeftX = Math.floor((leoX - 300)/33);
var topLeftY = Math.floor((leoY - 300)/33);


//draw map
for(var rowCtr=topLeftY;rowCtr<mapRows;rowCtr++){
for(var colCtr=topLeftX;colCtr<mapCols;colCtr++){

  var tileId = tileMap[rowCtr][colCtr]+ mapIndexOffset;
  var mapSourceX = Math.floor(tileId % 8 )*33;
  var mapSourceY = Math.floor(tileId / 8 )*33;
  context.drawImage(map, mapSourceX, mapSourceY,33,33,(colCtr-topLeftX)*33,(rowCtr-        topLeftY)*33,33,33);

 }
}
//code to draw leo
context.drawImage(tilesheet, sourceX,sourceY,32,48,300,300,32,48);

//update leo's position                 
leoX += leoDeltaX;
leoY += leoDeltaY;

แก้ไข: ลิงก์ไปยังตัวอย่างตอนนี้ตายแล้ว