diff --git a/webgl/frustum-diagram.html b/webgl/frustum-diagram.html
index ff78ede81..2bf0a28f4 100644
--- a/webgl/frustum-diagram.html
+++ b/webgl/frustum-diagram.html
@@ -104,7 +104,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/lessons/fr/webgl-fundamentals.md b/webgl/lessons/fr/webgl-fundamentals.md
index ef7c13cef..25c06b5eb 100644
--- a/webgl/lessons/fr/webgl-fundamentals.md
+++ b/webgl/lessons/fr/webgl-fundamentals.md
@@ -18,7 +18,7 @@ Dans l'espace de projection, les coordonnées vont toujours de -1 à +1 quelle q
Voici un simple exemple pour illustrer un code WebGL dans sa forme la plus simple.
// Création du contexte WebGL
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
// Création d'un programme
diff --git a/webgl/lessons/ja/webgl-fundamentals.md b/webgl/lessons/ja/webgl-fundamentals.md
index f2f79afb4..5a594e1e2 100644
--- a/webgl/lessons/ja/webgl-fundamentals.md
+++ b/webgl/lessons/ja/webgl-fundamentals.md
@@ -131,7 +131,7 @@ WebGLでは、色は０〜１で指定する。
それをJavaScriptで調べられる
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
それで`WebGLRenderingContext`を作成出来る
@@ -198,8 +198,8 @@ GLSLのstringをする方法はいくつかある。文字列の連結とか、A
出来たら、その関数でシェーダー２つを作成出来る
- var vertexShaderSource = document.getElementById("2d-vertex-shader").text;
- var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;
+ var vertexShaderSource = document.querySelector("#2d-vertex-shader").text;
+ var fragmentShaderSource = document.querySelector("#2d-fragment-shader").text;
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
diff --git a/webgl/lessons/ja/webgl-resizing-the-canvas.md b/webgl/lessons/ja/webgl-resizing-the-canvas.md
index 56aacdccf..7fbea7512 100644
--- a/webgl/lessons/ja/webgl-resizing-the-canvas.md
+++ b/webgl/lessons/ja/webgl-resizing-the-canvas.md
@@ -20,7 +20,7 @@ canvasの「**描画バッファーのサイズ**」を設定する方法は２
JavaScript側は、
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
canvas.width = 400;
canvas.height = 300;
diff --git a/webgl/lessons/ko/webgl-fundamentals.md b/webgl/lessons/ko/webgl-fundamentals.md
index 94770d9ad..5afbc3147 100755
--- a/webgl/lessons/ko/webgl-fundamentals.md
+++ b/webgl/lessons/ko/webgl-fundamentals.md
@@ -129,7 +129,7 @@ WebGL에서 색상은 0에서 1까지 사용합니다.
그러면 JavaScript에서 찾을 수 있습니다.
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
이제 WebGLRenderingContext을 만들 수 있습니다.
@@ -192,8 +192,8 @@ JavaScript에서 문자열을 만드는 방법으로 GLSL 문자열을 만들
이제 우리는 두 Shader를 만드는 함수를 호출할 수 있습니다.
- var vertexShaderSource = document.getElementById("2d-vertex-shader").text;
- var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;
+ var vertexShaderSource = document.querySelector("#2d-vertex-shader").text;
+ var fragmentShaderSource = document.querySelector("#2d-fragment-shader").text;
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
diff --git a/webgl/lessons/ko/webgl-resizing-the-canvas.md b/webgl/lessons/ko/webgl-resizing-the-canvas.md
index c2e9ddc9f..371e72e48 100755
--- a/webgl/lessons/ko/webgl-resizing-the-canvas.md
+++ b/webgl/lessons/ko/webgl-resizing-the-canvas.md
@@ -22,7 +22,7 @@ CSS는 canvas가 표시되는 크기를 결정합니다.
JavaScript
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
canvas.width = 400;
canvas.height = 300;
diff --git a/webgl/lessons/pl/webgl-2d-vs-3d-library.md b/webgl/lessons/pl/webgl-2d-vs-3d-library.md
index df7a8cf10..71c073220 100644
--- a/webgl/lessons/pl/webgl-2d-vs-3d-library.md
+++ b/webgl/lessons/pl/webgl-2d-vs-3d-library.md
@@ -37,7 +37,7 @@ Poniżej jest kod realizujący opisane zadanie z użyciem three.js.
// Skonfiguruj WebGL.
- var c = document.getElementById("c");
+ var c = document.querySelector("#c");
renderer = new THREE.WebGLRenderer();
renderer.setSize(c.clientWidth, c.clientHeight);
c.appendChild(renderer.domElement);
diff --git a/webgl/lessons/pl/webgl-fundamentals.md b/webgl/lessons/pl/webgl-fundamentals.md
index 37d15fa76..850182fd1 100644
--- a/webgl/lessons/pl/webgl-fundamentals.md
+++ b/webgl/lessons/pl/webgl-fundamentals.md
@@ -19,7 +19,7 @@ Współrzędne przestrzeni obcinania zawsze przebiegają przedział od -1 do 1 b
jest Twoje płótno. Poniżej jest prosty przykład pokazujący WebGL w jego najprostszej formie.
// Pobierz kontekst WebGL
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("experimental-webgl");
// skonfiguruj program GLSL
diff --git a/webgl/lessons/pt-br/webgl-text-canvas2d.md b/webgl/lessons/pt-br/webgl-text-canvas2d.md
index 47a9f9fbf..2413087d8 100644
--- a/webgl/lessons/pt-br/webgl-text-canvas2d.md
+++ b/webgl/lessons/pt-br/webgl-text-canvas2d.md
@@ -30,7 +30,7 @@ Em seguida, configure o CSS para que a tela e o HTML se sobrepnham
Agora procure a tela de texto no tempo de inicialização e crie um contexto 2D para isso.
// look up the text canvas.
- var textCanvas = document.getElementById("text");
+ var textCanvas = document.querySelector("#text");
// make a 2D context for it
var ctx = textCanvas.getContext("2d");
diff --git a/webgl/lessons/resources/2d-scene-graph-diagram.js b/webgl/lessons/resources/2d-scene-graph-diagram.js
index aaf144a47..4cee43b22 100644
--- a/webgl/lessons/resources/2d-scene-graph-diagram.js
+++ b/webgl/lessons/resources/2d-scene-graph-diagram.js
@@ -21,7 +21,7 @@ const darkMatcher = window.matchMedia("(prefers-color-scheme: dark)");
let colors;
function renderSceneGraph(root) {
- const canvas = document.getElementById("c");
+ const canvas = document.querySelector("#c");
const ctx = wrapCanvasRenderingContext2D(canvas.getContext("2d"));
var g_update = true;
diff --git a/webgl/lessons/resources/3d-in-canvas.html b/webgl/lessons/resources/3d-in-canvas.html
index 1a615d287..38ac42051 100644
--- a/webgl/lessons/resources/3d-in-canvas.html
+++ b/webgl/lessons/resources/3d-in-canvas.html
@@ -52,7 +52,7 @@ 3D in canvas
3, 7,
];
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
var ctx = canvas.getContext("2d");
var then = 0;
diff --git a/webgl/lessons/resources/3d-in-webgl.html b/webgl/lessons/resources/3d-in-webgl.html
index 8d020e85d..ee36af65b 100644
--- a/webgl/lessons/resources/3d-in-webgl.html
+++ b/webgl/lessons/resources/3d-in-webgl.html
@@ -66,7 +66,7 @@ 3D in WebGL
3, 7,
];
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/lessons/resources/camera-move-camera.html b/webgl/lessons/resources/camera-move-camera.html
index fda95189e..faa476101 100644
--- a/webgl/lessons/resources/camera-move-camera.html
+++ b/webgl/lessons/resources/camera-move-camera.html
@@ -37,7 +37,7 @@ Moving the Camera
"use strict";
function main() {
- var movieElem = document.getElementById('movie');
+ var movieElem = document.querySelector('#movie');
var areaWidth = movieElem.clientWidth;
var areaHeight = movieElem.clientHeight;
diff --git a/webgl/lessons/resources/cross-product-diagram.html b/webgl/lessons/resources/cross-product-diagram.html
index 31ecb38ea..5da9bec0c 100644
--- a/webgl/lessons/resources/cross-product-diagram.html
+++ b/webgl/lessons/resources/cross-product-diagram.html
@@ -494,7 +494,7 @@
var app;
function main() {
- canvas = document.getElementById("canvas");
+ canvas = document.querySelector("#canvas");
var gl = twgl.getWebGLContext(canvas, {alpha: true, preMultipliedAlpha: false});
if (!gl) {
diff --git a/webgl/lessons/resources/cube-normals.html b/webgl/lessons/resources/cube-normals.html
index 64b3cc27e..13de80013 100644
--- a/webgl/lessons/resources/cube-normals.html
+++ b/webgl/lessons/resources/cube-normals.html
@@ -371,7 +371,7 @@
var app;
function main() {
- canvas = document.getElementById("canvas");
+ canvas = document.querySelector("#canvas");
var gl = twgl.getWebGLContext(canvas, {alpha: true, preMultipliedAlpha: false});
if (!gl) {
diff --git a/webgl/lessons/resources/directional-lighting.html b/webgl/lessons/resources/directional-lighting.html
index 65aee8a7f..de2bf6c6e 100644
--- a/webgl/lessons/resources/directional-lighting.html
+++ b/webgl/lessons/resources/directional-lighting.html
@@ -62,7 +62,7 @@
const darkMatcher = window.matchMedia("(prefers-color-scheme: dark)");
darkMatcher.addEventListener('change', render);
- var ctx = document.getElementById("canvas").getContext("2d");
+ var ctx = document.querySelector("#canvas").getContext("2d");
var direction = 0;
function radToDeg(rad) {
diff --git a/webgl/lessons/resources/dot-product.html b/webgl/lessons/resources/dot-product.html
index 1ea8340ef..8d9425656 100644
--- a/webgl/lessons/resources/dot-product.html
+++ b/webgl/lessons/resources/dot-product.html
@@ -739,7 +739,7 @@
var app;
function main() {
- canvas = document.getElementById("canvas");
+ canvas = document.querySelector("#canvas");
var gl = twgl.getWebGLContext(canvas, {alpha: true, preMultipliedAlpha: false});
if (!gl) {
diff --git a/webgl/lessons/resources/environment-mapping.html b/webgl/lessons/resources/environment-mapping.html
index 71f8ee701..6608bdeb2 100644
--- a/webgl/lessons/resources/environment-mapping.html
+++ b/webgl/lessons/resources/environment-mapping.html
@@ -40,7 +40,7 @@
dot: opt.dot || "dot(eyeToSurfaceDir,surfaceNormal)",
surfaceNormal: opt.surfaceNormal || "surface normal",
};
- var ctx = document.getElementById("canvas").getContext("2d");
+ var ctx = document.querySelector("#canvas").getContext("2d");
var direction = 0;
var surfaceWidth = 200;
diff --git a/webgl/lessons/resources/fragment-shader-anim.html b/webgl/lessons/resources/fragment-shader-anim.html
index 9450218cd..e3cb1d842 100644
--- a/webgl/lessons/resources/fragment-shader-anim.html
+++ b/webgl/lessons/resources/fragment-shader-anim.html
@@ -56,7 +56,7 @@
function main() {
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var ctx = get2DContext(canvas);
ctx.lineWidth = 1;
var pixelSize = 6;
diff --git a/webgl/lessons/resources/matrix-space-change.html b/webgl/lessons/resources/matrix-space-change.html
index 7448911c6..58f5ab6e5 100644
--- a/webgl/lessons/resources/matrix-space-change.html
+++ b/webgl/lessons/resources/matrix-space-change.html
@@ -31,7 +31,7 @@
function main() {
const opt = getQueryParams();
- const ctx = document.getElementById("canvas").getContext("2d");
+ const ctx = document.querySelector("#canvas").getContext("2d");
const fpoints = [
// left column
diff --git a/webgl/lessons/resources/moon-orbit.html b/webgl/lessons/resources/moon-orbit.html
index d3f886906..c02510b7b 100644
--- a/webgl/lessons/resources/moon-orbit.html
+++ b/webgl/lessons/resources/moon-orbit.html
@@ -83,9 +83,9 @@
],
};
- const canvas = document.getElementById('c');
+ const canvas = document.querySelector('#c');
const ctx = wrapCanvasRenderingContext2D(canvas.getContext('2d'));
- const orbitCtx = document.getElementById('orbit').getContext('2d');
+ const orbitCtx = document.querySelector('#orbit').getContext('2d');
let colors;
const spread = 16;
diff --git a/webgl/lessons/resources/normals-scaled.html b/webgl/lessons/resources/normals-scaled.html
index 5ec6f0eeb..1d5667c33 100644
--- a/webgl/lessons/resources/normals-scaled.html
+++ b/webgl/lessons/resources/normals-scaled.html
@@ -464,7 +464,7 @@
var app;
function main() {
- canvas = document.getElementById("canvas");
+ canvas = document.querySelector("#canvas");
var gl = twgl.getWebGLContext(canvas, {alpha: true, preMultipliedAlpha: false});
if (!gl) {
diff --git a/webgl/lessons/resources/normals.html b/webgl/lessons/resources/normals.html
index 3c91dd9f8..1e107d61b 100644
--- a/webgl/lessons/resources/normals.html
+++ b/webgl/lessons/resources/normals.html
@@ -347,7 +347,7 @@
var app;
function main() {
- canvas = document.getElementById("canvas");
+ canvas = document.querySelector("#canvas");
var gl = twgl.getWebGLContext(canvas, {alpha: true, preMultipliedAlpha: false});
if (!gl) {
diff --git a/webgl/lessons/resources/point-lighting.html b/webgl/lessons/resources/point-lighting.html
index 6dcacb49b..33f1ae741 100644
--- a/webgl/lessons/resources/point-lighting.html
+++ b/webgl/lessons/resources/point-lighting.html
@@ -48,7 +48,7 @@
dot: opt.dot || "dot(surfaceToLight,surfaceNormal)",
surfaceNormal: opt.surfaceNormal || "surface normal",
};
- var ctx = document.getElementById("canvas").getContext("2d");
+ var ctx = document.querySelector("#canvas").getContext("2d");
var direction = 0;
function radToDeg(rad) {
diff --git a/webgl/lessons/resources/power-graph.html b/webgl/lessons/resources/power-graph.html
index ac309c583..1fe128cff 100644
--- a/webgl/lessons/resources/power-graph.html
+++ b/webgl/lessons/resources/power-graph.html
@@ -43,7 +43,7 @@
"use strict";
function main() {
- var ctx = document.getElementById("canvas").getContext("2d");
+ var ctx = document.querySelector("#canvas").getContext("2d");
var power = 1;
webglLessonsUI.setupSlider("#power", {value: power, step: 0.01, precision: 2, slide: updatePower, min: 0, max: 10 });
diff --git a/webgl/lessons/resources/specular-lighting.html b/webgl/lessons/resources/specular-lighting.html
index 1469cff09..44d7a834e 100644
--- a/webgl/lessons/resources/specular-lighting.html
+++ b/webgl/lessons/resources/specular-lighting.html
@@ -52,7 +52,7 @@
surface2Light: opt.surface2Light || "surface2light",
halfVector: opt.halfVector || "halfVector",
};
- var ctx = document.getElementById("canvas").getContext("2d");
+ var ctx = document.querySelector("#canvas").getContext("2d");
var surfaceAngle = 0;
function radToDeg(rad) {
diff --git a/webgl/lessons/resources/spot-lighting.html b/webgl/lessons/resources/spot-lighting.html
index 475f74efa..51aae114a 100644
--- a/webgl/lessons/resources/spot-lighting.html
+++ b/webgl/lessons/resources/spot-lighting.html
@@ -50,7 +50,7 @@
dot: opt.dot || "dot(surfaceToLight,surfaceNormal)",
surfaceNormal: opt.surfaceNormal || "surface normal",
};
- var ctx = document.getElementById("canvas").getContext("2d");
+ var ctx = document.querySelector("#canvas").getContext("2d");
var rotation = 0;
var direction = degToRad(20);
var limit = degToRad(20);
diff --git a/webgl/lessons/resources/spot-sphere.html b/webgl/lessons/resources/spot-sphere.html
index 2361e3433..9c84c45ea 100644
--- a/webgl/lessons/resources/spot-sphere.html
+++ b/webgl/lessons/resources/spot-sphere.html
@@ -838,7 +838,7 @@
var app;
function main() {
- canvas = document.getElementById("canvas");
+ canvas = document.querySelector("#canvas");
var gl = twgl.getWebGLContext(canvas, {alpha: true, preMultipliedAlpha: false});
if (!gl) {
diff --git a/webgl/lessons/resources/surface-reflection.html b/webgl/lessons/resources/surface-reflection.html
index 01a82f8a3..e460fee93 100644
--- a/webgl/lessons/resources/surface-reflection.html
+++ b/webgl/lessons/resources/surface-reflection.html
@@ -47,7 +47,7 @@
const lang = {
reflection: opt.reflection || "reflection",
};
- var ctx = document.getElementById("canvas").getContext("2d");
+ var ctx = document.querySelector("#canvas").getContext("2d");
var surfaceAngle = 0;
function radToDeg(rad) {
diff --git a/webgl/lessons/resources/webgl-preservedrawingbuffer-true.html b/webgl/lessons/resources/webgl-preservedrawingbuffer-true.html
index 9d1f4fb78..c0e5c2432 100644
--- a/webgl/lessons/resources/webgl-preservedrawingbuffer-true.html
+++ b/webgl/lessons/resources/webgl-preservedrawingbuffer-true.html
@@ -114,7 +114,7 @@
3, 7,
];
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
var gl = canvas.getContext("webgl", {preserveDrawingBuffer: true});
var clock = 0;
diff --git a/webgl/lessons/ru/webgl-2d-vs-3d-library.md b/webgl/lessons/ru/webgl-2d-vs-3d-library.md
index 6fc2b1973..edcbf975d 100644
--- a/webgl/lessons/ru/webgl-2d-vs-3d-library.md
+++ b/webgl/lessons/ru/webgl-2d-vs-3d-library.md
@@ -37,7 +37,7 @@ TOC: WebGL - 2D и 3D библиотеки
// настраиваем WebGL
- var c = document.getElementById("c");
+ var c = document.querySelector("#c");
renderer = new THREE.WebGLRenderer();
renderer.setSize(c.clientWidth, c.clientHeight);
c.appendChild(renderer.domElement);
diff --git a/webgl/lessons/ru/webgl-fundamentals.md b/webgl/lessons/ru/webgl-fundamentals.md
index bfe4b4b9e..61bdb61d7 100644
--- a/webgl/lessons/ru/webgl-fundamentals.md
+++ b/webgl/lessons/ru/webgl-fundamentals.md
@@ -133,7 +133,7 @@ WebGL затем может растеризовать различные при
Далее получаем ссылку на него из JavaScript
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
Теперь мы можем получить объект WebGLRenderingContext - контекст отрисовки WebGL
@@ -198,8 +198,8 @@ WebGL затем может растеризовать различные при
Теперь создадим 2 шейдера с помощью этой функции
- var vertexShaderSource = document.getElementById("2d-vertex-shader").text;
- var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;
+ var vertexShaderSource = document.querySelector("#2d-vertex-shader").text;
+ var fragmentShaderSource = document.querySelector("#2d-fragment-shader").text;
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
diff --git a/webgl/lessons/ru/webgl-resizing-the-canvas.md b/webgl/lessons/ru/webgl-resizing-the-canvas.md
index da01c987f..5a74e6a2c 100644
--- a/webgl/lessons/ru/webgl-resizing-the-canvas.md
+++ b/webgl/lessons/ru/webgl-resizing-the-canvas.md
@@ -19,7 +19,7 @@ TOC: Изменение размера Canvas в WebGL
JavaScript
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
canvas.width = 400;
canvas.height = 300;
diff --git a/webgl/lessons/ru/webgl-text-canvas2d.md b/webgl/lessons/ru/webgl-text-canvas2d.md
index e6ff2b7cb..014859931 100644
--- a/webgl/lessons/ru/webgl-text-canvas2d.md
+++ b/webgl/lessons/ru/webgl-text-canvas2d.md
@@ -36,7 +36,7 @@ TOC: WebGL текст - Canvas 2D
При инициализации получим ссылку на canvas с текстом и создадим контекст 2D.
// получаем ссылку на canvas с текстом
- var textCanvas = document.getElementById("text");
+ var textCanvas = document.querySelector("#text");
// создаём контекст 2D
var ctx = textCanvas.getContext("2d");
diff --git a/webgl/lessons/ru/webgl-text-html.md b/webgl/lessons/ru/webgl-text-html.md
index bad904661..a3405586f 100644
--- a/webgl/lessons/ru/webgl-text-html.md
+++ b/webgl/lessons/ru/webgl-text-html.md
@@ -44,8 +44,8 @@ CSS, чтобы текст расположился сверху.
чтобы в дальнейшем мы могли их менять.
// получаем ссылки на элементы DOM
- var timeElement = document.getElementById("time");
- var angleElement = document.getElementById("angle");
+ var timeElement = document.querySelector("#time");
+ var angleElement = document.querySelector("#angle");
// создаём текстовые узлы, чтобы сэкономить немного браузерного времени
var timeNode = document.createTextNode("");
@@ -151,7 +151,7 @@ WebGL работает в браузере. Не забывайте исполь
Нам осталось получить ссылку на divcontainer, создать div и добавить его.
// получаем ссылку на divcontainer
- var divContainerElement = document.getElementById("divcontainer");
+ var divContainerElement = document.querySelector("#divcontainer");
// создаём div
var div = document.createElement("div");
diff --git a/webgl/lessons/webgl-2d-vs-3d-library.md b/webgl/lessons/webgl-2d-vs-3d-library.md
index 949e5961d..d19625ed9 100644
--- a/webgl/lessons/webgl-2d-vs-3d-library.md
+++ b/webgl/lessons/webgl-2d-vs-3d-library.md
@@ -37,7 +37,7 @@ Here's the code in three.js to display this
// Setup WebGL.
- var c = document.getElementById("c");
+ var c = document.querySelector("#c");
renderer = new THREE.WebGLRenderer();
renderer.setSize(c.clientWidth, c.clientHeight);
c.appendChild(renderer.domElement);
diff --git a/webgl/lessons/webgl-fundamentals.md b/webgl/lessons/webgl-fundamentals.md
index e401aa0e9..b6b6da59b 100644
--- a/webgl/lessons/webgl-fundamentals.md
+++ b/webgl/lessons/webgl-fundamentals.md
@@ -139,7 +139,7 @@ First we need an HTML canvas element
Then in JavaScript we can look that up
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
Now we can create a WebGLRenderingContext
@@ -204,8 +204,8 @@ what is happening.
We can now call that function to create the 2 shaders
- var vertexShaderSource = document.getElementById("2d-vertex-shader").text;
- var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;
+ var vertexShaderSource = document.querySelector("#2d-vertex-shader").text;
+ var fragmentShaderSource = document.querySelector("#2d-fragment-shader").text;
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
diff --git a/webgl/lessons/webgl-instanced-drawing.md b/webgl/lessons/webgl-instanced-drawing.md
index d1885e72b..5c110e2bc 100644
--- a/webgl/lessons/webgl-instanced-drawing.md
+++ b/webgl/lessons/webgl-instanced-drawing.md
@@ -188,7 +188,7 @@ optional feature of WebGL. It's called
[`ANGLE_instanced_arrays`](https://developer.mozilla.org/en-US/docs/Web/API/ANGLE_instanced_arrays).
```js
-const canvas = document.getElementById('canvas');
+const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/lessons/webgl-resizing-the-canvas.md b/webgl/lessons/webgl-resizing-the-canvas.md
index ea4081c43..f0b188448 100644
--- a/webgl/lessons/webgl-resizing-the-canvas.md
+++ b/webgl/lessons/webgl-resizing-the-canvas.md
@@ -19,7 +19,7 @@ The other using JavaScript
JavaScript
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
canvas.width = 400;
canvas.height = 300;
diff --git a/webgl/lessons/webgl-shadows.md b/webgl/lessons/webgl-shadows.md
index 3406cf3a6..00438f083 100644
--- a/webgl/lessons/webgl-shadows.md
+++ b/webgl/lessons/webgl-shadows.md
@@ -89,7 +89,7 @@ and enable the extension is:
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/lessons/webgl-text-canvas2d.md b/webgl/lessons/webgl-text-canvas2d.md
index fcb5fa55f..d483010cd 100644
--- a/webgl/lessons/webgl-text-canvas2d.md
+++ b/webgl/lessons/webgl-text-canvas2d.md
@@ -37,7 +37,7 @@ Next setup the CSS so the the canvas and the HTML overlap
Now look up the text canvas at init time and create a 2D context for it.
// look up the text canvas.
- var textCanvas = document.getElementById("text");
+ var textCanvas = document.querySelector("#text");
// make a 2D context for it
var ctx = textCanvas.getContext("2d");
diff --git a/webgl/lessons/webgl-text-html.md b/webgl/lessons/webgl-text-html.md
index db917fed6..d60a3cbf7 100644
--- a/webgl/lessons/webgl-text-html.md
+++ b/webgl/lessons/webgl-text-html.md
@@ -45,8 +45,8 @@ Now look up those elements at init time and create or lookup the areas you want
change.
// look up the elements we want to affect
- var timeElement = document.getElementById("time");
- var angleElement = document.getElementById("angle");
+ var timeElement = document.querySelector("#time");
+ var angleElement = document.querySelector("#angle");
// Create text nodes to save some time for the browser.
var timeNode = document.createTextNode("");
@@ -150,7 +150,7 @@ Finally `.floating-div` will be used for the positionable div we create.
So now we need to look up the divcontainer, create a div and append it.
// look up the divcontainer
- var divContainerElement = document.getElementById("divcontainer");
+ var divContainerElement = document.querySelector("#divcontainer");
// make the div
var div = document.createElement("div");
diff --git a/webgl/lessons/webgl-tips.md b/webgl/lessons/webgl-tips.md
index 504a88246..30ce25507 100644
--- a/webgl/lessons/webgl-tips.md
+++ b/webgl/lessons/webgl-tips.md
@@ -197,7 +197,7 @@ clearing the canvas.
Taking the last example from [the article on animation](webgl-animation.html)
```js
-var canvas = document.getElementById("canvas");
+var canvas = document.querySelector("#canvas");
-var gl = canvas.getContext("webgl");
+var gl = canvas.getContext("webgl", {preserveDrawingBuffer: true});
```
diff --git a/webgl/lessons/zh_cn/webgl-2d-vs-3d-library.md b/webgl/lessons/zh_cn/webgl-2d-vs-3d-library.md
index 317c219b7..73db2f28d 100644
--- a/webgl/lessons/zh_cn/webgl-2d-vs-3d-library.md
+++ b/webgl/lessons/zh_cn/webgl-2d-vs-3d-library.md
@@ -28,7 +28,7 @@ C++ 称为一个“文字处理器”。同样的WebGL本身并不能绘制出
// 设置 WebGL.
- var c = document.getElementById("c");
+ var c = document.querySelector("#c");
renderer = new THREE.WebGLRenderer();
renderer.setSize(c.clientWidth, c.clientHeight);
c.appendChild(renderer.domElement);
diff --git a/webgl/lessons/zh_cn/webgl-fundamentals.md b/webgl/lessons/zh_cn/webgl-fundamentals.md
index 22be419b1..db8d99a74 100644
--- a/webgl/lessons/zh_cn/webgl-fundamentals.md
+++ b/webgl/lessons/zh_cn/webgl-fundamentals.md
@@ -120,7 +120,7 @@ WebGL只关心两件事：裁剪空间中的坐标值和颜色值。使用WebGL
然后可以用JavaScript获取它
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
现在我们创建一个WebGL渲染上下文（WebGLRenderingContext）
@@ -183,8 +183,8 @@ WebGL只关心两件事：裁剪空间中的坐标值和颜色值。使用WebGL
现在我们可以使用以上方法创建两个着色器
- var vertexShaderSource = document.getElementById("2d-vertex-shader").text;
- var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;
+ var vertexShaderSource = document.querySelector("#2d-vertex-shader").text;
+ var fragmentShaderSource = document.querySelector("#2d-fragment-shader").text;
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
diff --git a/webgl/lessons/zh_cn/webgl-instanced-drawing.md b/webgl/lessons/zh_cn/webgl-instanced-drawing.md
index 77cca30fa..85af62f8d 100644
--- a/webgl/lessons/zh_cn/webgl-instanced-drawing.md
+++ b/webgl/lessons/zh_cn/webgl-instanced-drawing.md
@@ -175,7 +175,7 @@ Let's do it!
[`ANGLE_instanced_arrays`](https://developer.mozilla.org/en-US/docs/Web/API/ANGLE_instanced_arrays)。
```js
-const canvas = document.getElementById('canvas');
+const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/lessons/zh_cn/webgl-resizing-the-canvas.md b/webgl/lessons/zh_cn/webgl-resizing-the-canvas.md
index 6e2ea8724..72d91391d 100644
--- a/webgl/lessons/zh_cn/webgl-resizing-the-canvas.md
+++ b/webgl/lessons/zh_cn/webgl-resizing-the-canvas.md
@@ -19,7 +19,7 @@ CSS决定画布显示的尺寸。
JavaScript
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
canvas.width = 400;
canvas.height = 300;
diff --git a/webgl/lessons/zh_cn/webgl-text-canvas2d.md b/webgl/lessons/zh_cn/webgl-text-canvas2d.md
index 86a23b917..e5b2bb390 100644
--- a/webgl/lessons/zh_cn/webgl-text-canvas2d.md
+++ b/webgl/lessons/zh_cn/webgl-text-canvas2d.md
@@ -32,7 +32,7 @@ TOC: WebGL 文字 - 二维Canvas
在初始化时找到文字画布并创建一个二维上下文。
// 找到画布
- var textCanvas = document.getElementById("text");
+ var textCanvas = document.querySelector("#text");
// 创建一个二维上下文
var ctx = textCanvas.getContext("2d");
diff --git a/webgl/lessons/zh_cn/webgl-text-html.md b/webgl/lessons/zh_cn/webgl-text-html.md
index c881ddc7a..83b75a29a 100644
--- a/webgl/lessons/zh_cn/webgl-text-html.md
+++ b/webgl/lessons/zh_cn/webgl-text-html.md
@@ -38,8 +38,8 @@ TOC: WebGL 文字 - HTML
在初始化时找到这些元素并设置需要的属性。
// 找到需要用到的元素
- var timeElement = document.getElementById("time");
- var angleElement = document.getElementById("angle");
+ var timeElement = document.querySelector("#time");
+ var angleElement = document.querySelector("#angle");
// 创建文字节点为浏览器节省一些时间
var timeNode = document.createTextNode("");
@@ -132,7 +132,7 @@ TOC: WebGL 文字 - HTML
所以现在需要找到divcontainer，创建 div 然后加在里面。
// 找到 divcontainer
- var divContainerElement = document.getElementById("divcontainer");
+ var divContainerElement = document.querySelector("#divcontainer");
// 创建 div
var div = document.createElement("div");
diff --git a/webgl/resources/same-code-02.js b/webgl/resources/same-code-02.js
index c9aa1b4d9..bda94b097 100644
--- a/webgl/resources/same-code-02.js
+++ b/webgl/resources/same-code-02.js
@@ -76,7 +76,7 @@ function main() {
// we have a canvas on the page. Or else we have container and we
// insert a canvas inside that container.
// If we don't find a container we use the body of the document.
- var container = document.getElementById("canvas") || document.body;
+ var container = document.querySelector("#canvas") || document.body;
var isCanvas = (container instanceof HTMLCanvasElement);
var canvas = isCanvas ? container : document.createElement("canvas");
var gl = canvas.getContext("webgl", { alpha: false });
diff --git a/webgl/resources/same-code.js b/webgl/resources/same-code.js
index 078e69035..45d9b2dc9 100644
--- a/webgl/resources/same-code.js
+++ b/webgl/resources/same-code.js
@@ -109,7 +109,7 @@ function main() {
// we have a canvas on the page. Or else we have container and we
// insert a canvas inside that container.
// If we don't find a container we use the body of the document.
- var container = document.getElementById("canvas") || document.body;
+ var container = document.querySelector("#canvas") || document.body;
var isCanvas = (container instanceof HTMLCanvasElement);
var canvas = isCanvas ? container : document.createElement("canvas");
var gl = canvas.getContext("webgl");
diff --git a/webgl/resources/tdl/io.js b/webgl/resources/tdl/io.js
index c173c65d2..54c81400f 100644
--- a/webgl/resources/tdl/io.js
+++ b/webgl/resources/tdl/io.js
@@ -74,7 +74,7 @@ tdl.io.createLoadInfo = function(opt_request) {
* function statusUpdate() {
* if (g_loadInfo) {
* var progress = g_loadInfo.getKnownProgressInfoSoFar();
- * document.getElementById('loadstatus').innerHTML = progress.percent;
+ * document.querySelector('#loadstatus').innerHTML = progress.percent;
* }
* }
*
diff --git a/webgl/webgl-10x15-canvas-400x300-css.html b/webgl/webgl-10x15-canvas-400x300-css.html
index 5f47c02b3..de54e9e13 100644
--- a/webgl/webgl-10x15-canvas-400x300-css.html
+++ b/webgl/webgl-10x15-canvas-400x300-css.html
@@ -49,7 +49,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2-textures.html b/webgl/webgl-2-textures.html
index d2b744d4a..13c7736f1 100644
--- a/webgl/webgl-2-textures.html
+++ b/webgl/webgl-2-textures.html
@@ -101,7 +101,7 @@
function render(images) {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-drawimage-01.html b/webgl/webgl-2d-drawimage-01.html
index 5c655c8f7..1d9614024 100644
--- a/webgl/webgl-2d-drawimage-01.html
+++ b/webgl/webgl-2d-drawimage-01.html
@@ -50,7 +50,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-drawimage-02.html b/webgl/webgl-2d-drawimage-02.html
index 0da119fcf..949f84ac0 100644
--- a/webgl/webgl-2d-drawimage-02.html
+++ b/webgl/webgl-2d-drawimage-02.html
@@ -50,7 +50,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-drawimage-03.html b/webgl/webgl-2d-drawimage-03.html
index 2540355aa..5e4fb040d 100644
--- a/webgl/webgl-2d-drawimage-03.html
+++ b/webgl/webgl-2d-drawimage-03.html
@@ -51,7 +51,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-drawimage-04.html b/webgl/webgl-2d-drawimage-04.html
index 6dcfbad73..0c0c63a86 100644
--- a/webgl/webgl-2d-drawimage-04.html
+++ b/webgl/webgl-2d-drawimage-04.html
@@ -51,7 +51,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-drawimage-05.html b/webgl/webgl-2d-drawimage-05.html
index 83ed9d190..5d16b6796 100644
--- a/webgl/webgl-2d-drawimage-05.html
+++ b/webgl/webgl-2d-drawimage-05.html
@@ -51,7 +51,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-drawimage-06.html b/webgl/webgl-2d-drawimage-06.html
index a69311120..5cfbe86a3 100644
--- a/webgl/webgl-2d-drawimage-06.html
+++ b/webgl/webgl-2d-drawimage-06.html
@@ -57,7 +57,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-drawimage-07.html b/webgl/webgl-2d-drawimage-07.html
index da13e8adb..7e7ea62bb 100644
--- a/webgl/webgl-2d-drawimage-07.html
+++ b/webgl/webgl-2d-drawimage-07.html
@@ -58,7 +58,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-drawimage-08.html b/webgl/webgl-2d-drawimage-08.html
index 816d8a6b5..f584cce57 100644
--- a/webgl/webgl-2d-drawimage-08.html
+++ b/webgl/webgl-2d-drawimage-08.html
@@ -57,7 +57,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-geometry-matrix-transform-center-f.html b/webgl/webgl-2d-geometry-matrix-transform-center-f.html
index 921a8ef08..bbafdb2a1 100644
--- a/webgl/webgl-2d-geometry-matrix-transform-center-f.html
+++ b/webgl/webgl-2d-geometry-matrix-transform-center-f.html
@@ -70,7 +70,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-geometry-matrix-transform-hierarchical.html b/webgl/webgl-2d-geometry-matrix-transform-hierarchical.html
index ac84aac96..9e78a3b60 100644
--- a/webgl/webgl-2d-geometry-matrix-transform-hierarchical.html
+++ b/webgl/webgl-2d-geometry-matrix-transform-hierarchical.html
@@ -70,7 +70,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-geometry-matrix-transform-simpler-functions.html b/webgl/webgl-2d-geometry-matrix-transform-simpler-functions.html
index d26ba35f7..8051875a3 100644
--- a/webgl/webgl-2d-geometry-matrix-transform-simpler-functions.html
+++ b/webgl/webgl-2d-geometry-matrix-transform-simpler-functions.html
@@ -58,7 +58,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-geometry-matrix-transform-trs.html b/webgl/webgl-2d-geometry-matrix-transform-trs.html
index 60a1f33e6..d63540977 100644
--- a/webgl/webgl-2d-geometry-matrix-transform-trs.html
+++ b/webgl/webgl-2d-geometry-matrix-transform-trs.html
@@ -70,7 +70,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-geometry-matrix-transform-with-projection.html b/webgl/webgl-2d-geometry-matrix-transform-with-projection.html
index dacada974..c4273ecb9 100644
--- a/webgl/webgl-2d-geometry-matrix-transform-with-projection.html
+++ b/webgl/webgl-2d-geometry-matrix-transform-with-projection.html
@@ -58,7 +58,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-geometry-matrix-transform.html b/webgl/webgl-2d-geometry-matrix-transform.html
index 93dd43244..d7f65dc6d 100644
--- a/webgl/webgl-2d-geometry-matrix-transform.html
+++ b/webgl/webgl-2d-geometry-matrix-transform.html
@@ -70,7 +70,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-geometry-rotation-angle.html b/webgl/webgl-2d-geometry-rotation-angle.html
index f43d499dd..927e1dd83 100644
--- a/webgl/webgl-2d-geometry-rotation-angle.html
+++ b/webgl/webgl-2d-geometry-rotation-angle.html
@@ -74,7 +74,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-geometry-rotation.html b/webgl/webgl-2d-geometry-rotation.html
index 4aa9e7ec7..25a9a4422 100644
--- a/webgl/webgl-2d-geometry-rotation.html
+++ b/webgl/webgl-2d-geometry-rotation.html
@@ -42,7 +42,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-geometry-scale.html b/webgl/webgl-2d-geometry-scale.html
index fad37164b..929598e8e 100644
--- a/webgl/webgl-2d-geometry-scale.html
+++ b/webgl/webgl-2d-geometry-scale.html
@@ -80,7 +80,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-geometry-translate-better.html b/webgl/webgl-2d-geometry-translate-better.html
index fbe2b1bf9..c5acead0a 100644
--- a/webgl/webgl-2d-geometry-translate-better.html
+++ b/webgl/webgl-2d-geometry-translate-better.html
@@ -72,7 +72,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-geometry-translate.html b/webgl/webgl-2d-geometry-translate.html
index 00f7e0ede..14d7140d2 100644
--- a/webgl/webgl-2d-geometry-translate.html
+++ b/webgl/webgl-2d-geometry-translate.html
@@ -77,7 +77,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-image-3x3-convolution.html b/webgl/webgl-2d-image-3x3-convolution.html
index 62768fc72..36ecc7621 100644
--- a/webgl/webgl-2d-image-3x3-convolution.html
+++ b/webgl/webgl-2d-image-3x3-convolution.html
@@ -90,7 +90,7 @@
function render(image) {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
@@ -247,7 +247,7 @@
var initialSelection = 'edgeDetect2';
// Setup UI to pick kernels.
- var ui = document.getElementById("ui");
+ var ui = document.querySelector("#ui");
var select = document.createElement("select");
for (var name in kernels) {
var option = document.createElement("option");
diff --git a/webgl/webgl-2d-image-blend.html b/webgl/webgl-2d-image-blend.html
index 5dad1b6d7..5e83b137b 100644
--- a/webgl/webgl-2d-image-blend.html
+++ b/webgl/webgl-2d-image-blend.html
@@ -85,7 +85,7 @@
function render(image) {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-image-processing.html b/webgl/webgl-2d-image-processing.html
index 07158f433..fc78fc446 100644
--- a/webgl/webgl-2d-image-processing.html
+++ b/webgl/webgl-2d-image-processing.html
@@ -118,7 +118,7 @@
function render(image) {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
@@ -321,7 +321,7 @@
];
// Setup a ui.
- var ui = document.getElementById("ui");
+ var ui = document.querySelector("#ui");
var table = document.createElement("table");
var tbody = document.createElement("tbody");
for (var ii = 0; ii < effects.length; ++ii) {
diff --git a/webgl/webgl-2d-image-red2blue.html b/webgl/webgl-2d-image-red2blue.html
index 3ec12e53c..e8ea4763d 100644
--- a/webgl/webgl-2d-image-red2blue.html
+++ b/webgl/webgl-2d-image-red2blue.html
@@ -72,7 +72,7 @@
function render(image) {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-image.html b/webgl/webgl-2d-image.html
index fd0a0a0e3..8c26e57d7 100644
--- a/webgl/webgl-2d-image.html
+++ b/webgl/webgl-2d-image.html
@@ -72,7 +72,7 @@
function render(image) {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-matrixstack-01.html b/webgl/webgl-2d-matrixstack-01.html
index cf7e0e6f9..f15941f43 100644
--- a/webgl/webgl-2d-matrixstack-01.html
+++ b/webgl/webgl-2d-matrixstack-01.html
@@ -51,7 +51,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-matrixstack-02.html b/webgl/webgl-2d-matrixstack-02.html
index efa858cf3..0549d2fb1 100644
--- a/webgl/webgl-2d-matrixstack-02.html
+++ b/webgl/webgl-2d-matrixstack-02.html
@@ -51,7 +51,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-matrixstack-03.html b/webgl/webgl-2d-matrixstack-03.html
index 6ae3aef12..64d50c9c2 100644
--- a/webgl/webgl-2d-matrixstack-03.html
+++ b/webgl/webgl-2d-matrixstack-03.html
@@ -51,7 +51,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-rectangle-top-left.html b/webgl/webgl-2d-rectangle-top-left.html
index 6d4e6fab8..f5e95fc3b 100644
--- a/webgl/webgl-2d-rectangle-top-left.html
+++ b/webgl/webgl-2d-rectangle-top-left.html
@@ -50,7 +50,7 @@
function main() {
// Get A WebGL context
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-rectangle-translate.html b/webgl/webgl-2d-rectangle-translate.html
index ccd53ca4b..553ab8e95 100644
--- a/webgl/webgl-2d-rectangle-translate.html
+++ b/webgl/webgl-2d-rectangle-translate.html
@@ -68,7 +68,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-rectangle-with-2-byte-colors.html b/webgl/webgl-2d-rectangle-with-2-byte-colors.html
index a8c3fe029..9cc47ed18 100644
--- a/webgl/webgl-2d-rectangle-with-2-byte-colors.html
+++ b/webgl/webgl-2d-rectangle-with-2-byte-colors.html
@@ -65,7 +65,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-rectangle-with-2-colors.html b/webgl/webgl-2d-rectangle-with-2-colors.html
index 4d2c59a48..4f9f57c2d 100644
--- a/webgl/webgl-2d-rectangle-with-2-colors.html
+++ b/webgl/webgl-2d-rectangle-with-2-colors.html
@@ -65,7 +65,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-rectangle-with-random-colors.html b/webgl/webgl-2d-rectangle-with-random-colors.html
index dea1e4022..6ef488932 100644
--- a/webgl/webgl-2d-rectangle-with-random-colors.html
+++ b/webgl/webgl-2d-rectangle-with-random-colors.html
@@ -65,7 +65,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-rectangle.html b/webgl/webgl-2d-rectangle.html
index c28970c36..98a54f089 100644
--- a/webgl/webgl-2d-rectangle.html
+++ b/webgl/webgl-2d-rectangle.html
@@ -50,7 +50,7 @@
function main() {
// Get A WebGL context
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-rectangles-indexed.html b/webgl/webgl-2d-rectangles-indexed.html
index 7d05d5d97..4eb910cd3 100644
--- a/webgl/webgl-2d-rectangles-indexed.html
+++ b/webgl/webgl-2d-rectangles-indexed.html
@@ -53,7 +53,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-rectangles.html b/webgl/webgl-2d-rectangles.html
index d4911c688..b3a1275d4 100644
--- a/webgl/webgl-2d-rectangles.html
+++ b/webgl/webgl-2d-rectangles.html
@@ -53,7 +53,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-2d-triangle-with-position-for-color.html b/webgl/webgl-2d-triangle-with-position-for-color.html
index b440b8e8e..bdef12e78 100644
--- a/webgl/webgl-2d-triangle-with-position-for-color.html
+++ b/webgl/webgl-2d-triangle-with-position-for-color.html
@@ -66,7 +66,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-camera-look-at-heads.html b/webgl/webgl-3d-camera-look-at-heads.html
index a2542690d..7197349a4 100644
--- a/webgl/webgl-3d-camera-look-at-heads.html
+++ b/webgl/webgl-3d-camera-look-at-heads.html
@@ -63,7 +63,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-camera-look-at.html b/webgl/webgl-3d-camera-look-at.html
index 9209c4bc7..6dff98f5f 100644
--- a/webgl/webgl-3d-camera-look-at.html
+++ b/webgl/webgl-3d-camera-look-at.html
@@ -61,7 +61,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-camera.html b/webgl/webgl-3d-camera.html
index 4d1866685..f26596c46 100644
--- a/webgl/webgl-3d-camera.html
+++ b/webgl/webgl-3d-camera.html
@@ -61,7 +61,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-fog-depth-based-gl_FragCoord.html b/webgl/webgl-3d-fog-depth-based-gl_FragCoord.html
index 4e0701f36..114667ed7 100644
--- a/webgl/webgl-3d-fog-depth-based-gl_FragCoord.html
+++ b/webgl/webgl-3d-fog-depth-based-gl_FragCoord.html
@@ -68,7 +68,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-fog-depth-based-issue.html b/webgl/webgl-3d-fog-depth-based-issue.html
index 7dd72d6d4..35177936f 100644
--- a/webgl/webgl-3d-fog-depth-based-issue.html
+++ b/webgl/webgl-3d-fog-depth-based-issue.html
@@ -76,7 +76,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-fog-depth-based.html b/webgl/webgl-3d-fog-depth-based.html
index adee34bed..f4e56bf55 100644
--- a/webgl/webgl-3d-fog-depth-based.html
+++ b/webgl/webgl-3d-fog-depth-based.html
@@ -76,7 +76,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-fog-distance-based.html b/webgl/webgl-3d-fog-distance-based.html
index cb6d51837..fd2d3281b 100644
--- a/webgl/webgl-3d-fog-distance-based.html
+++ b/webgl/webgl-3d-fog-distance-based.html
@@ -74,7 +74,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-fog-distance-exp2.html b/webgl/webgl-3d-fog-distance-exp2.html
index b90351944..7b68bcea4 100644
--- a/webgl/webgl-3d-fog-distance-exp2.html
+++ b/webgl/webgl-3d-fog-distance-exp2.html
@@ -76,7 +76,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-fog-just-mix.html b/webgl/webgl-3d-fog-just-mix.html
index 1daf36ccb..190df090c 100644
--- a/webgl/webgl-3d-fog-just-mix.html
+++ b/webgl/webgl-3d-fog-just-mix.html
@@ -67,7 +67,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-lighting-directional-world.html b/webgl/webgl-3d-lighting-directional-world.html
index b7f78167b..7a8fda1a9 100644
--- a/webgl/webgl-3d-lighting-directional-world.html
+++ b/webgl/webgl-3d-lighting-directional-world.html
@@ -77,7 +77,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-lighting-directional-worldinversetranspose.html b/webgl/webgl-3d-lighting-directional-worldinversetranspose.html
index 3fadbe758..d665c791f 100644
--- a/webgl/webgl-3d-lighting-directional-worldinversetranspose.html
+++ b/webgl/webgl-3d-lighting-directional-worldinversetranspose.html
@@ -77,7 +77,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-lighting-directional.html b/webgl/webgl-3d-lighting-directional.html
index 2212237df..480c9143a 100644
--- a/webgl/webgl-3d-lighting-directional.html
+++ b/webgl/webgl-3d-lighting-directional.html
@@ -76,7 +76,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-lighting-point-color.html b/webgl/webgl-3d-lighting-point-color.html
index 078063da6..f07f63bef 100644
--- a/webgl/webgl-3d-lighting-point-color.html
+++ b/webgl/webgl-3d-lighting-point-color.html
@@ -111,7 +111,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-lighting-point-specular-power.html b/webgl/webgl-3d-lighting-point-specular-power.html
index 9db2b656a..9b7407d6f 100644
--- a/webgl/webgl-3d-lighting-point-specular-power.html
+++ b/webgl/webgl-3d-lighting-point-specular-power.html
@@ -109,7 +109,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-lighting-point-specular.html b/webgl/webgl-3d-lighting-point-specular.html
index 6af9caf29..4459a63ed 100644
--- a/webgl/webgl-3d-lighting-point-specular.html
+++ b/webgl/webgl-3d-lighting-point-specular.html
@@ -104,7 +104,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-lighting-point.html b/webgl/webgl-3d-lighting-point.html
index 170951355..8bdae2ed7 100644
--- a/webgl/webgl-3d-lighting-point.html
+++ b/webgl/webgl-3d-lighting-point.html
@@ -91,7 +91,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-lighting-spot-falloff-using-smoothstep.html b/webgl/webgl-3d-lighting-spot-falloff-using-smoothstep.html
index bdf2a5a32..0335aa210 100644
--- a/webgl/webgl-3d-lighting-spot-falloff-using-smoothstep.html
+++ b/webgl/webgl-3d-lighting-spot-falloff-using-smoothstep.html
@@ -115,7 +115,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-lighting-spot-falloff.html b/webgl/webgl-3d-lighting-spot-falloff.html
index 0692b136f..3b0d57b08 100644
--- a/webgl/webgl-3d-lighting-spot-falloff.html
+++ b/webgl/webgl-3d-lighting-spot-falloff.html
@@ -116,7 +116,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-lighting-spot-using-step.html b/webgl/webgl-3d-lighting-spot-using-step.html
index d577656f4..f7519aae1 100644
--- a/webgl/webgl-3d-lighting-spot-using-step.html
+++ b/webgl/webgl-3d-lighting-spot-using-step.html
@@ -113,7 +113,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-lighting-spot.html b/webgl/webgl-3d-lighting-spot.html
index 29b50bf7c..a3bec1a54 100644
--- a/webgl/webgl-3d-lighting-spot.html
+++ b/webgl/webgl-3d-lighting-spot.html
@@ -118,7 +118,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-perspective-matrix.html b/webgl/webgl-3d-perspective-matrix.html
index e958cc399..9da017ad3 100644
--- a/webgl/webgl-3d-perspective-matrix.html
+++ b/webgl/webgl-3d-perspective-matrix.html
@@ -67,7 +67,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-perspective-w-matrix.html b/webgl/webgl-3d-perspective-w-matrix.html
index 9a7f8a08c..948ac64a1 100644
--- a/webgl/webgl-3d-perspective-w-matrix.html
+++ b/webgl/webgl-3d-perspective-w-matrix.html
@@ -67,7 +67,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-perspective-w.html b/webgl/webgl-3d-perspective-w.html
index d53a4641e..8f082bb33 100644
--- a/webgl/webgl-3d-perspective-w.html
+++ b/webgl/webgl-3d-perspective-w.html
@@ -74,7 +74,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-perspective.html b/webgl/webgl-3d-perspective.html
index af41e0f8b..e869b7770 100644
--- a/webgl/webgl-3d-perspective.html
+++ b/webgl/webgl-3d-perspective.html
@@ -74,7 +74,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-step1.html b/webgl/webgl-3d-step1.html
index 202315973..470e85ffc 100644
--- a/webgl/webgl-3d-step1.html
+++ b/webgl/webgl-3d-step1.html
@@ -62,7 +62,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-step2.html b/webgl/webgl-3d-step2.html
index e18a7548c..b78db082b 100644
--- a/webgl/webgl-3d-step2.html
+++ b/webgl/webgl-3d-step2.html
@@ -62,7 +62,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-step3.html b/webgl/webgl-3d-step3.html
index cf9748d84..0fdf4d34a 100644
--- a/webgl/webgl-3d-step3.html
+++ b/webgl/webgl-3d-step3.html
@@ -69,7 +69,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-step4.html b/webgl/webgl-3d-step4.html
index 6d0d87b00..2d94e37ec 100644
--- a/webgl/webgl-3d-step4.html
+++ b/webgl/webgl-3d-step4.html
@@ -69,7 +69,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-step5.html b/webgl/webgl-3d-step5.html
index c0ae9c07a..6ad5ba195 100644
--- a/webgl/webgl-3d-step5.html
+++ b/webgl/webgl-3d-step5.html
@@ -69,7 +69,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-step6.html b/webgl/webgl-3d-step6.html
index 82ff7257f..8993e3ed3 100644
--- a/webgl/webgl-3d-step6.html
+++ b/webgl/webgl-3d-step6.html
@@ -69,7 +69,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-textures-bad-npot.html b/webgl/webgl-3d-textures-bad-npot.html
index e90834b98..98e227a9a 100644
--- a/webgl/webgl-3d-textures-bad-npot.html
+++ b/webgl/webgl-3d-textures-bad-npot.html
@@ -60,7 +60,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-textures-good-npot.html b/webgl/webgl-3d-textures-good-npot.html
index a3f493d25..acca0d557 100644
--- a/webgl/webgl-3d-textures-good-npot.html
+++ b/webgl/webgl-3d-textures-good-npot.html
@@ -59,7 +59,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-textures-mips-tri-linear.html b/webgl/webgl-3d-textures-mips-tri-linear.html
index 05cca9e88..0f1639be9 100644
--- a/webgl/webgl-3d-textures-mips-tri-linear.html
+++ b/webgl/webgl-3d-textures-mips-tri-linear.html
@@ -83,7 +83,7 @@
function main() {
// Get A WebGL context
- var canvas = document.getElementById("canvas", {antialias: false});
+ var canvas = document.querySelector("#canvas", {antialias: false});
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-textures-mips.html b/webgl/webgl-3d-textures-mips.html
index b74ee3c68..e776f4429 100644
--- a/webgl/webgl-3d-textures-mips.html
+++ b/webgl/webgl-3d-textures-mips.html
@@ -58,7 +58,7 @@
function main() {
// Get A WebGL context
- var canvas = document.getElementById("canvas", {antialias: false});
+ var canvas = document.querySelector("#canvas", {antialias: false});
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-textures-repeat-clamp.html b/webgl/webgl-3d-textures-repeat-clamp.html
index 10f3a1f44..06a25f79d 100644
--- a/webgl/webgl-3d-textures-repeat-clamp.html
+++ b/webgl/webgl-3d-textures-repeat-clamp.html
@@ -167,7 +167,7 @@
function main() {
// Get A WebGL context
- var canvas = document.getElementById("canvas", {antialias: false});
+ var canvas = document.querySelector("#canvas", {antialias: false});
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-textures-texture-atlas.html b/webgl/webgl-3d-textures-texture-atlas.html
index e87c25291..1d9f9f760 100644
--- a/webgl/webgl-3d-textures-texture-atlas.html
+++ b/webgl/webgl-3d-textures-texture-atlas.html
@@ -59,7 +59,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-textures-texture-coords-mapped.html b/webgl/webgl-3d-textures-texture-coords-mapped.html
index f5357de10..8fe4049de 100644
--- a/webgl/webgl-3d-textures-texture-coords-mapped.html
+++ b/webgl/webgl-3d-textures-texture-coords-mapped.html
@@ -59,7 +59,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-3d-textures.html b/webgl/webgl-3d-textures.html
index 19df50429..40ef59e1f 100644
--- a/webgl/webgl-3d-textures.html
+++ b/webgl/webgl-3d-textures.html
@@ -59,7 +59,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-animation-frame-rate-issues.html b/webgl/webgl-animation-frame-rate-issues.html
index bd36f1c6d..855a37e0e 100644
--- a/webgl/webgl-animation-frame-rate-issues.html
+++ b/webgl/webgl-animation-frame-rate-issues.html
@@ -60,7 +60,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-animation-not-frame-rate-independent.html b/webgl/webgl-animation-not-frame-rate-independent.html
index c0ae43e2e..cfe33b69b 100644
--- a/webgl/webgl-animation-not-frame-rate-independent.html
+++ b/webgl/webgl-animation-not-frame-rate-independent.html
@@ -56,7 +56,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-animation.html b/webgl/webgl-animation.html
index 5c0cc8337..c156feded 100644
--- a/webgl/webgl-animation.html
+++ b/webgl/webgl-animation.html
@@ -56,7 +56,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-attributes-2-shaders-same-data.html b/webgl/webgl-attributes-2-shaders-same-data.html
index 863b3cf4b..269d59477 100644
--- a/webgl/webgl-attributes-2-shaders-same-data.html
+++ b/webgl/webgl-attributes-2-shaders-same-data.html
@@ -75,7 +75,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-canvas-clientwidth-clientheight.html b/webgl/webgl-canvas-clientwidth-clientheight.html
index 5f6c8ff02..abb3f23ab 100644
--- a/webgl/webgl-canvas-clientwidth-clientheight.html
+++ b/webgl/webgl-canvas-clientwidth-clientheight.html
@@ -77,7 +77,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-canvas-width-height.html b/webgl/webgl-canvas-width-height.html
index 6f2a60dc7..75f85976a 100644
--- a/webgl/webgl-canvas-width-height.html
+++ b/webgl/webgl-canvas-width-height.html
@@ -76,7 +76,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-clipspace-rectangles-with-varying-non-1-w-repeat.html b/webgl/webgl-clipspace-rectangles-with-varying-non-1-w-repeat.html
index 44ec7083c..2952c3932 100644
--- a/webgl/webgl-clipspace-rectangles-with-varying-non-1-w-repeat.html
+++ b/webgl/webgl-clipspace-rectangles-with-varying-non-1-w-repeat.html
@@ -50,7 +50,7 @@
function main() {
// Get A WebGL context
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-clipspace-rectangles-with-varying-non-1-w.html b/webgl/webgl-clipspace-rectangles-with-varying-non-1-w.html
index 9601474e2..5efb7259f 100644
--- a/webgl/webgl-clipspace-rectangles-with-varying-non-1-w.html
+++ b/webgl/webgl-clipspace-rectangles-with-varying-non-1-w.html
@@ -50,7 +50,7 @@
function main() {
// Get A WebGL context
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-clipspace-rectangles-with-varying.html b/webgl/webgl-clipspace-rectangles-with-varying.html
index e1bb44846..06c040962 100644
--- a/webgl/webgl-clipspace-rectangles-with-varying.html
+++ b/webgl/webgl-clipspace-rectangles-with-varying.html
@@ -50,7 +50,7 @@
function main() {
// Get A WebGL context
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-clipspace-rectangles.html b/webgl/webgl-clipspace-rectangles.html
index 34528117a..b9d047d76 100644
--- a/webgl/webgl-clipspace-rectangles.html
+++ b/webgl/webgl-clipspace-rectangles.html
@@ -52,7 +52,7 @@
function main() {
// Get A WebGL context
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-cors-permission-bad.html b/webgl/webgl-cors-permission-bad.html
index 5d934ef0d..78b1fd20b 100644
--- a/webgl/webgl-cors-permission-bad.html
+++ b/webgl/webgl-cors-permission-bad.html
@@ -50,7 +50,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-cors-permission-good.html b/webgl/webgl-cors-permission-good.html
index 540d5da9d..faa5598a7 100644
--- a/webgl/webgl-cors-permission-good.html
+++ b/webgl/webgl-cors-permission-good.html
@@ -50,7 +50,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-cubemap-environment-map.html b/webgl/webgl-cubemap-environment-map.html
index 85b140bfc..337b2bd5c 100644
--- a/webgl/webgl-cubemap-environment-map.html
+++ b/webgl/webgl-cubemap-environment-map.html
@@ -73,7 +73,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-cubemap.html b/webgl/webgl-cubemap.html
index 51a0f0b28..3c2559608 100644
--- a/webgl/webgl-cubemap.html
+++ b/webgl/webgl-cubemap.html
@@ -60,7 +60,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-data-texture-3x2-bad.html b/webgl/webgl-data-texture-3x2-bad.html
index e41cba095..4a0740076 100644
--- a/webgl/webgl-data-texture-3x2-bad.html
+++ b/webgl/webgl-data-texture-3x2-bad.html
@@ -59,7 +59,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-data-texture-3x2.html b/webgl/webgl-data-texture-3x2.html
index 0a34078ca..adbd9aa35 100644
--- a/webgl/webgl-data-texture-3x2.html
+++ b/webgl/webgl-data-texture-3x2.html
@@ -59,7 +59,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-environment-map-sphere.html b/webgl/webgl-environment-map-sphere.html
index eee38fe76..16fbf7626 100644
--- a/webgl/webgl-environment-map-sphere.html
+++ b/webgl/webgl-environment-map-sphere.html
@@ -73,7 +73,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-environment-map.html b/webgl/webgl-environment-map.html
index 9d1cbbf31..77e5ca580 100644
--- a/webgl/webgl-environment-map.html
+++ b/webgl/webgl-environment-map.html
@@ -73,7 +73,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-fundamentals.html b/webgl/webgl-fundamentals.html
index e41da51a1..70b9a3963 100644
--- a/webgl/webgl-fundamentals.html
+++ b/webgl/webgl-fundamentals.html
@@ -80,15 +80,15 @@
function main() {
// Get A WebGL context
- var canvas = document.getElementById("c");
+ var canvas = document.querySelector("#c");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// Get the strings for our GLSL shaders
- var vertexShaderSource = document.getElementById("2d-vertex-shader").text;
- var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;
+ var vertexShaderSource = document.querySelector("#2d-vertex-shader").text;
+ var fragmentShaderSource = document.querySelector("#2d-fragment-shader").text;
// create GLSL shaders, upload the GLSL source, compile the shaders
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
diff --git a/webgl/webgl-instanced-drawing-not-instanced.html b/webgl/webgl-instanced-drawing-not-instanced.html
index f5882e2d1..d6fb6b778 100644
--- a/webgl/webgl-instanced-drawing-not-instanced.html
+++ b/webgl/webgl-instanced-drawing-not-instanced.html
@@ -48,7 +48,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-instanced-drawing-projection-view.html b/webgl/webgl-instanced-drawing-projection-view.html
index 5f1b40ea8..f29f204ff 100644
--- a/webgl/webgl-instanced-drawing-projection-view.html
+++ b/webgl/webgl-instanced-drawing-projection-view.html
@@ -57,7 +57,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-instanced-drawing.html b/webgl/webgl-instanced-drawing.html
index c7460cb78..2f8814aa3 100644
--- a/webgl/webgl-instanced-drawing.html
+++ b/webgl/webgl-instanced-drawing.html
@@ -55,7 +55,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-less-code-more-fun-quad-guess.html b/webgl/webgl-less-code-more-fun-quad-guess.html
index 8fcceeb26..80796a292 100644
--- a/webgl/webgl-less-code-more-fun-quad-guess.html
+++ b/webgl/webgl-less-code-more-fun-quad-guess.html
@@ -98,7 +98,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-less-code-more-fun-quad-programinfo.html b/webgl/webgl-less-code-more-fun-quad-programinfo.html
index faaa69fdd..97af54ffc 100644
--- a/webgl/webgl-less-code-more-fun-quad-programinfo.html
+++ b/webgl/webgl-less-code-more-fun-quad-programinfo.html
@@ -98,7 +98,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-less-code-more-fun-quad.html b/webgl/webgl-less-code-more-fun-quad.html
index 68fc092b7..759facce0 100644
--- a/webgl/webgl-less-code-more-fun-quad.html
+++ b/webgl/webgl-less-code-more-fun-quad.html
@@ -98,7 +98,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-less-code-more-fun-triangle.html b/webgl/webgl-less-code-more-fun-triangle.html
index a08a90132..d95b7bf6d 100644
--- a/webgl/webgl-less-code-more-fun-triangle.html
+++ b/webgl/webgl-less-code-more-fun-triangle.html
@@ -98,7 +98,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-less-code-more-fun.html b/webgl/webgl-less-code-more-fun.html
index 70ec76cff..9df418c67 100644
--- a/webgl/webgl-less-code-more-fun.html
+++ b/webgl/webgl-less-code-more-fun.html
@@ -98,7 +98,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-multiple-objects-list-optimized-sorted.html b/webgl/webgl-multiple-objects-list-optimized-sorted.html
index 4bc003abf..bcda967a4 100644
--- a/webgl/webgl-multiple-objects-list-optimized-sorted.html
+++ b/webgl/webgl-multiple-objects-list-optimized-sorted.html
@@ -77,14 +77,14 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
var useSorted = false;
- var sortElem = document.getElementById("sort");
+ var sortElem = document.querySelector("#sort");
sortElem.addEventListener('change', function(e) {
useSorted = e.target.checked;
});
diff --git a/webgl/webgl-multiple-objects-list-optimized.html b/webgl/webgl-multiple-objects-list-optimized.html
index 6f08c0fa0..2b0ce7b8f 100644
--- a/webgl/webgl-multiple-objects-list-optimized.html
+++ b/webgl/webgl-multiple-objects-list-optimized.html
@@ -60,7 +60,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-multiple-objects-list.html b/webgl/webgl-multiple-objects-list.html
index 001963bec..c1a5c219f 100644
--- a/webgl/webgl-multiple-objects-list.html
+++ b/webgl/webgl-multiple-objects-list.html
@@ -59,7 +59,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-multiple-objects-manual.html b/webgl/webgl-multiple-objects-manual.html
index 47cf90866..93ecce560 100644
--- a/webgl/webgl-multiple-objects-manual.html
+++ b/webgl/webgl-multiple-objects-manual.html
@@ -59,7 +59,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-multiple-objects.html b/webgl/webgl-multiple-objects.html
index d5161d5b1..f07746e8d 100644
--- a/webgl/webgl-multiple-objects.html
+++ b/webgl/webgl-multiple-objects.html
@@ -59,7 +59,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-multiple-views-clear-fixed.html b/webgl/webgl-multiple-views-clear-fixed.html
index d6cdfabb7..0db6eb044 100644
--- a/webgl/webgl-multiple-views-clear-fixed.html
+++ b/webgl/webgl-multiple-views-clear-fixed.html
@@ -62,7 +62,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-multiple-views-clear-issue.html b/webgl/webgl-multiple-views-clear-issue.html
index e55c5de13..0697b06a4 100644
--- a/webgl/webgl-multiple-views-clear-issue.html
+++ b/webgl/webgl-multiple-views-clear-issue.html
@@ -62,7 +62,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-multiple-views-items.html b/webgl/webgl-multiple-views-items.html
index 37afeecbb..c4ad596ca 100644
--- a/webgl/webgl-multiple-views-items.html
+++ b/webgl/webgl-multiple-views-items.html
@@ -83,7 +83,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-multiple-views-one-view.html b/webgl/webgl-multiple-views-one-view.html
index ab8c4fb68..1c48a1c0b 100644
--- a/webgl/webgl-multiple-views-one-view.html
+++ b/webgl/webgl-multiple-views-one-view.html
@@ -62,7 +62,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-multiple-views.html b/webgl/webgl-multiple-views.html
index 243aa1aee..a163d445f 100644
--- a/webgl/webgl-multiple-views.html
+++ b/webgl/webgl-multiple-views.html
@@ -62,7 +62,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-non-perspective-correct-cube.html b/webgl/webgl-non-perspective-correct-cube.html
index caf3bcfd0..87dd51eff 100644
--- a/webgl/webgl-non-perspective-correct-cube.html
+++ b/webgl/webgl-non-perspective-correct-cube.html
@@ -67,7 +67,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-perspective-correct-cube.html b/webgl/webgl-perspective-correct-cube.html
index fd6dff728..aa9bab19c 100644
--- a/webgl/webgl-perspective-correct-cube.html
+++ b/webgl/webgl-perspective-correct-cube.html
@@ -64,7 +64,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-planar-projection-setup.html b/webgl/webgl-planar-projection-setup.html
index 63f5f8f49..36cc213e5 100644
--- a/webgl/webgl-planar-projection-setup.html
+++ b/webgl/webgl-planar-projection-setup.html
@@ -66,7 +66,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-planar-projection-with-lines.html b/webgl/webgl-planar-projection-with-lines.html
index 28f9cec41..547837ca7 100644
--- a/webgl/webgl-planar-projection-with-lines.html
+++ b/webgl/webgl-planar-projection-with-lines.html
@@ -106,7 +106,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-planar-projection-with-projection-matrix-0-to-1.html b/webgl/webgl-planar-projection-with-projection-matrix-0-to-1.html
index 6803b23e8..19f21cf7c 100644
--- a/webgl/webgl-planar-projection-with-projection-matrix-0-to-1.html
+++ b/webgl/webgl-planar-projection-with-projection-matrix-0-to-1.html
@@ -106,7 +106,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-planar-projection-with-projection-matrix.html b/webgl/webgl-planar-projection-with-projection-matrix.html
index 9a184e88c..3c36356f3 100644
--- a/webgl/webgl-planar-projection-with-projection-matrix.html
+++ b/webgl/webgl-planar-projection-with-projection-matrix.html
@@ -106,7 +106,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-planar-projection.html b/webgl/webgl-planar-projection.html
index 3e3b42b94..6490ad1d9 100644
--- a/webgl/webgl-planar-projection.html
+++ b/webgl/webgl-planar-projection.html
@@ -88,7 +88,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-pulling-vertices.html b/webgl/webgl-pulling-vertices.html
index 701572da6..c63e45536 100644
--- a/webgl/webgl-pulling-vertices.html
+++ b/webgl/webgl-pulling-vertices.html
@@ -82,7 +82,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById("canvas");
+ const canvas = document.querySelector("#canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-ramp-texture-issue-confirm.html b/webgl/webgl-ramp-texture-issue-confirm.html
index a84e8681d..5f9c665fb 100644
--- a/webgl/webgl-ramp-texture-issue-confirm.html
+++ b/webgl/webgl-ramp-texture-issue-confirm.html
@@ -96,7 +96,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-ramp-texture-linear.html b/webgl/webgl-ramp-texture-linear.html
index 01fa067a3..ddefb35a2 100644
--- a/webgl/webgl-ramp-texture-linear.html
+++ b/webgl/webgl-ramp-texture-linear.html
@@ -85,7 +85,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-ramp-texture.html b/webgl/webgl-ramp-texture.html
index 71edd8d45..06c98cc4e 100644
--- a/webgl/webgl-ramp-texture.html
+++ b/webgl/webgl-ramp-texture.html
@@ -85,7 +85,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-ramp-textures.html b/webgl/webgl-ramp-textures.html
index 46041bc55..05329cc5d 100644
--- a/webgl/webgl-ramp-textures.html
+++ b/webgl/webgl-ramp-textures.html
@@ -94,7 +94,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-render-to-texture-3-cubes-no-depth-buffer.html b/webgl/webgl-render-to-texture-3-cubes-no-depth-buffer.html
index ad02268c2..f43355964 100644
--- a/webgl/webgl-render-to-texture-3-cubes-no-depth-buffer.html
+++ b/webgl/webgl-render-to-texture-3-cubes-no-depth-buffer.html
@@ -60,7 +60,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-render-to-texture-3-cubes-with-depth-buffer.html b/webgl/webgl-render-to-texture-3-cubes-with-depth-buffer.html
index 0eaefe37e..7b0d9e1d9 100644
--- a/webgl/webgl-render-to-texture-3-cubes-with-depth-buffer.html
+++ b/webgl/webgl-render-to-texture-3-cubes-with-depth-buffer.html
@@ -60,7 +60,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-render-to-texture.html b/webgl/webgl-render-to-texture.html
index 3987bd4b7..147ad738d 100644
--- a/webgl/webgl-render-to-texture.html
+++ b/webgl/webgl-render-to-texture.html
@@ -59,7 +59,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-resize-canvas-hd-dpi.html b/webgl/webgl-resize-canvas-hd-dpi.html
index aa8fb1064..c788ab2a1 100644
--- a/webgl/webgl-resize-canvas-hd-dpi.html
+++ b/webgl/webgl-resize-canvas-hd-dpi.html
@@ -56,7 +56,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-resize-canvas-viewport.html b/webgl/webgl-resize-canvas-viewport.html
index e22bd1afc..733b8b3c5 100644
--- a/webgl/webgl-resize-canvas-viewport.html
+++ b/webgl/webgl-resize-canvas-viewport.html
@@ -56,7 +56,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-resize-canvas.html b/webgl/webgl-resize-canvas.html
index 510b379ab..dd43dc2be 100644
--- a/webgl/webgl-resize-canvas.html
+++ b/webgl/webgl-resize-canvas.html
@@ -56,7 +56,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-scene-graph-block-guy.html b/webgl/webgl-scene-graph-block-guy.html
index 37917ddff..b7b06b997 100644
--- a/webgl/webgl-scene-graph-block-guy.html
+++ b/webgl/webgl-scene-graph-block-guy.html
@@ -126,7 +126,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-scene-graph-solar-system-adjusted.html b/webgl/webgl-scene-graph-solar-system-adjusted.html
index 0ed83a9a8..76f46d048 100644
--- a/webgl/webgl-scene-graph-solar-system-adjusted.html
+++ b/webgl/webgl-scene-graph-solar-system-adjusted.html
@@ -100,7 +100,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-scene-graph-solar-system-larger-earth-fixed.html b/webgl/webgl-scene-graph-solar-system-larger-earth-fixed.html
index 8410285ac..8a17e2a57 100644
--- a/webgl/webgl-scene-graph-solar-system-larger-earth-fixed.html
+++ b/webgl/webgl-scene-graph-solar-system-larger-earth-fixed.html
@@ -100,7 +100,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-scene-graph-solar-system-larger-earth.html b/webgl/webgl-scene-graph-solar-system-larger-earth.html
index 80eba3009..501afa87c 100644
--- a/webgl/webgl-scene-graph-solar-system-larger-earth.html
+++ b/webgl/webgl-scene-graph-solar-system-larger-earth.html
@@ -100,7 +100,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-scene-graph-solar-system.html b/webgl/webgl-scene-graph-solar-system.html
index f05e53401..ef8571a00 100644
--- a/webgl/webgl-scene-graph-solar-system.html
+++ b/webgl/webgl-scene-graph-solar-system.html
@@ -100,7 +100,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-shadows-basic-w-bias.html b/webgl/webgl-shadows-basic-w-bias.html
index 3b4b538fc..8e20c74bf 100644
--- a/webgl/webgl-shadows-basic-w-bias.html
+++ b/webgl/webgl-shadows-basic-w-bias.html
@@ -120,7 +120,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-shadows-basic.html b/webgl/webgl-shadows-basic.html
index e4e0ad3e5..9927eedc9 100644
--- a/webgl/webgl-shadows-basic.html
+++ b/webgl/webgl-shadows-basic.html
@@ -119,7 +119,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-shadows-depth-texture.html b/webgl/webgl-shadows-depth-texture.html
index 59caf8f11..f20bfb7e3 100644
--- a/webgl/webgl-shadows-depth-texture.html
+++ b/webgl/webgl-shadows-depth-texture.html
@@ -116,7 +116,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-shadows-w-directional-light.html b/webgl/webgl-shadows-w-directional-light.html
index 99dcc8136..f3ea8653b 100644
--- a/webgl/webgl-shadows-w-directional-light.html
+++ b/webgl/webgl-shadows-w-directional-light.html
@@ -136,7 +136,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-shadows-w-spot-light.html b/webgl/webgl-shadows-w-spot-light.html
index b61402597..c1cbf276d 100644
--- a/webgl/webgl-shadows-w-spot-light.html
+++ b/webgl/webgl-shadows-w-spot-light.html
@@ -168,7 +168,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-skinning-3d-gltf-skinned.html b/webgl/webgl-skinning-3d-gltf-skinned.html
index 036f2bb80..a2bbf99c2 100644
--- a/webgl/webgl-skinning-3d-gltf-skinned.html
+++ b/webgl/webgl-skinning-3d-gltf-skinned.html
@@ -104,7 +104,7 @@
async function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById("canvas");
+ const canvas = document.querySelector("#canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-skinning-3d-gltf.html b/webgl/webgl-skinning-3d-gltf.html
index daa9387b1..dc268a95f 100644
--- a/webgl/webgl-skinning-3d-gltf.html
+++ b/webgl/webgl-skinning-3d-gltf.html
@@ -54,7 +54,7 @@
async function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById("canvas");
+ const canvas = document.querySelector("#canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-skinning-bone-matrices-in-texture.html b/webgl/webgl-skinning-bone-matrices-in-texture.html
index eeb720ef6..88113bcbc 100644
--- a/webgl/webgl-skinning-bone-matrices-in-texture.html
+++ b/webgl/webgl-skinning-bone-matrices-in-texture.html
@@ -80,7 +80,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-skinning.html b/webgl/webgl-skinning.html
index 514e794ef..5afa65050 100644
--- a/webgl/webgl-skinning.html
+++ b/webgl/webgl-skinning.html
@@ -64,7 +64,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-skybox-plus-environment-map.html b/webgl/webgl-skybox-plus-environment-map.html
index 26a077699..617aa39e1 100644
--- a/webgl/webgl-skybox-plus-environment-map.html
+++ b/webgl/webgl-skybox-plus-environment-map.html
@@ -93,7 +93,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-skybox.html b/webgl/webgl-skybox.html
index ecbeacdeb..de5687689 100644
--- a/webgl/webgl-skybox.html
+++ b/webgl/webgl-skybox.html
@@ -51,7 +51,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-text-glyphs-texture-atlas.html b/webgl/webgl-text-glyphs-texture-atlas.html
index e0741b584..5d78a8e56 100644
--- a/webgl/webgl-text-glyphs-texture-atlas.html
+++ b/webgl/webgl-text-glyphs-texture-atlas.html
@@ -202,7 +202,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-text-glyphs.html b/webgl/webgl-text-glyphs.html
index 87143ea17..39bb9eafc 100644
--- a/webgl/webgl-text-glyphs.html
+++ b/webgl/webgl-text-glyphs.html
@@ -107,7 +107,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-text-html-bouncing-div.html b/webgl/webgl-text-html-bouncing-div.html
index fcd02938e..1029d8487 100644
--- a/webgl/webgl-text-html-bouncing-div.html
+++ b/webgl/webgl-text-html-bouncing-div.html
@@ -83,14 +83,14 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// look up the divcontainer
- var divContainerElement = document.getElementById("divcontainer");
+ var divContainerElement = document.querySelector("#divcontainer");
// make the div
var div = document.createElement("div");
diff --git a/webgl/webgl-text-html-canvas2d-arrows.html b/webgl/webgl-text-html-canvas2d-arrows.html
index 178f6515e..14ebca25d 100644
--- a/webgl/webgl-text-html-canvas2d-arrows.html
+++ b/webgl/webgl-text-html-canvas2d-arrows.html
@@ -80,14 +80,14 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// look up the text canvas.
- var textCanvas = document.getElementById("text");
+ var textCanvas = document.querySelector("#text");
// make a 2D context for it
var ctx = textCanvas.getContext("2d");
diff --git a/webgl/webgl-text-html-canvas2d.html b/webgl/webgl-text-html-canvas2d.html
index 8a71dfa1c..fc0ec4c20 100644
--- a/webgl/webgl-text-html-canvas2d.html
+++ b/webgl/webgl-text-html-canvas2d.html
@@ -80,14 +80,14 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// look up the text canvas.
- var textCanvas = document.getElementById("text");
+ var textCanvas = document.querySelector("#text");
// make a 2D context for it
var ctx = textCanvas.getContext("2d");
diff --git a/webgl/webgl-text-html-div.html b/webgl/webgl-text-html-div.html
index bc5744710..d6c9dc7c5 100644
--- a/webgl/webgl-text-html-div.html
+++ b/webgl/webgl-text-html-div.html
@@ -80,14 +80,14 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// look up the divcontainer
- var divContainerElement = document.getElementById("divcontainer");
+ var divContainerElement = document.querySelector("#divcontainer");
// make the div
var div = document.createElement("div");
diff --git a/webgl/webgl-text-html-divs.html b/webgl/webgl-text-html-divs.html
index 071e9b8e7..a82566133 100644
--- a/webgl/webgl-text-html-divs.html
+++ b/webgl/webgl-text-html-divs.html
@@ -91,13 +91,13 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
- var divContainerElement = document.getElementById("divcontainer");
+ var divContainerElement = document.querySelector("#divcontainer");
// setup GLSL program
var program = webglUtils.createProgramFromScripts(gl, ["3d-vertex-shader", "3d-fragment-shader"]);
diff --git a/webgl/webgl-text-html-overlay-styled.html b/webgl/webgl-text-html-overlay-styled.html
index c40c9385e..83fd5771f 100644
--- a/webgl/webgl-text-html-overlay-styled.html
+++ b/webgl/webgl-text-html-overlay-styled.html
@@ -79,15 +79,15 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// look up the elements we want to affect
- var timeElement = document.getElementById("time");
- var angleElement = document.getElementById("angle");
+ var timeElement = document.querySelector("#time");
+ var angleElement = document.querySelector("#angle");
// Create text nodes to save some time for the browser.
var timeNode = document.createTextNode("");
diff --git a/webgl/webgl-text-html-overlay.html b/webgl/webgl-text-html-overlay.html
index dab64730a..ce596b7fa 100644
--- a/webgl/webgl-text-html-overlay.html
+++ b/webgl/webgl-text-html-overlay.html
@@ -76,15 +76,15 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// look up the elements we want to affect
- var timeElement = document.getElementById("time");
- var angleElement = document.getElementById("angle");
+ var timeElement = document.querySelector("#time");
+ var angleElement = document.querySelector("#angle");
// Create text nodes to save some time for the browser.
var timeNode = document.createTextNode("");
diff --git a/webgl/webgl-text-html.html b/webgl/webgl-text-html.html
index 5a136a1f1..17fb11f7e 100644
--- a/webgl/webgl-text-html.html
+++ b/webgl/webgl-text-html.html
@@ -71,7 +71,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-text-texture-consistent-scale.html b/webgl/webgl-text-texture-consistent-scale.html
index 9145932c7..b68dbb5b7 100644
--- a/webgl/webgl-text-texture-consistent-scale.html
+++ b/webgl/webgl-text-texture-consistent-scale.html
@@ -106,7 +106,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-text-texture-different-colors.html b/webgl/webgl-text-texture-different-colors.html
index 68e1fe3ef..430cae386 100644
--- a/webgl/webgl-text-texture-different-colors.html
+++ b/webgl/webgl-text-texture-different-colors.html
@@ -107,7 +107,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-text-texture-different-text.html b/webgl/webgl-text-texture-different-text.html
index 2d5e21564..8ad1dd31d 100644
--- a/webgl/webgl-text-texture-different-text.html
+++ b/webgl/webgl-text-texture-different-text.html
@@ -106,7 +106,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-text-texture-enable-blend.html b/webgl/webgl-text-texture-enable-blend.html
index fc67f16fd..8e83acaec 100644
--- a/webgl/webgl-text-texture-enable-blend.html
+++ b/webgl/webgl-text-texture-enable-blend.html
@@ -109,7 +109,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-text-texture-moved-toward-view.html b/webgl/webgl-text-texture-moved-toward-view.html
index cc6d676a6..51af656bb 100644
--- a/webgl/webgl-text-texture-moved-toward-view.html
+++ b/webgl/webgl-text-texture-moved-toward-view.html
@@ -106,7 +106,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-text-texture-premultiplied-alpha.html b/webgl/webgl-text-texture-premultiplied-alpha.html
index 8eb7a296c..15bde1823 100644
--- a/webgl/webgl-text-texture-premultiplied-alpha.html
+++ b/webgl/webgl-text-texture-premultiplied-alpha.html
@@ -106,7 +106,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-text-texture-separate-opaque-from-transparent.html b/webgl/webgl-text-texture-separate-opaque-from-transparent.html
index 72d1ec29e..faa4fcc67 100644
--- a/webgl/webgl-text-texture-separate-opaque-from-transparent.html
+++ b/webgl/webgl-text-texture-separate-opaque-from-transparent.html
@@ -106,7 +106,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-text-texture.html b/webgl/webgl-text-texture.html
index 9d4710b4d..f6e652c5b 100644
--- a/webgl/webgl-text-texture.html
+++ b/webgl/webgl-text-texture.html
@@ -109,7 +109,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-tips-preservedrawingbuffer.html b/webgl/webgl-tips-preservedrawingbuffer.html
index e6a9a86e2..dafee1e24 100644
--- a/webgl/webgl-tips-preservedrawingbuffer.html
+++ b/webgl/webgl-tips-preservedrawingbuffer.html
@@ -56,7 +56,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl", {preserveDrawingBuffer: true});
if (!gl) {
return;
diff --git a/webgl/webgl-tips-screenshot-bad.html b/webgl/webgl-tips-screenshot-bad.html
index aec58c3b1..e436c0590 100644
--- a/webgl/webgl-tips-screenshot-bad.html
+++ b/webgl/webgl-tips-screenshot-bad.html
@@ -64,7 +64,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-tips-screenshot-good.html b/webgl/webgl-tips-screenshot-good.html
index ebfe30721..e8e16bc93 100644
--- a/webgl/webgl-tips-screenshot-good.html
+++ b/webgl/webgl-tips-screenshot-good.html
@@ -64,7 +64,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- var canvas = document.getElementById("canvas");
+ var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
diff --git a/webgl/webgl-visualize-camera-with-frustum.html b/webgl/webgl-visualize-camera-with-frustum.html
index 47b39d90f..7b6c33913 100644
--- a/webgl/webgl-visualize-camera-with-frustum.html
+++ b/webgl/webgl-visualize-camera-with-frustum.html
@@ -82,7 +82,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-visualize-camera-with-orthographic.html b/webgl/webgl-visualize-camera-with-orthographic.html
index 149a7d4e3..d45e87234 100644
--- a/webgl/webgl-visualize-camera-with-orthographic.html
+++ b/webgl/webgl-visualize-camera-with-orthographic.html
@@ -82,7 +82,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
diff --git a/webgl/webgl-visualize-camera.html b/webgl/webgl-visualize-camera.html
index 7806a45b5..f8bf0d4d9 100644
--- a/webgl/webgl-visualize-camera.html
+++ b/webgl/webgl-visualize-camera.html
@@ -82,7 +82,7 @@
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
- const canvas = document.getElementById('canvas');
+ const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;