jsGrid

<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <title>GalleryClass</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;
        }
        canvas {
            margin: 10px;
            border: 1px solid black;
        }
    </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');

            const ctx = canvas.getContext('2d');

            console.log(canvas.height);
            console.log(canvas.width);
            ctx.font = "10px serif";

            for (let y = 0; y < canvas.height; y += 50) {
                for (let x = 0; x < canvas.width; x += 50) {

                    ctx.textAlign = 'left';
                    ctx.fillText(x, x - 18, 10);

                    ctx.beginPath();
                    //ctx.lineWidth = 1;
                    ctx.moveTo(x, y)
                    ctx.lineTo(x, canvas.height);
                    ctx.stroke();
                }

                if (y > 0) {
                    ctx.font = "10px serif";
                    ctx.textAlign = 'right';
                    ctx.fillText(y, 18, y + 10);
                }


                ctx.beginPath();
                //ctx.lineWidth = 1;
                ctx.moveTo(0, y)
                ctx.lineTo(canvas.width, y);
                ctx.stroke();
            }


            let dataURL = canvas.toDataURL("image/png");
            let newTab = window.open('about:blank', 'image from canvas');
            newTab.document.write("<img src='" + dataURL + "' alt='from canvas'/>");

            //ctx.beginPath();
            //ctx.strokeStyle='red'
            //ctx.lineWidth = 4;
            //ctx.moveTo(50, 50)
            //ctx.lineTo(100, 100);
            //ctx.stroke();

        }
    </script>
</body>
</html>