diff --git a/src/sample/animometer/main.ts b/src/sample/animometer/main.ts
index d8935943..5318c38e 100644
--- a/src/sample/animometer/main.ts
+++ b/src/sample/animometer/main.ts
@@ -36,7 +36,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
     usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
   });
 
diff --git a/src/sample/computeBoids/main.ts b/src/sample/computeBoids/main.ts
index ff5064eb..e6505bb1 100644
--- a/src/sample/computeBoids/main.ts
+++ b/src/sample/computeBoids/main.ts
@@ -17,7 +17,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const spriteShaderModule = device.createShaderModule({ code: spriteWGSL });
diff --git a/src/sample/cubemap/main.ts b/src/sample/cubemap/main.ts
index b0bc37f1..084af2e6 100644
--- a/src/sample/cubemap/main.ts
+++ b/src/sample/cubemap/main.ts
@@ -27,7 +27,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create a vertex buffer from the cube data.
diff --git a/src/sample/deferredRendering/main.ts b/src/sample/deferredRendering/main.ts
index bade9252..c3fc0553 100644
--- a/src/sample/deferredRendering/main.ts
+++ b/src/sample/deferredRendering/main.ts
@@ -28,7 +28,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create the model vertex buffer.
diff --git a/src/sample/fractalCube/main.ts b/src/sample/fractalCube/main.ts
index 484333a8..ed17866c 100644
--- a/src/sample/fractalCube/main.ts
+++ b/src/sample/fractalCube/main.ts
@@ -31,7 +31,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
     // Specify we want both RENDER_ATTACHMENT and COPY_SRC since we
     // will copy out of the swapchain texture.
     usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create a vertex buffer from the cube data.
diff --git a/src/sample/helloTriangle/main.ts b/src/sample/helloTriangle/main.ts
index 6998e4ff..1a2048d3 100644
--- a/src/sample/helloTriangle/main.ts
+++ b/src/sample/helloTriangle/main.ts
@@ -10,11 +10,15 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   if (!pageState.active) return;
   const context = canvas.getContext('webgpu') as GPUCanvasContext;
 
+  const devicePixelRatio = window.devicePixelRatio || 1;
+  canvas.width = canvas.clientWidth * devicePixelRatio;
+  canvas.height = canvas.clientHeight * devicePixelRatio;
   const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const pipeline = device.createRenderPipeline({
diff --git a/src/sample/helloTriangleMSAA/main.ts b/src/sample/helloTriangleMSAA/main.ts
index 2dbe8e06..179036d9 100644
--- a/src/sample/helloTriangleMSAA/main.ts
+++ b/src/sample/helloTriangleMSAA/main.ts
@@ -18,7 +18,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const sampleCount = 4;
diff --git a/src/sample/imageBlur/main.ts b/src/sample/imageBlur/main.ts
index 43309bf3..47a21c14 100644
--- a/src/sample/imageBlur/main.ts
+++ b/src/sample/imageBlur/main.ts
@@ -22,7 +22,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const blurPipeline = device.createComputePipeline({
diff --git a/src/sample/instancedCube/main.ts b/src/sample/instancedCube/main.ts
index ff2f92e8..0711a5d6 100644
--- a/src/sample/instancedCube/main.ts
+++ b/src/sample/instancedCube/main.ts
@@ -27,7 +27,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create a vertex buffer from the cube data.
diff --git a/src/sample/particles/main.ts b/src/sample/particles/main.ts
index 97101e38..52441c43 100644
--- a/src/sample/particles/main.ts
+++ b/src/sample/particles/main.ts
@@ -30,7 +30,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const particlesBuffer = device.createBuffer({
diff --git a/src/sample/resizeCanvas/main.ts b/src/sample/resizeCanvas/main.ts
index 273b3657..58eea106 100644
--- a/src/sample/resizeCanvas/main.ts
+++ b/src/sample/resizeCanvas/main.ts
@@ -21,7 +21,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const sampleCount = 4;
diff --git a/src/sample/reversedZ/main.ts b/src/sample/reversedZ/main.ts
index 2c0fab40..2c3ec952 100644
--- a/src/sample/reversedZ/main.ts
+++ b/src/sample/reversedZ/main.ts
@@ -114,7 +114,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const verticesBuffer = device.createBuffer({
diff --git a/src/sample/rotatingCube/main.ts b/src/sample/rotatingCube/main.ts
index ca10714c..f15c3828 100644
--- a/src/sample/rotatingCube/main.ts
+++ b/src/sample/rotatingCube/main.ts
@@ -27,7 +27,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create a vertex buffer from the cube data.
diff --git a/src/sample/shadowMapping/main.ts b/src/sample/shadowMapping/main.ts
index 39ab312c..3743cd1b 100644
--- a/src/sample/shadowMapping/main.ts
+++ b/src/sample/shadowMapping/main.ts
@@ -25,7 +25,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create the model vertex buffer.
diff --git a/src/sample/texturedCube/main.ts b/src/sample/texturedCube/main.ts
index f5bf4a0e..596d01b8 100644
--- a/src/sample/texturedCube/main.ts
+++ b/src/sample/texturedCube/main.ts
@@ -27,7 +27,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create a vertex buffer from the cube data.
diff --git a/src/sample/twoCubes/main.ts b/src/sample/twoCubes/main.ts
index d3bbefad..f6da618d 100644
--- a/src/sample/twoCubes/main.ts
+++ b/src/sample/twoCubes/main.ts
@@ -27,7 +27,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create a vertex buffer from the cube data.
diff --git a/src/sample/videoUploading/main.ts b/src/sample/videoUploading/main.ts
index f58c7cc1..87c983ee 100644
--- a/src/sample/videoUploading/main.ts
+++ b/src/sample/videoUploading/main.ts
@@ -29,7 +29,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const pipeline = device.createRenderPipeline({