JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<canvas id = "canvas" style = "border:1px solid;"></canvas>

JavaScript

let ctx = document.getElementById("canvas").getContext("2d");
let arr = [
  [9, 7, 9, 2, 6],
  [5, 7, 9, 2, 1]
]
let pos = {
  x: 8,
  y: 1
}

ctx.fillStyle = "red";
ctx.fillRect(pos.x * 10, pos.y * 10, 6, 6);

arr[0].forEach(function(item, i) {
  ctx.fillStyle = "black";
  ctx.fillRect(item * 10, arr[1][i] * 10, 6, 6);
});

let row = [];
let col = arr[0].map(function(i) {
  if (i < pos.x) {
    return Math.abs(i - pos.x);
  } else {
    return i - pos.x;
  }
});
arr[1].forEach(function(item, j) {
  if (col[j] == Math.min(...col)) {
    row.push(item);
  }
});
console.log(row)
console.log(arr)