How to use multiple canvas contexts?

Question

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?

Answer 1

You need a separate canvas. You can put the other canvas over the first one, this is not considered bad practice.

Answer 2

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.