JSFiddle - React, Tailwind, and code Playground

CSS

td {
  width: 20px;
  height: 20px;
  border: 1px solid grey;
  background-color: white;
}

td.paint {
  background-color: black;
}

JavaScript

// change points at the end

function draw(p1, p2) {
let content = '<table>';
for (let i = 0; i < 20; i++) {
  content += '<tr>';
  for (let j = 0; j < 20; j++) {
    content += '<td id="cell-' + i + '-' + j + '"></td>';
  }
  content += '</tr>';
}
content += '</table>';
document.body.innerHTML = content;

// oops messed up x and y coordinates, so just swap it in the beginning
p1 = [p1[1], p1[0]], p2 = [p2[1], p2[0]];

let p1s = [Math.round(p1[0]), Math.round(p1[1])], p2s = [Math.round(p2[0]), Math.round(p2[1])];

document.getElementById('cell-' + p1s[0] + '-' + p1s[1]).className = 'paint';
document.getElementById('cell-' + p2s[0] + '-' + p2s[1]).className = 'paint';

if (Math.abs(p1s[0] - p2s[0]) <= 1 && Math.abs(p1s[1] - p2s[1]) <= 1)
  return;

if (Math.abs(p1[0] - p2[0]) >= Math.abs(p1[1] - p2[1])) {
  if (p1[0] > p2[0]) {
    let pt = p1;
    p1 = p2;
    p2 = pt;
    pt = p1s;
    p1s = p2s;
    p2s = pt;
  }
  for (let x = p1s[0] + 1; x < p2s[0]; x++) {
    let y = Math.round(p1[1] + (x - p1[0]) / (p2[0] - p1[0]) * (p2[1] - p1[1]));
    document.getElementById('cell-' + x + '-' + y).className = 'paint';
  }
} else {
  if (p1[0] > p2[0]) {
    let pt = p1;
    p1 = p2;
    p2 = pt;
    pt = p1s;
    p1s = p2s;
    p2s = pt;
  }
  for (let y = p1s[1] + 1; y < p2s[1]; y++) {
    let x = Math.round(p1[0] + (y - p1[1]) / (p2[1] - p1[1]) * (p2[0] - p1[0]));
    document.getElementById('cell-' + x + '-' + y).className = 'paint';
  }
}
}
draw([3.1, 2.7], [17.8, 8.7]);