Можно ли менять контекст канваса внутри кода несколько раз с помощью canvas.getContext()?

Question

У меня примерно такой код

const canvas1 = document.getElementById('canvas-1');
const canvas2 = document.getElementById('canvas-2');

const createContext = () => {
    let ctx1, ctx2;
    if (document.querySelector('#gpu').checked) {
        console.log('gpu');
        ctx1 = canvas1.getContext('2d', { willReadFrequently: false });
        ctx2 = canvas2.getContext('2d', { willReadFrequently: false });
    } else {
        console.log('cpu');
        ctx1 = canvas1.getContext('2d', { willReadFrequently: true });
        ctx2 = canvas2.getContext('2d', { willReadFrequently: true });
    }

    return [ctx1, ctx2];
};

let [ctx1, ctx2] = createContext();

<label for="gpu">gpu processing</label>
<input type="checkbox" id="gpu" ><br>

дело в том, что контекст не меняется при вызове функции createContext(), судя по дебагеру, проходятся все шаги, но ,тем не менее, контекст не меняется при клике по чекбоксу.

За кадром по кнопке вызывается несколько функций, в том числе создания контекста.

Вопрос вот в чем, есть ли какая-то возможность менять CanvasRenderingContext2D по ходу кода, или он создается раз и на всегда? Во втором случае, есть ли возможность менять willReadFrequently у контекста?

Answer 1

есть ли какая-то возможность менять CanvasRenderingContext2D по ходу кода...

Что касается первого вопроса, то в документации ясно сказано, что если тип контекста один и то же, то возвращается один и тот же контекст.

HTMLCanvasElement: getContext() method

Метод HTMLCanvasElement.getContext() возвращает контекст рисования на canvas или null, если идентификатор контекста не поддерживается или canvas уже установлен в другой режим контекста.

Последующие вызовы этого метода на том же элементе canvas с тем же аргументом contextType всегда будут возвращать тот же экземпляр контекста рисования, который был возвращен при первом вызове метода. Невозможно получить другой объект контекста рисования на данном элементе canvas.

есть ли возможность менять willReadFrequently у контекста?

Что касается второго вопроса, то

willReadFrequently:

Логическое значение, указывающее, запланировано ли много операций обратного чтения. Это заставит использовать программный (вместо аппаратно ускоренного) 2D-canvas и может сэкономить память при частом вызове getImageData().

задаётся в качестве параметра функции, то есть менять можно, но правда толку от этого нет, если вы уже использовали этот контекст для рисования.

Например:

const ctx = canvas.getContext("2d", { willReadFrequently: true });
if (!ctx) {
   throw new Error("ctx undefined");
}

возвращает контекст для программного рисования.

Этот атрибут можно устанавливать только один раз, при первом вызове getContext(). При повторном вызове — выдаётся предупреждение и установленное значение игнорируется.

БЛОГ НА HUSL

Можно ли менять контекст канваса внутри кода несколько раз с помощью canvas.getContext()?

Ответы (1 шт):

HTMLCanvasElement: getContext() method

`willReadFrequently`: