Прокрутка камеры в холсте HTML5 (с использованием JavaScript)

Question

У меня есть простая, работающая 2d HTML-игра с холстом, на данный момент вы можете видеть всю карту, я хочу, чтобы для игры на холсте была камера с прокруткой, чтобы вы не могли видеть всю карту сразу, у меня нетИдея как это сделать.Я немного погуглил, ничего не нашел.

ctx.drawImage(character,x,y);

холст уже правильно настроен

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

Нет ошибок или ошибок

Answer 1

2 способа:

1) отрегулируйте положение объекта для рисования со смещением камеры:

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) иметь два контекста и печатать один в другой

ctxCamera.drawImage (CTX, cameraX, cameraY);