Canvas-Größe und WebGL

Dieses WebGL-Beispiel untersucht die Auswirkungen darauf, ob die Canvas-Größe auf ihre Elementgröße in CSS-Pixeln eingestellt ist oder nicht, so wie sie im Browserfenster erscheint.

Auswirkung der Canvas-Größe auf das Rendering mit WebGL

Mit scissor() und clear() können wir demonstrieren, wie der WebGL-Zeichnungsbuffer von der Größe der Canvas beeinflusst wird.

Die Größe der ersten Canvas wird auf die gestylte Größe des Elements festgelegt, die durch CSS bestimmt wird. Dies erfolgt, indem die width- und height-Eigenschaften der Canvas auf die Werte der clientWidth- und clientHeight-Eigenschaften gesetzt werden.

Im Gegensatz dazu wird für die zweite Canvas keine solche Zuweisung vorgenommen. Die internen width- und height-Eigenschaften der Canvas bleiben auf den Standardwerten, die sich von der tatsächlichen Größe des Canvas-Elements im Browserfenster unterscheiden.

Der Effekt ist deutlich sichtbar, wenn man scissor() und clear() verwendet, um ein Quadrat in der Mitte der Canvas zu zeichnen, indem man seine Position und Größe in Pixeln angibt. In der ersten Canvas erhalten wir das gewünschte Ergebnis. In der zweiten hat das Quadrat die falsche Form, Größe und Position.

html

<p>Compare the two canvases.</p>
<canvas>Your browser does not seem to support HTML canvas.</canvas>
<canvas>Your browser does not seem to support HTML canvas.</canvas>

css

body {
  text-align: center;
}
canvas {
  display: inline-block;
  width: 120px;
  height: 80px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}

window.addEventListener(
  "load",
  () => {
    const [firstCanvas, secondCanvas] = document.getElementsByTagName("canvas");
    firstCanvas.width = firstCanvas.clientWidth;
    firstCanvas.height = firstCanvas.clientHeight;
    [firstCanvas, secondCanvas].forEach((canvas) => {
      const gl =
        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
      if (!gl) {
        document.querySelector("p").textContent =
          "Failed. Your browser or device may not support WebGL.";
        return;
      }
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
      gl.enable(gl.SCISSOR_TEST);
      gl.scissor(30, 10, 60, 60);
      gl.clearColor(1.0, 1.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
    });
  },
  false,
);

Der Quellcode dieses Beispiels ist auch auf GitHub verfügbar.