index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>Snake</title>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        canvas {
            display: block;
        }
    </style>

</head>
<body>
        <canvas id='board' style="border: 1px solid black;" ></canvas>
    <script>
        function getLengthWidth() {
            const width = window.innerWidth
            const height = window.innerHeight;
            const length = Number.parseInt(((width > height ? height : width) * 0.9).toString())
            const square = Number.parseInt((length / 17).toString())
            return {
                width: square * 17,
                length: square
            }
        }
        const {width,length} = getLengthWidth()
        const canvas = document.getElementById('board')
        canvas.width = width
        canvas.height = width

    </script>
    <script src="snake.js"></script>
</body>
</html>