根据屏幕尺寸在屏幕上对齐文本的最佳方法

Question

目前我正在为自己建立一个交互式个人简历类型的网站。我只是有一个基于屏幕大小居中文本的小问题，我很确定有一个简单的修复。这是基于我的代码所做的文本当前如何显示的图像 --->

这是执行此操作的代码

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth
canvas.height = window.innerHeight;
window.addEventListener('resize', (e) => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  })
ctx.font = "30px Arial";
ctx.shadowColor = "rgba(255,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: window.innerWidth/2, y: window.innerHeight/2};
const GRAVITY = 1;
const HOVER_TICKS = 20;
//Update thrust constant
const THRUST = 15;

const Systems = {
    'main': {
        holes:[
            {x: window.innerWidth/8, y: window.innerHeight/3, size: 40, dest: 'Education'},
            {x: window.innerWidth/8, y: window.innerHeight/1.15, size: 40, dest: 'Technical Skills'},
            {x: window.innerWidth/2, y: window.innerHeight/3, size: 40, dest: 'Experience1'},
            {x: window.innerWidth/2, y: window.innerHeight/1.15, size: 40, dest: 'Experience2'},
            {x: window.innerWidth/1.1, y: window.innerHeight/3, size: 40, dest: 'Contact Me'},
        ]
        
    },
    'Education': {holes:[{x: window.innerWidth-100, y: window.innerHeight-100, size: 40, dest: 'main'}]},
    
    'Technical Skills': {holes:[{x: window.innerWidth-100, y: window.innerHeight-100, size: 40, dest: 'main'}]},
    
    'Experience1': {holes:[{x: window.innerWidth-100, y: window.innerHeight-100, size: 40, dest: 'main'}]},
    
    'Experience2': {holes:[{x: window.innerWidth-100, y: window.innerHeight-100, size: 40, dest: 'main'}]},

    'Personal Projects': {holes:[{x: window.innerWidth-100, y: window.innerHeight-100, size: 40, dest: 'main'}]},
    
    'Contact Me': {holes:[{x: window.innerWidth-100, y: window.innerHeight-100, size: 40, 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, position, '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+.15);
        if (this.rotatingRight) this.angle += (degToRad+.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, y, radius, 0, Math.PI*2, false);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
};

class BlackHole extends SpaceObject {
    constructor(size, position, dest) {
        super(size, position);
        this.dest = dest;
    }
    update() {
        // Spin?
        this.angle+=.01;
    }
    draw() {
        // Shadow
        ctx.shadowBlur = this.size >>> 2;
        circle(ctx, this.position.x, this.position.y, this.size + 1, `rgba(255, 255, 255, .6)`);
        // Hole
        circle(ctx, this.position.x, this.position.y, 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), 2, '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 draw() {
    // Clear screen
    ctx.fillStyle = 'rgb(0, 10, 60)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'rgb(150, 150, 150)';
    ctx.fillText(`--> You are in ${currentSystem}`, window.innerWidth-(window.innerWidth-150), window.innerHeight-(window.innerHeight/1.05));
    ctx.fillText(`--> Use the arrow keys to guide the rocket into different portals`, window.innerWidth-(window.innerWidth-426), window.innerHeight-(window.innerHeight/1.08));
    ctx.fillText(`--> Refresh the page if you resize your window`, window.innerWidth-(window.innerWidth-312), window.innerHeight-(window.innerHeight/1.11));
    
    
    //Adding section/system text information
    /*
    if(currentSystem=='main'){
        ctx.font ='bolder 20px Courier New'
        ctx.fillText('Education Portal', window.innerWidth/9, window.innerHeight/4);
        ctx.fillText('Technical Skills Portal', window.innerWidth/9.2, window.innerHeight/1.27);
        ctx.fillText('Experience Portal', window.innerWidth/2, window.innerHeight/4);
        ctx.fillText('Experience Portal', window.innerWidth/2, window.innerHeight/1.27);
        ctx.fillText('Contact Me', window.innerWidth/1.25, window.innerHeight/4);

    }
    */

    if(currentSystem=='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);
    }


    if(currentSystem=='Education'){  
        //College
        ctx.font = 'italic 20px Courier New';
        ctx.fillText('Binghamton University, State University of New York, ', window.innerWidth-(window.innerWidth-150), 150);
        ctx.fillText('Thomas J. Watson College of Engineering and Applied Science', window.innerWidth-(window.innerWidth-150), 170);
        ctx.fillText('Bachelor of Science in Computer Science', window.innerWidth-(window.innerWidth-150), 190);
        
        ctx.font = '20px Courier New';
        ctx.fillText('Overall GPA: 3.92', window.innerWidth-(window.innerWidth-150), 210);
        ctx.fillText('Major GPA: 4.0', window.innerWidth-(window.innerWidth-150), 230);

        ctx.fillText('Relevant Coursework: Programming and Hardware Fundamentals,', window.innerWidth-(window.innerWidth-150), 270);
        ctx.fillText('Professional Skills, Ethics, and CS Trends,', window.innerWidth-(window.innerWidth-150), 290)
        ctx.fillText('Data Structures and Algorithms, Programming with Objects and Data Structures,', window.innerWidth-(window.innerWidth-150), 310);
        ctx.fillText('Architecture from a Programmer Perspective (By Fall 2021)', window.innerWidth-(window.innerWidth-150), 330);

        //High School
        ctx.font = 'italic 20px Courier New';
        ctx.fillText('Islip High School', window.innerWidth-(window.innerWidth-150), 430);
        ctx.fillText('STEM Academy Honors', window.innerWidth-(window.innerWidth-150), 450);
        ctx.font = '20px Courier New';
        ctx.fillText('Overall GPA: 100.77, Top 5% of class', window.innerWidth-(window.innerWidth-150), 470);

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

    }


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

        ctx.fillText('Return', window.innerWidth-135 , window.innerHeight-155);
    }


    if(currentSystem=='Experience1'){
        ctx.font = '20px Courier New';
        ctx.fillText('Binghamton University Rover Team, Software Engineer | Binghamton, NY',50 , 150);
        ctx.fillText('October 2020 - Prestent',50 , 170);
        
        ctx.fillText('-->Designed networks and code bases using C++ to maximize the efficiency',50 , 190);
        ctx.fillText('   and performance of a model mars rover for The Mars Society University',50 , 210);
        ctx.fillText('   Rover Challenge which takes place yearly', 50, 230);
        
        ctx.fillText('-->Built a custom username/password page by interfacing Google Firebase', 50, 250);
        ctx.fillText('   with a HTML, CSS, and JavaScript page which allowed for user', 50, 270);     
        ctx.fillText('   authentication, permitting members of the team to view classified documents', 50, 290);
        
        ctx.fillText('-->Prepared rover data by implementing Python script from scratch', 50, 310);
        ctx.fillText('   using Matplotlib and NumPy which led to data visualization to be analyzed', 50, 330);

        ctx.fillText('-->Constructed the GUI for the base station computer in C++ so', 50, 350);
        ctx.fillText('   that all the components of the rover could be viewed in the most effective way', 50, 370);
        

        ctx.fillText('JPMorgan Chase, Software Engineering Virtual Experience Program | Remote Role',50 , 460);
        ctx.fillText('July 2020 - September 2020',50 , 480);
        ctx.fillText('-->Modified an interface with a stock price data feed using Python 3 so that the system/data could be analyzed',50 , 500);
        ctx.fillText('-->Implemented the perspective open-source code in preparation for data visualization',50 , 520);
        ctx.fillText('-->Received certificate of completion by end of program',50 , 540);

        ctx.fillText('Return', window.innerWidth-135 , window.innerHeight-155);
    }


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





        ctx.fillText('Return', window.innerWidth-135 , window.innerHeight-155);
    }


    if(currentSystem=='Contact Me'){
        ctx.fillText('Contact Me',50 , 450);
        ctx.fillText('Return', window.innerWidth-135 , window.innerHeight-155);    
    }






    //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, i > canvas.width && (i=1, j+=150), circle(ctx, i, j, 2));

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

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

    // Repeats
    requestAnimationFrame(draw);
}

// Event Listeners
document.addEventListener('keydown', handleKeyInput);
document.addEventListener('keyup', handleKeyInput);
// Start the game
jump({dest: 'main'});
draw();

上面的图片在教育部分，尽管桌面屏幕大小，我只是希望文本全部整齐且对齐。是否有任何关于实现此目的的最佳方法的建议？

Answer 1

使用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 替换，这样您就可以放置与画布相关的项目。

这是您的代码，其中有几处更改。我将文本移动到绘制函数中的星星之后渲染。我还将每个文本正文放入它自己的函数中，然后可以在绘图循环中调用该函数。这将防止在调整画布大小时出现任何定位错误。最后，我将所有的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,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,
                size: 40,
                dest: "Technical Skills"
            },
            {
                x: canvas.width / 2,
                y: canvas.height / 3,
                size: 40,
                dest: "Experience1"
            },
            {
                x: canvas.width / 2,
                y: canvas.height / 1.15,
                size: 40,
                dest: "Experience2"
            },
            {
                x: canvas.width / 1.1,
                y: canvas.height / 3,
                size: 40,
                dest: "Contact Me"
            }
        ]
    },
    Education: {
        holes: [{
            x: canvas.width - 100,
            y: canvas.height - 100,
            size: 40,
            dest: "main"
        }]
    },

    "Technical Skills": {
        holes: [{
            x: canvas.width - 100,
            y: canvas.height - 100,
            size: 40,
            dest: "main"
        }]
    },

    Experience1: {
        holes: [{
            x: canvas.width - 100,
            y: canvas.height - 100,
            size: 40,
            dest: "main"
        }]
    },

    Experience2: {
        holes: [{
            x: canvas.width - 100,
            y: canvas.height - 100,
            size: 40,
            dest: "main"
        }]
    },

    "Personal Projects": {
        holes: [{
            x: canvas.width - 100,
            y: canvas.height - 100,
            size: 40,
            dest: "main"
        }]
    },

    "Contact Me": {
        holes: [{
            x: canvas.width - 100,
            y: canvas.height - 100,
            size: 40,
            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, position, "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, y, radius, 0, Math.PI * 2, false);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
};

class BlackHole extends SpaceObject {
    constructor(size, position, 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, 255, 255, .6)`
        );
        // Hole
        circle(ctx, this.position.x, this.position.y, 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),
            2,
            "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, State University of New York, ",
        canvas.width / 2,
        150
    );
    ctx.fillText(
        "Thomas J. Watson College of Engineering and Applied Science",
        canvas.width / 2,
        170
    );
    ctx.fillText(
        "Bachelor of Science in Computer Science",
        canvas.width / 2,
        190
    );
    ctx.font = "20px Courier New";
    ctx.fillText("Overall GPA: 3.92", canvas.width / 2, 210);
    ctx.fillText("Major GPA: 4.0", canvas.width / 2, 230);
    ctx.fillText(
        "Relevant Coursework: Programming and Hardware Fundamentals,",
        canvas.width / 2,
        270
    );
    ctx.fillText(
        "Professional Skills, Ethics, and CS Trends,",
        canvas.width / 2,
        290
    );
    ctx.fillText(
        "Data Structures and Algorithms, Programming with Objects and Data Structures,",
        canvas.width / 2,
        310
    );
    ctx.fillText(
        "Architecture from a Programmer Perspective (By Fall 2021)",
        canvas.width / 2,
        330
    );
    //High School
    ctx.font = "italic 20px Courier New";
    ctx.fillText("Islip High School", canvas.width / 2, 430);
    ctx.fillText(
        "STEM Academy Honors",
        canvas.width / 2,
        450
    );
    ctx.font = "20px Courier New";
    ctx.fillText(
        "Overall GPA: 100.77, Top 5% of class",
        canvas.width / 2,
        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++",
        canvas.width / 2,
        150
    );
    ctx.fillText(
        "Software and OS: VS Code, Eclipse, Sublime Text, Git, Logisim, Anaconda,",
        canvas.width / 2,
        190
    );
    ctx.fillText(
        "Spyder, Microsoft Office, Linux, MacOS",
        canvas.width / 2,
        210
    );
    ctx.fillText(
        "Additional: Familiar with MySQL, Arduino",
        canvas.width / 2,
        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",
        canvas.width / 2,
        150
    );
    ctx.fillText("October 2020 - Prestent", canvas.width / 2, 170);
    ctx.fillText(
        "-->Designed networks and code bases using C++ to maximize the efficiency",
        canvas.width / 2,
        190
    );
    ctx.fillText(
        "   and performance of a model mars rover for The Mars Society University",
        canvas.width / 2,
        210
    );
    ctx.fillText("   Rover Challenge which takes place yearly", canvas.width / 2, 230);

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

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

function draw() {
    // Clear screen
    ctx.fillStyle = "rgb(0, 10, 60)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "rgb(150, 150, 150)";
    ctx.fillText(
        `--> You are in ${currentSystem}`,
        canvas.width / 2,
        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.width/2, canvas.height/4);
          ctx.fillText('Experience Portal', canvas.width/2, 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, i > canvas.width && ((i = 1), (j += 150)), circle(ctx, i, j, 2)
    );

    //loading larger stars
    ctx.shadowBlur = 3;
    for (
        var i = 1, j = 1; j < canvas.height; i += 225, i > canvas.width && ((i = 1), (j += 225)), circle(ctx, i, j, 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", 50, 450);
        ctx.fillText("Return", canvas.width - 135, 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();