Créer un 2d context * sans * canvas

Question

Je suis actuellement à la recherche d'un moyen de créer un contexte de rendu 2D de canvas sans avoir d'élément canvas sur la page. Je pourrais créer dynamiquement un élément de canevas et le cacher, mais là encore je ne veux pas montrer l'image directement à l'utilisateur à tout moment, donc il ne sert à rien d'avoir un élément canvas dans la page. Je cherche donc basiquement quelque chose qui ressemble à

var image = new Image(); 

mais seulement pour toile 2d contexte de rendu (pseudo code)

var context = new 2dContext(); 

Y at-il des fonctionnalités comme ça? Je n'ai pas pu trouver quelque chose comme ça. Appel

var context = new CanvasRenderingContext2D(); 

qui est le nom de l'interface contexte de rendu par les spécifications HTML5 me donne juste des erreurs embarrassantes dans 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

Il est possible d'utiliser une toile sans l'afficher sur la page. Vous pouvez effectuer les opérations suivantes:

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

Une fois que vous avez utilisé la toile, vous pouvez bien sûr ajouter au document

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

Ou vous pourriez faire une image de celui-ci:

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

Ou vous pouvez accéder aux données de toile comme valeurs avec:

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

Fait intéressant, si vous créez un objet canvas et stockez son contexte dans une variable, cette variable a son propre pointeur sur l'objet canvas. Puisque vous ne pouvez pas utiliser getContext ("2d") sans un canevas, il se peut que vous n'ayez qu'un seul pointeur de canevas. Si vous êtes comme moi et déteste avoir un deux références au même objet, vous pouvez le faire:

Original:

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

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

Ce que je parle:

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

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

maintenant vous pouvez faire tous vos trucs de toile importants à travers la variable de contexte. Après tout, le contexte est consulté plus souvent que la variable de canevas. Lorsque vous avez besoin d'y faire référence simplement par le contexte:

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

Et si vous ne voulez pas vous embêter avec la toile il suffit de laisser la seule variable, il est comme vous vouliez ne pas utiliser de toute façon.

Answer 3

Que diriez-vous de: OffscreenCanvas()?

Et la réponse est probablement non, puisque cela est seulement pris en charge dans Firefox 44.0+ actuellement.

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

(Ajout référence ici, car cela pourrait bien être de nouveau à la spécification puisque cette question a été posée il y a plus de 6 ans! Et je l'espère sera plus largement adopté