使用 canvas.width/2 作为 x 轴的中心。您已经有了 textAlign = “center”，所以文本应该与画布的中心对齐。

ctx.fillText('Binghamton University,State University of New York,',canvas.width/2,150);

同样在您使用 window.innerWidth/Height 的任何地方，我建议您替换为 canvas.x/y，以便您将项目放置在与画布相关的位置。

这是您的代码，有几处更改。我将文本移动到 draw 函数中的星星之后进行渲染。我还将每个文本正文放入它自己的函数中，然后可以在绘制循环中调用该函数。这将防止在调整画布大小时出现任何定位错误。最后，我将所有 innerWidth/Height 更改为 canvas.width/height，并将用于调整大小的侦听器移至底部。

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;

ctx.font = "30px Arial";
ctx.shadowColor = "rgba(255,255,.6)";

// Constants in objects doesnt work cause objects passing as reference and will by modified!
// If you want constant constant,use primitives
const SPACESHIP_SIZE = {
    width: 15,height: 25
};
const SPACESHIP_POSITION = {
    x: canvas.width / 2,y: canvas.height / 2
};
const GRAVITY = 1;
const HOVER_TICKS = 20;
//Update thrust constant
const THRUST = 15;

const Systems = {
    main: {
        holes: [{
                x: canvas.width / 8,y: canvas.height / 3,size: 40,dest: "Education"
            },{
                x: canvas.width / 8,y: canvas.height / 1.15,dest: "Technical Skills"
            },{
                x: canvas.width / 2,dest: "Experience1"
            },dest: "Experience2"
            },{
                x: canvas.width / 1.1,dest: "Contact Me"
            }
        ]
    },Education: {
        holes: [{
            x: canvas.width - 100,y: canvas.height - 100,dest: "main"
        }]
    },"Technical Skills": {
        holes: [{
            x: canvas.width - 100,Experience1: {
        holes: [{
            x: canvas.width - 100,Experience2: {
        holes: [{
            x: canvas.width - 100,"Personal Projects": {
        holes: [{
            x: canvas.width - 100,"Contact Me": {
        holes: [{
            x: canvas.width - 100,dest: "main"
        }]
    }
};

let spaceShip;
let currentSystem = "main";
const spaceObjects = [];

class SpaceObject {
    constructor(size,position,color = "black",angle = 0) {
        this.color = color;
        this.size = size;
        this.position = position;
        this.angle = angle;
        spaceObjects.push(this);
    }
    tick() {
        this.update();
        this.draw();
    }
    update() {}
    draw() {}
    isAbove({
        x,y
    }) {
        return (
            Math.abs(this.position.x - x) < this.size &&
            Math.abs(this.position.y - y) < this.size
        );
    }
    destroy() {
        spaceObjects.splice(spaceObjects.indexOf(this),1);
    }
}

class SpaceShip extends SpaceObject {
    constructor(size,position) {
        super(size,"yellow");
        this.aboveHole = 0;
        this.engineOn = false;
        this.rotatingLeft = false;
        this.rotatingRight = false;
        this.velocity = {
            x: 0,y: 0
        };
    }

    draw() {
        const triangleCenterX = this.position.x + 0.5 * this.size.width;
        const triangleCenterY = this.position.y + 0.5 * this.size.height;
        ctx.shadowBlur = 0;
        ctx.save();
        ctx.translate(triangleCenterX,triangleCenterY);
        ctx.rotate(this.angle);
        ctx.lineWidth = 5;
        ctx.beginPath();
        // Triangle
        ctx.moveTo(0,-this.size.height / 2);
        ctx.lineTo(-this.size.width / 2,this.size.height / 2);
        ctx.lineTo(this.size.width / 2,this.size.height / 2);
        ctx.closePath();

        ctx.strokeStyle = this.color;
        ctx.stroke();

        ctx.fillStyle = "red";
        ctx.fill();

        // Flame for engine
        if (this.engineOn) {
            const fireYPos = this.size.height / 2 + 4;
            const fireXPos = this.size.width * 0.25;
            ctx.beginPath();
            ctx.moveTo(-fireXPos,fireYPos);
            ctx.lineTo(fireXPos,fireYPos);
            ctx.lineTo(0,fireYPos + Math.random() * 100);
            ctx.lineTo(-fireXPos,fireYPos);
            ctx.closePath();
            ctx.fillStyle = "orange";
            ctx.fill();
        }
        ctx.restore();
    }

    update() {
        this.moveSpaceShip();
        this.checkAboveHole();
    }

    moveSpaceShip() {
        // Angle has to be in radians
        const degToRad = Math.PI / 180;
        // Change the position based on velocity
        this.position.x += this.velocity.x;
        this.position.y += this.velocity.y;
        // Move spaceship to other side when leaving screen
        this.position.x = (canvas.width + this.position.x) % canvas.width;
        this.position.y = (canvas.height + this.position.y) % canvas.height;
        /*
             Adding floating point numbers to the end of the
             rotaion handling to make roation faster
             */
        if (this.rotatingLeft) this.angle -= degToRad + 0.15;
        if (this.rotatingRight) this.angle += degToRad + 0.15;

        // Acceleration
        if (this.engineOn) {
            this.velocity.x += (THRUST / 100) * Math.sin(this.angle);
            this.velocity.y -= (THRUST / 100) * Math.cos(this.angle);
        }
        // Update the velocity depending on gravity
        this.velocity.y += GRAVITY / 2500;
    }

    checkAboveHole() {
        const hole = spaceObjects.find(
            (spaceObject) =>
            spaceObject !== this && spaceObject.isAbove(this.position)
        );
        if (hole) {
            this.aboveHole++;
            if (this.aboveHole > HOVER_TICKS) {
                confirm(`Jump to system ${hole.dest}?`) && jump(hole);
                this.aboveHole = 0;
            }
        } else {
            this.aboveHole = 0;
        }
    }
}

const circle = (ctx,x,y,radius,color = "white") => {
    ctx.beginPath();
    ctx.arc(x,Math.PI * 2,false);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
};

class BlackHole extends SpaceObject {
    constructor(size,dest) {
        super(size,position);
        this.dest = dest;
    }
    update() {
        // Spin?
        this.angle += 0.01;
    }
    draw() {
        // Shadow
        ctx.shadowBlur = this.size >>> 2;
        circle(
            ctx,this.position.x,this.position.y,this.size + 1,`rgba(255,.6)`
        );
        // Hole
        circle(ctx,this.size,this.color);
        // Spinning view
        circle(
            ctx,this.position.x + (this.size * Math.sin(this.angle) - 1),this.position.y + (this.size * Math.cos(this.angle) - 1),2,"gray"
        );
        circle(
            ctx,this.position.x - (this.size * Math.sin(this.angle) - 1),this.position.y - (this.size * Math.cos(this.angle) - 1),"gray"
        );
    }
}

function handleKeyInput(event) {
    const {
        keyCode,type
    } = event;
    const isKeyDown = type === "keydown" ? true : false;

    if (keyCode === 37) spaceShip.rotatingLeft = isKeyDown;
    if (keyCode === 39) spaceShip.rotatingRight = isKeyDown;
    if (keyCode === 38) spaceShip.engineOn = isKeyDown;
}

function jump({
    dest
}) {
    currentSystem = dest || "main";
    while (spaceObjects.length) spaceObjects[0].destroy();
    Systems[currentSystem].holes.forEach(
        (hole) => new BlackHole(hole.size,{
            x: hole.x,y: hole.y
        },hole.dest)
    );
    spaceShip = new SpaceShip(SPACESHIP_SIZE,SPACESHIP_POSITION);
}

function main() {
    ctx.font = "bolder 20px Courier New";
    ctx.textAlign = "center";
    ctx.fillText(
        "Education Portal",Systems["main"].holes[0].x,Systems["main"].holes[0].y - 50
    );
    ctx.fillText(
        "Technical Skills Portal",Systems["main"].holes[1].x,Systems["main"].holes[1].y - 50
    );
    ctx.fillText(
        "Experience Portal",Systems["main"].holes[2].x,Systems["main"].holes[2].y - 50
    );
    ctx.fillText(
        "Experience Portal",Systems["main"].holes[3].x,Systems["main"].holes[3].y - 50
    );
    ctx.fillText(
        "Contact Me",Systems["main"].holes[4].x,Systems["main"].holes[4].y - 50
    );
}

function edu() {
    //College
    ctx.font = "italic 20px Courier New";
    ctx.textAlign = "center";
    ctx.fillText(
        "Binghamton University,",canvas.width / 2,150
    );
    ctx.fillText(
        "Thomas J. Watson College of Engineering and Applied Science",170
    );
    ctx.fillText(
        "Bachelor of Science in Computer Science",190
    );
    ctx.font = "20px Courier New";
    ctx.fillText("Overall GPA: 3.92",210);
    ctx.fillText("Major GPA: 4.0",230);
    ctx.fillText(
        "Relevant Coursework: Programming and Hardware Fundamentals,270
    );
    ctx.fillText(
        "Professional Skills,Ethics,and CS Trends,290
    );
    ctx.fillText(
        "Data Structures and Algorithms,Programming with Objects and Data Structures,310
    );
    ctx.fillText(
        "Architecture from a Programmer Perspective (By Fall 2021)",330
    );
    //High School
    ctx.font = "italic 20px Courier New";
    ctx.fillText("Islip High School",430);
    ctx.fillText(
        "STEM Academy Honors",450
    );
    ctx.font = "20px Courier New";
    ctx.fillText(
        "Overall GPA: 100.77,Top 5% of class",470
    );

    ctx.fillText(
        "Return",Systems["Education"].holes[0].x,Systems["Education"].holes[0].y - 50
    );
}

function techSkills() {
    ctx.font = "20px Courier New";
    ctx.textAlign = "center";
    ctx.fillText(
        "Languages: Python,Java,HTML,CSS,JavaScript,C++",150
    );
    ctx.fillText(
        "Software and OS: VS Code,Eclipse,Sublime Text,Git,Logisim,Anaconda,190
    );
    ctx.fillText(
        "Spyder,Microsoft Office,Linux,MacOS",210
    );
    ctx.fillText(
        "Additional: Familiar with MySQL,Arduino",250
    );

    ctx.fillText("Return",canvas.width - 135,canvas.height - 155);
}

function exp1() {
    ctx.font = "20px Courier New";
    ctx.textAlign = "center";
    ctx.fillText(
        "Binghamton University Rover Team,Software Engineer | Binghamton,NY",150
    );
    ctx.fillText("October 2020 - Prestent",170);
    ctx.fillText(
        "-->Designed networks and code bases using C++ to maximize the efficiency",190
    );
    ctx.fillText(
        "   and performance of a model mars rover for The Mars Society University",210
    );
    ctx.fillText("   Rover Challenge which takes place yearly",230);

    ctx.fillText(
        "-->Built a custom username/password page by interfacing Google Firebase",250
    );
    ctx.fillText(
        "   with a HTML,and JavaScript page which allowed for user",270
    );
    ctx.fillText(
        "   authentication,permitting members of the team to view classified documents",290
    );
    ctx.fillText(
        "-->Prepared rover data by implementing Python script from scratch",310
    );
    ctx.fillText(
        "   using Matplotlib and NumPy which led to data visualization to be analyzed",330
    );
    ctx.fillText(
        "-->Constructed the GUI for the base station computer in C++ so",350
    );
    ctx.fillText(
        "   that all the components of the rover could be viewed in the most effective way",370
    );
    ctx.fillText(
        "JPMorgan Chase,Software Engineering Virtual Experience Program | Remote Role",460
    );
    ctx.fillText("July 2020 - September 2020",480);
    ctx.fillText(
        "-->Modified an interface with a stock price data feed using Python 3 so that the system/data could be analyzed",500
    );
    ctx.fillText(
        "-->Implemented the perspective open-source code in preparation for data visualization",520
    );
    ctx.fillText(
        "-->Received certificate of completion by end of program",540
    );
    ctx.fillText("Return",canvas.height - 155);
}

function exp2() {
    ctx.font = "20px Courier New";
    ctx.textAlign = "center";
    ctx.fillText(
        "Google CSSI,Coursera,Software Engineering Student | Remote Role",150
    );
    ctx.fillText("June 2020 - August 2020",50,170);
    ctx.fillText(
        "-->Selected to take part in an invite-only Google Tech Student Development program",190
    );
    ctx.fillText(
        "-->Developed/designed personal web pages through CodePen using HTML,and JavaScript",210
    );
    ctx.fillText(
        "-->Reviewed,designed,and implemented a green screen algorithm in JavaScript",230
    );
    ctx.fillText(
        " to transform images on our developed web pages",250
    );
    ctx.fillText(
        "-->Learned to hide data in images through the use of steganography",270
    );
    ctx.fillText(
        "-->Received certificate of completion by end of program",290
    );
    ctx.fillText("Return",canvas.height - 155);
}

function draw() {
    // Clear screen
    ctx.fillStyle = "rgb(0,10,60)";
    ctx.fillRect(0,canvas.width,canvas.height);
    ctx.fillStyle = "rgb(150,150,150)";
    ctx.fillText(
        `--> You are in ${currentSystem}`,canvas.height - canvas.height / 1.05
    );
    ctx.fillText(
        `--> Use the arrow keys to guide the rocket into different portals`,canvas.width - (canvas.width - 426),canvas.height - canvas.height / 1.08
    );
    ctx.fillText(
        `--> Refresh the page if you resize your window`,canvas.width - (canvas.width - 312),canvas.height - canvas.height / 1.11
    );

    //Adding section/system text information
    /*
      if(currentSystem=='main'){
          ctx.font ='bolder 20px Courier New'
          ctx.fillText('Education Portal',canvas.width/9,canvas.height/4);
          ctx.fillText('Technical Skills Portal',canvas.width/9.2,canvas.height/1.27);
          ctx.fillText('Experience Portal',canvas.height/4);
          ctx.fillText('Experience Portal',canvas.height/1.27);
          ctx.fillText('Contact Me',canvas.width/1.25,canvas.height/4);

      }
      */
  
   //Loading small stars
    ctx.shadowBlur = 1;
    for (
        var i = 1,j = 1; j < canvas.height; i += 100,i > canvas.width && ((i = 1),(j += 100)),circle(ctx,i,j,1)
    );

    //loading medium stars
    ctx.shadowBlur = 2;
    for (
        var i = 1,j = 1; j < canvas.height; i += 150,(j += 150)),2)
    );

    //loading larger stars
    ctx.shadowBlur = 3;
    for (
        var i = 1,j = 1; j < canvas.height; i += 225,(j += 225)),3)
    );

    if (currentSystem == "main") {
        main();
    }
    if (currentSystem == "Education") {
        edu();
    }
    if (currentSystem == "Technical Skills") {
        techSkills();
    }
    if (currentSystem == "Experience1") {
        exp1();
    }
    if (currentSystem == "Experience2") {
        exp2();
    }

    if (currentSystem == "Contact Me") {
        ctx.fillText("Contact Me",450);
        ctx.fillText("Return",canvas.height - 155);
    }

    // tick all objects
    spaceObjects.forEach((spaceObject) => spaceObject.tick());

    // Repeats
    requestAnimationFrame(draw);
}

// Event Listeners
window.addEventListener("resize",(e) => {
    canvas.width = innerWidth;
    canvas.height = innerHeight;
});
document.addEventListener("keydown",handleKeyInput);
document.addEventListener("keyup",handleKeyInput);
// Start the game
jump({
    dest: "main"
});
draw();