<script>
  //Page size
  var bw = 207;
  var bh = 315;

  //page padding
  var pw = 0 + 0.5;
  var ph = 0;

  //Grid every
  var v = 9;
  var h = 9;

  //margins
  var tm = 9;
  var bm = 18;
  var om = 18;
  var im = 9;

  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  function drawBoard() {

    //horizontal lines
    for (var x = 0; x <= bw; x += h) {
      context.moveTo(x + pw, ph);
      context.lineTo(x + pw, bh);
      context.strokeStyle = "#999";
      context.stroke();
    }

    //vertical lines
    for (var x = 0; x <= bh; x += v) {
      context.moveTo(pw, x + ph + 0.5);
      context.lineTo(bw, x + ph + 0.5);
      context.strokeStyle = "#ddd";
      context.stroke();

    }
    // Paper -- Red box
    context.beginPath();
    context.strokeStyle = "red";
    context.rect(pw, ph, bw, bh + 0.5);
    //duplicate
    context.rect(pw + bw, ph, bw, bh + 0.5);


    context.stroke();

    // text area -- Blue box
    var mw = bw - (im + om);
    var mh = bh - (tm + bm);

    context.beginPath();
    context.strokeStyle = "blue";
    context.rect(om + 0.5, tm + 0.5, mw, mh);
    //duplicate --- Inverted
    context.rect(im + 0.5 + bw, tm + 0.5, mw, mh);

    context.stroke();
  }

  drawBoard();

</script>