Geek Answers Handbook

Switch canvas context

Assuming I have a WebGL canvas (getContext ("experimental-webgl") called).

Is there a way to switch context later to use "2d"?

The goal of such a thing would be to display a debug BSOD-like if an error occurred during rendering.

If this is not possible, then:

  • Can I insert an html element on top of the canvas and make this element have the same thing as the canvas (even if this last size is resized)?
  • Is it possible to replace the dom node and update each link to the old one to reflect the change?

[edit] This is my current minimum code. Canvas is a DOM node containing a canvas that is populated with the WebGL API, and a callback is a function that processes a single 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);
    }
}
+5
2

, .

. , . , .

, . ( , ).

PNG , DIV, . :

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

, , png, (, , PNG)

+4

, , , , , .

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

, , .

+1

More articles:


All Articles