setInterval перерисовывает перерендеренный компонент

У меня есть React компонент canvas с определенным паттерном. Он с помощью setInterval каждые 100мс постепенно заполняется рисунком, а потом полностью очищается. Проблема в том, что если вкладка неактивна, браузер уменьшает приоритет interval`а, поэтому происходит такая ситуация, что если открыть 2 браузера, то в одном, который активный - все хорошо и рисунок заполнился, а потом очистился, а во втором при переключении он на очищенном поле начинает рисовать (что делать нельзя). Как это можно предотвратить? Пытался отслеживать нахождение человека на вкладке, чтобы просто не отрисовывать при таком случае, но это слишком костыльно и не работает как надо.

В результате при переходе на вкладку поле выглядит вот так (начинает заполнение поля):

А должно быть вот так: