JSFiddle - React, Tailwind, and code Playground

HTML

<table id=foo > </table>
<pre id='allpoints'> </pre>

CSS

body { font:8pt verdana; }
table { border-collapse:collapse; margin:10px; }
td { border:1px solid #999; }

JavaScript

var w = 50, h = 30;

// initialize the table
for(i=w+h;i-->0;) { 
    r = foo.insertRow(); 
    for(j=w+h;j-->0;)
    c = r.insertCell();
}
// fill in coordinates
for(i=w;i-->0;)
    for(j=h;j-->0;)
       foo.rows[i+j].cells[i-j+h].innerHTML = i + "," + j;

// IMPORTANT PART
// find current view. 
// calculated by 20 <= (a=x+y) < 40
// and by        -8 <= (b=x-y) < 10
for(a=20;a<40;a++) {
    for(b=-8;b<10;b++) { 
       if ((b&1) != (a&1)) continue;
       x = (a+b)/2;
       y = (a-b)/2;
       allpoints.innerHTML += x + ', ' + y + '\n';
       foo.rows[a].cells[b+h].style.backgroundColor = '#ace';
    }               
}