Cambia contesto canvas

Question

Supponendo di avere una tela WebGL (chiamando getContext ("experimental-webgl")).

C'è un modo per cambiare contesto successivamente per usare uno "2d"?

L'obiettivo di tale operazione sarebbe quello di visualizzare un debug simile a BSOD quando si verifica un errore durante il rendering.

Se non è possibile, allora:

• Posso incorporare un elemento HTML su una tela, e la forza di questo elemento per avere esattamente la stessa stessa che la tela (anche se quest'ultimo viene ridimensionato)?
• Posso sostituire un nodo dom e aggiornare ogni riferimento a quello vecchio per riflettere la modifica?

[modifica] Questo è il mio attuale codice di chiamata minimo. Canvas è un nodo DOM contenente una tela che viene riempita dall'API WebGL e callback è una funzione che elabora un singolo frame.

function failure(cvs, e) { 
    var ctx = cvs.getContext('2d'); // Fail here, returns `null' if cvs.getContext('webgl') has been called 
    ctx.fillStyle = 'rgb(0, 0, 0)'; 
    ctx.fillRect(0, 0, cvs.width, cvs.height); 
    ctx.fillStyle = 'rgb(255, 255, 255)'; 
    ctx.font = 'bold 12px sans-serif'; 
    ctx.fillText(e.toString(), 0, 0); 
} 

function foobar(canvas, callback) { 
    try { 
     callback(); 
    } catch (e) { 
     failure(canvas, e); 
     throw e; 
    } finally { 
     requestAnimationFrame(arguments.callee); 
    } 
} 

Answer 1

La risposta breve è praticamente no, secondo le specifiche.

Ogni tela ha un cosiddetto contesto primario. Questo è il primo contesto che viene invocato su una tela. Creare un contesto non primario su una tela potrebbe fare qualcosa su browser diversi, ma non lo farei mai, mai e poi mai.

Avrei invece una seconda tela sovrapposta alla prima e con gli stessi attributi di larghezza e altezza. Vorrei quindi nasconderne uno e mostrare l'altro (o semplicemente mostrare quello 2D quando lo vuoi vedere).

OPPURE semplicemente utilizzare un PNG per semplicità., Centrato all'interno di un DIV che contiene anche la tela. In altre parole:

Div container has black background and holds: 
    -PNG (centered) 
    -3D Canvas 

Poi, quando si desidera che l'errore png da visualizzare basta nascondere la tela 3D (e facoltativamente visualizzarla PNG)

Answer 2

Piuttosto che hanno due tele sovrapposte, la soluzione sono andato con doveva sostituire la tela esistente con un clone di se stesso.

var newCvs = cvs.cloneNode(false); 
cvs.parentNode.replaceChild(newCvs, cvs); 
cvs = newCvs; 

Tutte le proprietà della tela originale verranno mantenuti ma il contesto saranno liberati fino a destinare come si desidera.