Оптимизация отрисовки матрицы

Задача

Есть у меня класс цветов - Color и матрица из цветов board.
Матрица состоит всего из несколько цветов, эти цвета мы имеем в colors.
Мне надо отрисовать матрицу в каждом кадре на CanvasRenderingContext2D. Функция обновления в каждом кадре уже есть.

Что я пробовал

1. Отрисовка самым банальным способом

for (let y = 0; y < board.size.y; y++) {
    for (let x = 0; x < board.size.x; x++) {
        const position = new Point2D(x, y);
        const color = board.get(position);
        context.fillStyle = color.toString();
        context.fillRect(position.x * sizeCell.x, position.y * sizeCell.y, sizeCell.x, sizeCell.y);
    }
}

2. Отрисовка каждого цвета отдельно

for (const color of colors) {
    context.beginPath();
    for (let y = 0; y < board.size.y; y++) {
        for (let x = 0; x < board.size.x; x++) {
            const position = new Point2D(x, y);
            const color2 = board.get(position);
            if (color == color2) {
                context.rect(position.x * sizeCell.x, position.y * sizeCell.y, sizeCell.x, sizeCell.y);
            }
        }
    }
    context.fillStyle = color.toString();
    context.fill();
}

Другие, более сложные алгоритмы тоже в голову приходили, но я не смог их реализовать.

Проблема

Для матрицы 100 на 100 FPS падает до 40 для обоих способов. Я понимаю, что отрисовать матрицу 100 × 100 в каждом кадре не простая задача, но я уверен, что это дело можно оптимизировать как минимум до 70-90 FPS.

Вопрос

Какими способами можно оптимизировать отрисовку? Как изменить текущие алгоритмы, или может посоветуйте получше что-то?