jsGrid

<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <title>CANVAS</title>
    <style>
        html,
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
            align-items: center;
            margin-top: 30px;
            position: relative;
        }

        canvas {
            margin: 10px;
            border: 1px solid black;
            /*background-image: url('grid.png');*/
        }
    </style>
</head>
<body>
    <div id="container" class="container">
        <canvas id="canvas" width="650" height="450">Please update your browser!</canvas>
    </div>
    <script>
        'use strict'

        {
            const canvas = document.getElementById('canvas');
            canvas.width = 650;
            canvas.height = 450;
            const ctx = canvas.getContext('2d');

            ctx.beginPath();
            ctx.strokeStyle = "black";
            ctx.lineWidth = 1;

            ctx.font = "40px serif";
            ctx.textAlign = "center";
            ctx.strokeText("Test text on canvas", 200, 200);

            for (let y = 0; y < canvas.height; y += 50) {
                for (let x = 0; x < canvas.width; x += 50) {
                    ctx.beginPath();
                    //ctx.lineWidth = 1;
                    ctx.moveTo(x, y)
                    ctx.lineTo(x, canvas.height);
                    ctx.stroke();
                }

                ctx.beginPath();
                //ctx.lineWidth = 1;
                ctx.moveTo(0, y)
                ctx.lineTo(canvas.width, y);
                ctx.stroke();
            }
        }
    </script>
</body>
</html>