Cách thực sự làm việc với camera/viewport HTML5 Canvas

Để dùng viewport, dùng phương thức drawImage().

ctx.clearRect(0,0,game.width,game.height); // ảnh nền đầy đủ ctx.drawImage(background,cropLeft,cropTop,cropWidth,cropHeight, 0,0,viewWidth,viewHeight);

Cho game −

var myGame = document.getElementById("game"); var myCtx= myGame.getContext("2d"); myCtx.clearRect(0,0,game.width,game.height); // dùng drawImage() myCtx.drawImage(background,left,top,350,250,0,0,250,150); myCtx.beginPath(); myCtx.arc(130,80,12,0,Math.PI*2,false); myCtx.closePath(); myCtx.fill(); myCtx.stroke();