Canvas 3D drawing using both 2D and 3D context

Question

Since the webgl/opengl doesn\'t support text drawing, so it possible to draw 3D object using 3D context and text drawing using 2D context ?

Answer 1

What I've been doing, whether I just need troubleshooting feedback or 2D text content on a 3D canvas, is just use CSS to put some HTML elements on top of the canvas.

You can make a canvas and a group of text fields share the same space, and ensure that the text fields are on top as follows:

HTML:

  
  

    Mouse Coordinates
      

        X
        
      
      

        Y
        
      
  

CSS:

canvas {
    margin: 0px;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
}

#container {
  position: relative;
}

#controlsContainer {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
}

  #controlsContainer div {
    padding-left: 8px;
  }

  #controlsContainer label {
    color: white;
    z-index: 4;
  }

  #controlsContainer span {
    color: white;
    z-index: 4;
  }

The z-index will ensure which elements are in front, and position: relative for the container and position: absolute, in coordination with the top and left for the controls will ensure that they share the same space.

I have been having very good luck with this, and the troubleshooting feedback is invaluable.

An example of the Javascript (ES6 in this case) is:

let xPos = document.getElementById("xPos");
let yPos = document.getElementById("yPos");
let x = event.clientX - containerDiv.offsetLeft -parseInt(window.getComputedStyle(pageBody).getPropertyValue("margin-left"));
let y = event.clientY - containerDiv.offsetTop - parseInt(window.getComputedStyle(pageBody).getPropertyValue("margin-top"));
xPos.innerText = x;
yPos.innerText = y;

which I've placed in a mousemove handler.