Crear contexto 2d * sin * canvas

Question

Actualmente estoy buscando una manera de crear un contexto de representación 2D de canvas sin tener realmente un elemento canvas en la página. Pude crear dinámicamente un elemento canvas y ocultarlo, pero no quiero mostrar la imagen directamente al usuario en cualquier momento, por lo que no tiene sentido tener un elemento canvas en la página. Así que estoy básicamente en busca de algo que es similar a

var image = new Image(); 

pero sólo por contexto de representación 2D de la lona (pseudo código)

var context = new 2dContext(); 

¿Existe la funcionalidad de esta manera? No pude encontrar nada parecido. Llamando

var context = new CanvasRenderingContext2D(); 

que es el nombre de la interfaz contexto de representación de especificación HTML5 sólo me da errores torpes en 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

Es posible utilizar un lienzo sin mostrarlo en la página. Se podría hacer lo siguiente:

// 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); 

vez que haya utilizado el lienzo, se puede, por supuesto, añadirlo al documento

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

O usted podría hacer una imagen de ella:

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

O puede acceder a los datos de la lona como valores con:

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

Curiosamente, si crea un objeto canvas y almacena su contexto en una variable, esa variable tiene su propio puntero al objeto canvas. Como no puede usar getContext ("2d") sin un lienzo, también podría tener un solo puntero de lienzo. Si eres como yo y odio tener unos dos referencias al mismo objeto, se puede hacer esto:

original:

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

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

Lo que estoy hablando:

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

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

Ahora puede hacer todas sus cosas importantes de lienzo a través de la variable de contexto. Después de todo, se accede al contexto con más frecuencia que la variable canvas. Cuando lo necesita simplemente hacer referencia a ella a través del contexto:

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

Y si usted no quiere preocuparse por el lienzo acaba de salir de la variable por sí solo, no es como si quisiera utilizar de todos modos.

Answer 3

¿Qué te parece: OffscreenCanvas()?

Y la respuesta es probablemente no, ya que esto solo es compatible con Firefox 44.0+ actualmente.

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

(añadido como referencia aquí, ya que esto puede ser nuevo para la especificación ya que esta pregunta se hizo hace más de 6 años! Y espero que será más ampliamente adoptado)