<div id="container">
</div>

<script>
function createGrid(m, n, s) {
  const rowsRep = "(" + m + ", " + s + ")";
  const colsRep = "(" + n + ", " + s + ")";
  
  const pDiv = document.createElement("div");
  pDiv.style.display = "grid";
  pDiv.style.gridTemplateColumns = "repeat" + colsRep;
  pDiv.style.gridTemplateRows = "repeat" + rowsRep;
  pDiv.style.gap = "4px";
  
  for(let i = 0; i < m; i++) {
    for(let j = 0; j < n; j++) {
      const cDiv = document.createElement("div");
      cDiv.style.width = s;
      cDiv.style.height = s;
      cDiv.style.background = "var(--bg)";
      cDiv.style.border = "1px solid var(--muted-border)";
      cDiv.style.borderRadius = "4px";
      pDiv.append(cDiv);
    }  
  }
  
  return pDiv;
}

function createButtonWithCaption(caption) {
  let btn = document.createElement("button");
  btn.innerHTML = caption;
  return btn;
}

function toGridAddButtons(grid, btns, idxs) {
  let cDivs = grid.children;
  let n1 = btns.length;
  let n2 = idxs.length;
  let n = (n1 < n2) ? n1 : n2;
  
  for (let i = 0; i < n; i++) {
    let idx = idxs[i];
    let btn = btns[i];
    let cDiv = cDivs[idx];
    cDiv.style.padding = "0";
    cDiv.style.display = "flex";
    cDiv.append(btn);
    btn.style.flexGrow = "1";
  }
  
  for(let cDiv of cDivs) {
    cDiv.style.border = "0";
  }
}

function createTextarea() {
  let txa = document.createElement("textarea");
  txa.style.width = "150px";
  txa.style.height = "100px";
  txa.style.overflowY = "scroll";
  
  return txa;
}

function createArrowKeysKeypad2() {
  // create button element
  let noBtn = createButtonWithCaption("&uparrow;")
  let neBtn = createButtonWithCaption("&nearr;")
  let eaBtn = createButtonWithCaption("&rightarrow;")
  let seBtn = createButtonWithCaption("&searr;")
  let soBtn = createButtonWithCaption("&downarrow;")
  let swBtn = createButtonWithCaption("&swarr;")
  let weBtn = createButtonWithCaption("&leftarrow;")
  let nwBtn = createButtonWithCaption("&nwarr;")
  let btns = [
    noBtn, neBtn, eaBtn, seBtn,
    soBtn, swBtn, weBtn, nwBtn
  ];
  
  // create grid element
  let grid = createGrid(3, 3, "30px");
  
  // add buttons to grid with certain index
  let idxs = [1, 2, 5, 8, 7, 6, 3, 0];
  toGridAddButtons(grid, btns, idxs);
  
  // create btns in grid
  grid.btns = btns;
  
  return grid;
}

function createCanvas() {
  let can = document.createElement("canvas");
  can.width = "263";
  can.height = "263";
  can.style.width = can.width;
  can.style.height = can.height;
  
  return can;
}

function printData(txa, str, delim) {
  let vals = txa.value;
  
  if(vals.length == 0) {
    vals = str;
  } else {
    vals += delim + " " + str;
  }
  
  txa.value = vals;
  txa.scrollTop = txa.scrollHeight;
}

const dl = 5;
let xx, yy;

function initPos(can) {
  xx = can.width / 2;
  yy = can.height / 2;
}

function updatePos(i, txa, can) {
  dirs = [
    "no", "ne", "ea", "se",
    "so", "sw", "we", "nw"
  ];
  printData(txa, dirs[i], ";");
  
  let dx = [+0, +1, +1, +1, +0, -1, -1, -1];
  let dy = [-1, -1, +0, +1, +1, +1, +0, -1];
  
  let xx1 = xx;
  let yy1 = yy;
  xx += dl * dx[i];
  yy += dl * dy[i];
  let xx2 = xx;
  let yy2 = yy;
    
  drawLine(can, xx1, yy1, xx2, yy2);
}

function drawLine(can, x1, y1, x2, y2) {
  let ctx = can.getContext("2d");
  ctx.strokeStyle = "#f00";
  ctx.lineWidth = "8";
  ctx.lineCap = "round";
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}
</script>

<script>
// get container element, set style
let cnt = document.getElementById("container");
cnt.style.marginTop = "1em";

// create arrow keys keypad
let keypad = createArrowKeysKeypad2();
keypad.style.float = "left";

// create textarea element
let txa = createTextarea();
txa.style.marginLeft = "1em"

// create canvas element
let can = createCanvas();
initPos(can);

// attach event handler to keypad buttons
let n = keypad.btns.length;
for(let i = 0; i < n; i++) {
  keypad.btns[i].addEventListener("click", () => {
    updatePos(i, txa, can)
  });
}

// create div element
let topDiv = document.createElement("div");

// append element to container
topDiv.append(keypad);
topDiv.append(txa);
cnt.append(topDiv);
cnt.append(can);
</script>