How to fix misalignment of chessboard canvas during and after animation?

  canvas, chess, css, html, javascript

I am trying to make a Chess game in JavaScript, and to do so, must first draw the chessboard. I have done that, and am working on a simple intro animation that will play before the game starts. I want the board to slide in from the bottom of the screen (off-screen) into the middle. However, when it does that, my canvas is aligned to the left. How can I fix this? Below is my current CSS.

let canv = document.getElementById("canvas").getContext("2d");
let board = canvas.getBoundingClientRect();
let square = { width: 100, height: 100 };
const dark_grey = "rgb(18, 18, 18)";
const light_grey = "rgb(227, 227, 227)";

function draw_rect(x, y, width, height) {

    canv.beginPath();
    canv.rect(x, y, width, height);
    canv.fillRect(x, y, width, height);

}

function draw_squares() {

    canv.fillStyle = light_grey;
    canv.fillRect(0, 0, board.width, board.height);

    for (y = 0; y < 8; y++) {

        for (x = 0; x <= 8; x++) {

            if ((x + y) % 2 == 1) { canv.fillStyle = dark_grey; } 
            else { canv.fillStyle = light_grey; }

            draw_rect(x * square.width, y * square.height, square.width, square.height);

        }

    }


}

draw_squares();
:root {

    --font: "Bebas Neue", cursive;

    --color1: 227, 227, 227; /* Light Grey */
    --color2: 18, 18, 18;    /* Dark Grey  */

}

html, body {

    font-family: var(--font);
    color: rgb(var(--color1));
    background: rgb(var(--color2));
    overflow: hidden;

}

canvas {

    position: absolute;
    bottom: 5%;
    animation: slide 5s;

}

@keyframes slide {

    0% { bottom: -200%; }
    10% { bottom: -100%; }
    100% { bottom: 5%; }

}

.padded { padding: 1%; }

.squircle  { border-radius: 30px; }

.centered { text-align: center; margin: auto; display: block; }

.title { font-size: 300%; }

.glowing { text-shadow: 0 0 10px rgba(var(--color1), 0.6); }

._glowing { box-shadow: 0 0 10px rgba(var(--color1), 0.6); }
<canvas id = "canvas"
            class = "centered _glowing squircle"
            width = "800" 
            height = "800"> </canvas>

Source: Ask Javascript Questions

LEAVE A COMMENT