WebGL 画布上下文的像素坐标不同于 2d 上下文画布

Question

我有两幅画布。一个是2d，另一个是webgl。然而，给他们相同的定位坐标，他们的内容位于不同的地方。即使一个画布的内容应该在另一个画布之上。

如果我这样做：gl.scissor(150, 500, 100, 90); 那么它们会相互重叠，但是当我给它们相同的坐标时，它们位于相同的位置，我怎么能做到这一点。

这是小提琴： https://jsfiddle.net/1L6qdhta/

这是代码：

#canvas1,
#canvas2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  border: 1px solid black;
  text-align: center;
  font-weight: bold;
}

#canvas-wrapper {
  Width: 100%;
  Height: 80vh;
}

<div id="canvas-wrapper">
  <canvas id="canvas1" height="720" width="1280"></canvas>
  <canvas id="canvas2" height="720" width="1280"></canvas>
</div>

const canvas1 = document.querySelector("#canvas1");
const gl = canvas1.getContext("webgl");

gl.enable(gl.SCISSOR_TEST);
gl.scissor(150, 150, 100, 90);
gl.clearColor(0, 0.25, 0, 0.25);
gl.clear(gl.COLOR_BUFFER_BIT);

const canvas2 = document.querySelector("#canvas2");
const ctx = canvas2.getContext("2d");
ctx.fillStyle = "rgba(255,0,255,0.25)";
ctx.font = "55px san-serif";
ctx.textAlign = "center";
ctx.fillText("layer 3", 150, 150);