How to use multiple canvas contexts?

javascript html5-canvas webgl
Danny Fox picture Danny Fox · Dec 11, 2011 · Viewed 11k times · Source

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

bennedich picture bennedich · Dec 11, 2011

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

Related questions

Three.js detect webgl support and fallback to regular canvas

Can anyone who has used three.js tell me if its possible to detect webgl support, and, if not present, fallback to a standard Canvas render?

Read More
canvas.toDataURL() returns a black image

We are developing a sample three.js application which shows a thumbnail. For any scene that we create, we require to take a screenshot of the canvas, for this purpose, we are using canvas.toDataURL("image/png"). For repeated invocations …

Read More
Saving canvas to image via canvas.toDataURL results in black rectangle

Im using Pixi.js and trying to save a frame of the animation to an image. canvas.toDataUrl should work, but all i get is a black rectangle. See live example here the code I use to extract the image …

Read More