Javascript canvas

我一直在寻找一种方法来制作一个系统，其中摄像机/视口跟随玩家移动。正如你在小提琴上看到的，地图比画布和我想做的要大得多，这样玩家就会一直处于中心，除非靠近边缘。

玩家还没有移动。我想我需要将一些变量传递给 x 和 y 位置。

另外，如果您知道任何关于此的好教程，我将不胜感激。

请帮忙...

提前谢谢。

我的JS代码：

var canvas = document.getElementById("myCanvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            var width = 800;
            var height = 700;
            var level = [];
            var level_1 = [
                "bbggggggbbgggggggggggggggggg",
                "gbggggggbbgggbbbbbbggggggggg",
                "gbggggggbbgggbgggggggggggggg",
                "gbbbbbbbbbbbbbgggggggggggggg",
                "ggggggggggbggggggggggggggggg",
                "ggggggggggbggggggggggggggggg",
        "ggggggggggbggggggggggggggggg",
                "ggggggggggbggggggggggggggggg",
        "ggggggggggbggggggggggggggggg",
                "ggggggggggbggggggggggggggggg",
        "ggggggggggbggggggggggggggggg",
                "ggggggggggbggggggggggggggggg"
            ];

            var Ground = function(x, y, label) {
                this.x = x;
                this.y = y;
                this.label = label;
        this.draw = function() {
            if(this.label == "g") {
            ctx.fillStyle = 'rgb(0,255,0)';
            ctx.fillRect(this.x, this.y, 15, 15);
          }
          if(this.label == "b") {
            ctx.fillStyle = 'rgb(0,0,255)';
            ctx.fillRect(this.x, this.y, 15, 15);
          }
        }
      }
      var Player = function(x, y) {
        this.x = x;
        this.y = y;
        this.size = 10;
        this.draw = function() {
            ctx.fillStyle = 'rgb(0,0,0)';
          ctx.fillRect(this.x, this.y, this.size, this.size);
        }
        this.move = function() {
         // code for player to move
        }
      }
            var makeLevel = function() {
                for(var i = 0; i < level_1.length; i++) {
                    for(var j = 0; j < level_1[i].length; j++) {
                        switch(level_1[i][j]) {
                            case "g" :
                                level.push(new Ground(j*15, i*15, "g"));
                                break;
              case "b" :
                                level.push(new Ground(j*15, i*15, "b"));
                                break;
                        }
                    }
                }
            }
            makeLevel();
      var player = new Player(5,20);
            function draw() {
                ctx.clearRect(0,0,800,700);
        for(var i=0; i<level.length; i++) {
                    level[i].draw();
                }
        player.draw();
                window.requestAnimationFrame(draw);
            }
            draw();
         }

小提琴