Remove "as GPUCanvasContext" (#544)

beaufortfrancois · web-flow · commit 73937a604877 · 2025-10-17T21:24:56.000+02:00
Using `as GPUCanvasContext` is not required anymore, so let's remove it.
diff --git a/sample/a-buffer/main.ts b/sample/a-buffer/main.ts
@@ -23,7 +23,7 @@ const device = await adapter?.requestDevice({
 });
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 
 context.configure({
diff --git a/sample/animometer/main.ts b/sample/animometer/main.ts
@@ -31,7 +31,7 @@ const settings = {
   dynamicOffsets: Boolean(params.get('dynamicOffsets')),
 };
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/bitonicSort/utils.ts b/sample/bitonicSort/utils.ts
@@ -133,7 +133,7 @@ export const SampleInitFactoryWebGPU = async (
     });
     quitIfWebGPUNotAvailable(adapter, device);
 
-    const context = canvas.getContext('webgpu') as GPUCanvasContext;
+    const context = canvas.getContext('webgpu');
     const devicePixelRatio = window.devicePixelRatio;
     canvas.width = canvas.clientWidth * devicePixelRatio;
     canvas.height = canvas.clientHeight * devicePixelRatio;
diff --git a/sample/cameras/main.ts b/sample/cameras/main.ts
@@ -45,7 +45,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 });
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/computeBoids/main.ts b/sample/computeBoids/main.ts
@@ -32,7 +32,7 @@ if (canvas.parentNode) {
   console.error('canvas.parentNode is null');
 }
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
 canvas.height = canvas.clientHeight * devicePixelRatio;
diff --git a/sample/cornell/main.ts b/sample/cornell/main.ts
@@ -56,7 +56,7 @@ const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
 canvas.height = canvas.clientHeight * devicePixelRatio;
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 context.configure({
   device,
   format: presentationFormat,
diff --git a/sample/cubemap/main.ts b/sample/cubemap/main.ts
@@ -19,7 +19,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/deferredRendering/main.ts b/sample/deferredRendering/main.ts
@@ -25,7 +25,7 @@ const device = await adapter?.requestDevice({
 });
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/fractalCube/main.ts b/sample/fractalCube/main.ts
@@ -19,7 +19,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/gameOfLife/main.ts b/sample/gameOfLife/main.ts
@@ -11,7 +11,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
 canvas.height = canvas.clientHeight * devicePixelRatio;
diff --git a/sample/generateMipmap/main.ts b/sample/generateMipmap/main.ts
@@ -26,7 +26,7 @@ const device = await adapter.requestDevice({
 quitIfWebGPUNotAvailable(adapter, device);
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
 canvas.height = canvas.clientHeight * devicePixelRatio;
diff --git a/sample/helloTriangle/main.ts b/sample/helloTriangle/main.ts
@@ -9,7 +9,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/helloTriangleMSAA/main.ts b/sample/helloTriangleMSAA/main.ts
@@ -9,7 +9,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/imageBlur/main.ts b/sample/imageBlur/main.ts
@@ -14,7 +14,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/instancedCube/main.ts b/sample/instancedCube/main.ts
@@ -19,7 +19,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/normalMap/main.ts b/sample/normalMap/main.ts
@@ -23,7 +23,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 });
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
 canvas.height = canvas.clientHeight * devicePixelRatio;
diff --git a/sample/occlusionQuery/main.ts b/sample/occlusionQuery/main.ts
@@ -38,7 +38,7 @@ const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
 canvas.height = canvas.clientHeight * devicePixelRatio;
diff --git a/sample/particles/main.ts b/sample/particles/main.ts
@@ -23,7 +23,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/renderBundles/main.ts b/sample/renderBundles/main.ts
@@ -32,7 +32,7 @@ gui.add(settings, 'asteroidCount', 1000, 10000, 1000).onChange(() => {
   updateRenderBundle();
 });
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/resizeCanvas/main.ts b/sample/resizeCanvas/main.ts
@@ -9,7 +9,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 
diff --git a/sample/resizeObserverHDDPI/main.ts b/sample/resizeObserverHDDPI/main.ts
@@ -9,7 +9,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 
diff --git a/sample/reversedZ/main.ts b/sample/reversedZ/main.ts
@@ -72,7 +72,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/rotatingCube/main.ts b/sample/rotatingCube/main.ts
@@ -19,7 +19,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/samplerParameters/main.ts b/sample/samplerParameters/main.ts
@@ -176,7 +176,7 @@ canvas.width = canvas.height = kCanvasSize;
 canvas.style.minWidth = canvas.style.maxWidth = kCanvasCSSSize + 'px';
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 context.configure({
   device,
   format: presentationFormat,
diff --git a/sample/shadowMapping/main.ts b/sample/shadowMapping/main.ts
@@ -15,7 +15,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/skinnedMesh/main.ts b/sample/skinnedMesh/main.ts
@@ -105,7 +105,7 @@ const device = await adapter?.requestDevice({
 });
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio || 1;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/textRenderingMsdf/main.ts b/sample/textRenderingMsdf/main.ts
@@ -25,7 +25,7 @@ const device = await adapter?.requestDevice({
 });
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio || 1;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/texturedCube/main.ts b/sample/texturedCube/main.ts
@@ -19,7 +19,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/timestampQuery/main.ts b/sample/timestampQuery/main.ts
@@ -46,7 +46,7 @@ const timestampQueryManager = new TimestampQueryManager(device, (elapsedNs) => {
 
 const renderPassDurationCounter = new PerfCounter();
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/transparentCanvas/main.ts b/sample/transparentCanvas/main.ts
@@ -19,7 +19,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/twoCubes/main.ts b/sample/twoCubes/main.ts
@@ -19,7 +19,7 @@ const adapter = await navigator.gpu?.requestAdapter({
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
diff --git a/sample/videoUploading/main.ts b/sample/videoUploading/main.ts
@@ -27,7 +27,7 @@ const videos = {
 } as const;
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 
 context.configure({
diff --git a/sample/volumeRenderingTexture3D/main.ts b/sample/volumeRenderingTexture3D/main.ts
@@ -75,7 +75,7 @@ if (adapter?.features.has('texture-compression-astc-sliced-3d')) {
 const device = await adapter?.requestDevice({ requiredFeatures });
 
 quitIfWebGPUNotAvailable(adapter, device);
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 
 const sampleCount = 4;
 
diff --git a/sample/wireframe/main.ts b/sample/wireframe/main.ts
@@ -72,7 +72,7 @@ const device = await adapter?.requestDevice({
 quitIfWebGPUNotAvailable(adapter, device);
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const context = canvas.getContext('webgpu') as GPUCanvasContext;
+const context = canvas.getContext('webgpu');
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;
 canvas.height = canvas.clientHeight * devicePixelRatio;

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ if (canvas.parentNode) {`
`32`	`32`	`console.error('canvas.parentNode is null');`
`33`	`33`	`}`
`34`	`34`
`35`		`-const context = canvas.getContext('webgpu') as GPUCanvasContext;`
	`35`	`+const context = canvas.getContext('webgpu');`
`36`	`36`	`const devicePixelRatio = window.devicePixelRatio;`
`37`	`37`	`canvas.width = canvas.clientWidth * devicePixelRatio;`
`38`	`38`	`canvas.height = canvas.clientHeight * devicePixelRatio;`