Объединение пикселей для минимизации операций рисования на HTML-холсте

Question

Привет! Я рисую изображение на холсте (html5) и хочу уменьшить количество вызовов fillRect, которые я выполняю, в надежде сделать процесс более эффективным.

Примечание. Я вызываю canvas.fillRect для рисования отдельных пикселей, и пиксели могут иметь размер 1x1 или прямоугольник другого размера в зависимости от разрешения, в котором я рисую (поэтому я знаю, что они не называются пикселями, но моя область изображения ограничена) ,

Я хотел бы найти и объединить отдельные пиксели, если они одного цвета. Это уменьшит количество вызовов на fillRect и, надеюсь, будет быстрее, чем у меня сейчас.

Допустим, у меня есть такая карта:

[fff, fff, fff]
[f00, f00, f00]
[00f, 00f, 00f]

Вместо 9 вызовов на fillRect я хотел бы сделать 3.

Итак, мои вопросы:

1) Как называется этот процесс (поэтому я могу провести более интеллектуальное исследование, так как поиск в Google «слияния пикселей», «слияние прямоугольников» и т. Д. Не дает никаких полезных результатов).

2) Любой, кто знает о любой библиотеке с открытым исходным кодом, которая реализует это (необязательно должен быть javascript)

3) Кто-нибудь думает, что добавление этого этапа предварительной обработки на самом деле замедлит код в JS?

Спасибо всем

Гвидо Тапиа

Answer 1

Я бы согласился с @Jakub, что выполнение такого анализа в Javascript, вероятно, займет намного больше времени, чем вы экономите, заполняя меньше прямоугольников (обычно очень быстрая операция для видеокарты).Это если вы не должны рисовать один и тот же набор прямоугольников много тысяч раз.

Что касается того, что он называется, то самое близкое, что я могу придумать, это кодирование длины серии , котороепо общему признанию является одномерным, а не двумя.