OffscreenCanvas

При использовании элемента <canvas> или API холста, отрисовка, анимация и взаимодействие с пользователем обычно происходят в основной потоке выполнения веб-приложения. Вычисления, связанные с анимацией и отрисовкой холста, могут значительно повлиять на производительность приложения.

Интерфейс OffscreenCanvas предоставляет холст, который может быть отрисован вне экрана, разделяя DOM и API холста, так что элемент <canvas> больше не полностью зависит от DOM. Операции отрисовки также могут выполняться внутри контекста потока работ, что позволяет запускать некоторые задачи в отдельном потоке и избегать чрезмерной нагрузки на основной поток.

OffscreenCanvas — это передаваемый объект.

OffscreenCanvas()

Конструктор OffscreenCanvas. Создаёт новый объект OffscreenCanvas.

OffscreenCanvas.height

Высота холста вне экрана.

OffscreenCanvas.width

Ширина холста вне экрана.

OffscreenCanvas.getContext()

Возвращает контекст рисования для холста вне экрана или null, если идентификатор контекста не поддерживается или холст вне экрана уже настроен на другой режим контекста.

OffscreenCanvas.convertToBlob()

Создаёт объект Blob, представляющий изображение, содержащееся в холсте.

OffscreenCanvas.transferToImageBitmap()

Создаёт объект ImageBitmap из самого последнего отрисованного изображения OffscreenCanvas. См. его ссылку для важных замечаний по управлению этим ImageBitmap.

Наследует события от своего родителя, EventTarget.

Прислушивайтесь к этим событиям, используя addEventListener() или назначив обработчик событий свойству oneventname этого интерфейса.

contextlost

Срабатывает, если браузер обнаруживает, что контекст OffscreenCanvasRenderingContext2D утерян.

contextrestored

Срабатывает, если браузер успешно восстанавливает контекст OffscreenCanvasRenderingContext2D.

Один из способов использования API OffscreenCanvas — использование контекста отрисовки, полученного из объекта OffscreenCanvas, для генерации новых кадров. После завершения отрисовки нового кадра в этом контексте можно вызвать метод transferToImageBitmap() для сохранения последнего отрисованного изображения. Этот метод возвращает объект ImageBitmap, который может быть использован в различных API веб-приложений, а также на втором холсте, без создания копии.

Для отображения ImageBitmap, можно использовать контекст ImageBitmapRenderingContext, который можно создать, вызвав canvas.getContext("bitmaprenderer") на элементе холста (отображаемого). Этот контекст предоставляет только возможность заменить содержимое холста указанным ImageBitmap. Вызов ImageBitmapRenderingContext.transferFromImageBitmap() с ранее отрисованным и сохранённым ImageBitmap из OffscreenCanvas, отобразит ImageBitmap на холсте и передаст его владение холсту. Один OffscreenCanvas может передавать кадры в произвольное количество других объектов ImageBitmapRenderingContext.

Исходя из этих двух элементов <canvas>

<canvas id="one"></canvas> <canvas id="two"></canvas>

следующий код обеспечит отрисовку с использованием OffscreenCanvas как описано выше.

const one = document.getElementById("one").getContext("bitmaprenderer");
const two = document.getElementById("two").getContext("bitmaprenderer");

const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

// Perform some drawing for the first canvas using the gl context
const bitmapOne = offscreen.transferToImageBitmap();
one.transferFromImageBitmap(bitmapOne);

// Perform some more drawing for the second canvas
const bitmapTwo = offscreen.transferToImageBitmap();
two.transferFromImageBitmap(bitmapTwo);

Другой способ использования API OffscreenCanvas — вызов transferControlToOffscreen() на элементе холста <canvas>, как в рабочем потоке, так и в основном потоке, который вернёт объект OffscreenCanvas из объекта HTMLCanvasElement из основного потока. Вызов getContext() затем получит контекст отрисовки из этого OffscreenCanvas.

Сценарий main.js (основной поток) может выглядеть так:

const htmlCanvas = document.getElementById("canvas");
const offscreen = htmlCanvas.transferControlToOffscreen();

const worker = new Worker("offscreen-canvas.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);

В то время как сценарий offscreen-canvas.js (поток работ) может выглядеть так:

onmessage = (evt) => {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");
  // Perform some drawing using the gl context
};

Также возможно использовать requestAnimationFrame() в потоках работ:

onmessage = (evt) => {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");

  function render(time) {
    // Perform some drawing using the gl context
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
};

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

• CanvasRenderingContext2D
• OffscreenCanvasRenderingContext2D
• ImageBitmap
• ImageBitmapRenderingContext
• HTMLCanvasElement.transferControlToOffscreen()
• requestAnimationFrame()
• WebGL вне основного потока – Mozilla Hacks (2016)