HTML5 画布游戏中的滚动相机（使用 javascript）

Question

I have a simple functioning 2d HTML canvas game, at the moment you can see the whole map, I want there to be a scrolling camera for the canvas game so you can't see the entire map at once, I have no idea how to do this. I've Googled a bit, found nothing.

ctx.drawImage(character,x,y);

canvas already correctly setUp

<canvas id="canvas"></canvas>

There's no errors or bugs

Answer 1

2 way :

1) adjust the positon of the object to draw with the camera offset:

deltaX=object.x-cameraX
deltaY=object.y-cameraY
if(deltaX + object.width > 0
  && deltaX - object.width < cameraWidth 
  &&deltaY + object.height > 0
  && deltaY - object.height < cameraHeight){

    ctx.drawImage(character,deltaX,deltaY);
}

2) have two context and print one into the other

ctxCamera.drawImage(ctx,cameraX,cameraY);

Answer 2

I don't know if I'm too late, but you can encompass the canvas tags with div tags.

HTML:

<div id = "viewport">
  <canvas id="canvas"></canvas>
</div>

CSS:

#viewport{
  overflow: hidden; //so you can't see outside of the div
  width: /*insert desired amount*/px;
  height: /*insert desired amount*/px;
}

Javascript:

function scrollCamera(camx, camy){
  var viewport = document.getElementById('viewport');
  viewport.scrollTop = camy;
  viewport.scrollLeft = camx;
}

scrollCamera(x-/*desired amount*/, y-/*desired amount*/); //makes the camera follow the player