JavaScript — Как построить этот тип «двоичной матрицы» графика (честно говоря, я не знаю, есть ли у нее имя) с использованием PHP и HTML

Просто относитесь к каждой точке, как к пикселю. Также представьте, что изображение было повернуто на 90 ° против часовой стрелки. Затем вы просто рисуете квадрат, который занимает меньше места, отведенного ему — таким образом, вы получаете разделительные линии.

Вот что-то быстрое, чтобы поиграть.
Несколько заметок:

• 0) Я только наполовину уменьшил размеры вашего изображения
• 1) 4 пикселя и 5 пикселей были выбраны произвольно
• 2) Я не удосужился установить цвет точки — вы можете
  легко сделать это.
• 3) Я просто обработал область рисования как обычный верх
  растровое изображение, в то время как ваше изображение, кажется, показывает, что все значения Y будут
  использоваться до того, как потребуется следующее значение X. (Это как 90 ° против часовой стрелки
  вращение).
• 4) Я обращаюсь к пикселям с X и Y — возможно, вы будете
  больше заинтересованы в решении их с одним номером? Если это так, вы
  может легко написать функцию, которая будет отображать две координаты в один
  число — индекс пикселей, если хотите.

Т.е. если изображение 100 х 100, то есть 10000 пикселей. Вы можете обратиться к ним, указав число от 0 до 9,999
Например

function 10k_to_100x100(index)
{
var x = index % 100;
var y = (index / 100).toFixed(0);
plotPixelDot(x, y);
}

Х просто остаток при делении на ширину
Y — ответ на целое число при делении на ширину

Вот фрагмент, который вы можете попробовать прямо здесь, на странице:

function byId(id){return document.getElementById(id);}
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
var x, y;

for (y=0; y<20; y++)
{
for (x=0; x<100; x++)
{
drawDot(x, y, 'output');
}
}
}

function drawDot(xPos, yPos, canvasId)
{
var actualX=xPos*5, actualY=yPos*5;
var ctx = byId(canvasId).getContext('2d');
ctx.fillRect(actualX, actualY, 4, 4);
}

<canvas width=558 height=122 id='output'></canvas>