How to use multiple canvas contexts?

1 Answers

You cannot use multiple contexts for one canvas element. In WebKit, this is explicitly mentioned in the source:

// A Canvas can either be "2D" or "webgl" but never both.

If you do request another context, you get null:

    if ((type == "webkit-3d") ||
        (type == "experimental-webgl")) {
        if (m_context && !m_context->is3d())
            return 0;

(So if you request a 3D context when you already have another context, you get null.)

What you probably want is two canvas elements - one for 3D stuff and the other one for 2D stuff. If you place them over each other, they act as two layers, and you can draw on each canvas independently.


I would like to use experimental-webgl, and the 2d canvas context also. After I've drawn the 3d objects, I want to draw some 2d objects over it.

How should I do it?

threejs canvas todataurl is blank

This is because the first example (see sources line 103) does use a THREE.WebGLRenderer creator, while the second one (see sources line 92) uses a THREE.CanvasRenderer.

Some notes :