В верхней части экрана, есть ползунок изменения размера. Двигая его, можно менять количество пикселей на полотне.

На полотне, по принципу матрицы, строиться сетка из пикселей, и каждый пиксель имеет свои индексы x и y.
pixels - массив пикселей.

Каждый пиксель имеет такие свойства:
pixels[{ xx: ..., yy: ..., filled: ..., color: ..., stroke: ..., strokeColor: ...}];
где: xx, yy это индексы пикселя по x и y соответственно.
filled - закрашен ли пиксель.
color - цвет пикселя.
stroke - есть ли сетка.
strokeColor - должна ли быть сетка в цвет пикселя.

При нажатии на пиксель, или при зажатии кнопки и движении указателя, в массив filledPixels добавляется новый элемент, или изменяется уже существующий:
filledPixels[{ xx: pixel.xx + shiftX, yy: pixel.yy + shiftY, shiftX: ..., shiftY: ..., color: ...}];
где: xx, yy это индексы пикселя на который нажали.
shiftX и shiftY - смещение по x и y.
color - цвет.

При отрисовке, соответствующие по индексам элементы из массива pixels принимают color элементов из массива filledPixels, и filled принимает значение true.

Под полотном, располагается палитра цветов. Цвет "ZERO" это ластик. Он удаляет элементы из массива filledPixels.

Справа от палитры цветов, располагается несколько настроек отображения:
Без заскраски/С закраской - выбор, закрашивать ли ранее закрашенные пиксели, при движении указателя с зажатой кнопкой.
Показать сетку/Скрыть сетку.
Базовая сетка/Сетка в цвет - должна ли сетка быть в цвет пикселя.

Очистить - очистить полотно. Полностью очищает массив filledPixels.

Слева от полотна, нажав на кнопку "Скачать", можно скачать изображение, или .txt файл c некоторыми данными "картинки". Этот файл можно загрузить обратно, нажав на кнопку "Загрузить", и "картинка" отобразится.

Справа находятся ползунки, с помощью которых можно двигать "картинку".