ใช้ drawImage() สำหรับ Viewport/Camera
หลักการ: วาดเฉพาะส่วนของภาพพื้นหลังที่อยู่ใน viewport
รูปแบบทั่วไป
ctx.clearRect(0, 0, game.width, game.height);
// วาดพื้นหลัง: crop จาก (cropLeft, cropTop) ขนาด (cropWidth, cropHeight)
// วาดลง canvas ที่ (0,0) ขนาด (viewWidth, viewHeight)
ctx.drawImage(background, cropLeft, cropTop, cropWidth, cropHeight,
0, 0, viewWidth, viewHeight);ตัวอย่างเกม
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(background, left, top, 350, 250, 0, 0, 250, 150);
// วาดตัวละคร/วัตถุอื่นต่อ...วิธีนี้เหมาะสำหรับเกม 2D ที่มีโลกกว้างกว่าจอภาพ
