21

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?

2 Answers 2

18

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

1
  • 1
    It might still be relevant to know that some browsers don't implement the compositing of the WebGL canvas and surrounding elements in a very efficient way (i.e. taking the image from OpenGL and then compositing on the CPU, then sending it back out to the GPU), and depending on how complicated the 2D stuff is that you're trying to do (i.e. just drawing some bitmaps for the GUI), it might be worth considering doing that through the WebGL canvas as well. Drawing 2D stuff in WebGL should simply be a matter of setting up the right transformations and perhaps disabling depth-testing
    – aphax
    Mar 6, 2012 at 12:14
16

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.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.