Kamera di Kanvas HTML 5

poster pertama kali di sini,

Saya telah mencari solusi untuk ini selama berhari-hari tetapi tidak berhasil, jika diminta, saya mohon Anda untuk menautkan saya karena saya tidak dapat menemukannya. Bagaimanapun, begini:

Saya sedang mengerjakan aplikasi kanvas berbasis ubin dan mengalami masalah saat menggerakkan kamera. Pada dasarnya saya ingin menjaga pahlawan di tengah layar kecuali dia mendekat dan mendekat. Saya telah mencoba menerjemahkan kanvas saat pahlawan bergerak tetapi mengalami masalah dengan pemotongan. Saya akhirnya mengerjakan ulang logika saya dan sekarang mencari tahu di mana harus mulai menggambar berdasarkan koordinat pahlawan dan kemudian menjaga pahlawan saya tetap digambar di tengah kanvas, itu berfungsi dengan baik sampai saya mendekati tepi layar. Ini kode saya saat ini untuk menggambar peta, leoX dan leoY adalah koordinat absolut pahlawan, kanvasnya 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;

EDIT: Tautan ke contoh sekarang sudah mati.