Создать 2d контекст * без * canvas

Question

В настоящее время я ищу способ создания контекста рендеринга canvas 2d без фактического наличия элемента canvas на странице. Я мог бы динамически создать элемент canvas и скрыть его, но, опять же, я не хочу показывать изображение непосредственно пользователю в любое время, поэтому нет смысла фактически иметь элемент canvas на странице. Поэтому я в основном ищу что-то похожее на

var image = new Image( );

но только для контекста рендеринга Canvas 2d (псевдокод)

var context = new 2dContext( );

Есть ли такая функциональность? Я не смог найти ничего подобного. Вызов

var context = new CanvasRenderingContext2D( );

, которое является именем интерфейса контекста рендеринга спецификацией HTML5, просто вызывает у меня неловкие ошибки в Firefox:

uncaught exception: [Exception... "Cannot convert WrappedNative to function" nsresult: "0x8057000d (NS_ERROR_XPC_CANT_CONVERT_WN_TO_FUN)" location: "JS frame :: http://localhost/ :: <TOP_LEVEL> :: line 25" data: no]

Answer 1

Можно использовать холст, не отображая его на странице. Вы можете сделать следующее:

// Create a canvas element
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 400;

// Get the drawing context
var ctx = canvas.getContext('2d');

// Then you can do stuff, e.g.:
ctx.fillStyle = '#f00';
ctx.fillRect(20,10,80,50);

Как только вы используете холст, вы, конечно, можете добавить его в документ

var element = document.getElementById('canvas_container');
element.appendChild(canvas);

Или вы можете сделать из него изображение:

var new_image_url = canvas.toDataURL();
var img = document.createElement('img');
img.src = new_image_url;

Или вы можете получить доступ к данным холста в виде значений с помощью:

var image_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
var rgba_byte_array = image_data.data;
rgba_byte_array[0];  // red value for first pixel (top left) in the canvas

Answer 2

Интересно, что если вы создаете объект холста и сохраняете его контекст в переменной, эта переменная имеет собственный указатель на объект холста. Поскольку вы не можете использовать getContext ("2d") без холста, у вас может быть только один указатель холста. Если вы похожи на меня и ненавидите иметь две ссылки на один и тот же объект, вы можете сделать это:

Оригинал:

var canvas=document.createElement("canvas");
var context=canvas.getContext("2d");

alert(Boolean(context.canvas==canvas));// true.

О чем я говорю:

var context=document.createElement("canvas").getContext("2d");

alert(context.canvas);// The canvas object.

Теперь вы можете делать все свои важные вещи с помощью переменной контекста. В конце концов, к контексту обращаются чаще, чем к переменной canvas. Когда вам это нужно, просто обратитесь к нему через контекст:

context.canvas.width=320;
context.canvas.height=320;
document.body.appendChild(context.canvas);

И если вы не хотите беспокоиться о канве, просто оставьте переменную в покое, вы все равно не захотите ее использовать.

Answer 3

Как насчет: OffscreenCanvas ()?

И ответ, вероятно, нет, поскольку в настоящее время это поддерживается только в Firefox 44.0+.

var offscreen = new OffscreenCanvas(256, 256);

https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

https://html.spec.whatwg.org/multipage/scripting.html#the-offscreencanvas-interface

(добавлено для справки, поскольку это может быть новым для спецификации, поскольку этот вопрос задавался более 6 лет назад! И, надеюсь, будет более широко распространен)