Hello World!

<!-- A comment in HTML -->

<!-- 
    multi line comment
-->

<p>
Before the Chessboard
<div id="outputSpace"> nothing yet</div>
After the Chessboard
<p>

<script type="text/javascript">
"use strict"

    let text = "";
    const SQUARES = 8;
    let row, col;

    for(row = 0; row < SQUARES; row++) {
        for(col = 0; col < SQUARES; col++) {
           if ((row+col) % 2 == 0) {
              text += "X";
           } else {
              text += "O";
           }
        }
        text += "\n";
    }
    text += "\n";

    document.getElementById("outputSpace").innerText = text;
</script>


<canvas id="chessboard" width="400", height="400", style="border:1px solid #000000;"> </canvas>

<script type="text/javascript">

    let canvas = document.getElementById("chessboard");
    let ctx = canvas.getContext('2d');
    let width = canvas.width;
    let height = canvas.height;

    let dim = Math.min(width, height);

    let size = dim/SQUARES;
    console.log("size = " , size);

    // ctx.fillStyle = "red";
    // ctx.fillRect(10,10, width - 20, height-20);
     
     for(row = 0; row < SQUARES; row++) {
        for(col = 0; col < SQUARES; col++) {
           if ((row+col) % 2 == 0) {
               ctx.fillStyle = "red";
           } else {
               ctx.fillStyle = "black";
           }
           ctx.fillRect(col*size ,row*size, size, size);
        }
    }

</script>