Use the same variable name for element and offscreen canvases.
Using different variable names made it impossible to write generic
tests using APIs like `createImageBitmap(canvas);` that would work for
element, offscreen and worker tests.
Bug: 1237275, 1396372, 1403977
Change-Id: Ic6b56119d2c463974afd36a362482a29e9edb936
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4538260
Commit-Queue: Jean-Philippe Gravel <jpgravel@chromium.org>
Reviewed-by: Justin Novosad <junov@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1145729}
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
index 55f2d2c..18af95c 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(520, 420);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(520, 420);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, 520, 50);
@@ -105,6 +105,6 @@
floodColor: 'purple', floodOpacity: ['0.4']});
ctx.fillRect(210, 310, 80, 80);
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.w.html b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.w.html
index 633d202..b94424d 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.w.html
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(520, 420);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(520, 420);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, 520, 50);
@@ -107,7 +107,7 @@
floodColor: 'purple', floodOpacity: ['0.4']});
ctx.fillRect(210, 310, 80, 80);
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.endlayer.alone.html b/html/canvas/offscreen/layers/2d.layer.endlayer.alone.html
index f088c89..6a0e5cc 100644
--- a/html/canvas/offscreen/layers/2d.layer.endlayer.alone.html
+++ b/html/canvas/offscreen/layers/2d.layer.endlayer.alone.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillRect(60, 60, 75, 50);
@@ -22,6 +22,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.endlayer.alone.w.html b/html/canvas/offscreen/layers/2d.layer.endlayer.alone.w.html
index 96c8011..ddb2671 100644
--- a/html/canvas/offscreen/layers/2d.layer.endlayer.alone.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.endlayer.alone.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillRect(60, 60, 75, 50);
@@ -24,7 +24,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.endlayer.unmatched.html b/html/canvas/offscreen/layers/2d.layer.endlayer.unmatched.html
index a87c736..b204c49 100644
--- a/html/canvas/offscreen/layers/2d.layer.endlayer.unmatched.html
+++ b/html/canvas/offscreen/layers/2d.layer.endlayer.unmatched.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillRect(60, 60, 75, 50);
@@ -26,6 +26,6 @@
ctx.fillRect(70, 70, 75, 50);
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.endlayer.unmatched.w.html b/html/canvas/offscreen/layers/2d.layer.endlayer.unmatched.w.html
index 9507809..2e1cb62 100644
--- a/html/canvas/offscreen/layers/2d.layer.endlayer.unmatched.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.endlayer.unmatched.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillRect(60, 60, 75, 50);
@@ -28,7 +28,7 @@
ctx.fillRect(70, 70, 75, 50);
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html
index bb7dd93..71414b4 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -33,6 +33,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html
index 70b32e4..551df36 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -36,6 +36,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html
index 45932d4..6851a4a 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -38,7 +38,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html
index ff33fc4..618480c 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -35,7 +35,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html
index 2158218..94fed57 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -33,6 +33,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html
index bb3d886..841742e 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -36,6 +36,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html
index 592f929..ef44257 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -38,7 +38,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html
index 2359e92..d7d2b7a 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -35,7 +35,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html
index 67a8ae6..63a264e 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -32,6 +32,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html
index a67f587..daa788c 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -35,6 +35,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html
index 35df72a..f75db3d 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -37,7 +37,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html
index 2db6b64..694f31e 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -34,7 +34,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.blending.html b/html/canvas/offscreen/layers/2d.layer.global-states.blending.html
index 6bcfd28..6a36bb4 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.blending.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.blending.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -32,6 +32,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html
index f1e9b7d..9ad87aa 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -35,6 +35,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html
index 1d22e94..dc52e9e 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -37,7 +37,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html
index 227c72b..8964e97 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -34,7 +34,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.composite.html b/html/canvas/offscreen/layers/2d.layer.global-states.composite.html
index 9d4d1dc..84fb4b3 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.composite.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.composite.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -32,6 +32,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html
index 9ad3906..2e0883f 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -35,6 +35,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html
index b45c9d3..66d4405 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -37,7 +37,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html
index 6649388..b695871 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -34,7 +34,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html
index 37d0e3d..bf483cc 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -36,6 +36,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
index 93278cb..d914a70 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -39,6 +39,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html
index 783693f..a1acd0d 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -41,7 +41,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html
index 53533e4..47503d5 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -38,7 +38,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html
index f0af85f..7d4f8ec 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -36,6 +36,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
index 46cd28b..f75bd25 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -39,6 +39,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html
index 044b759..783a04c 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -41,7 +41,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html
index be25ca6..ed8af9a 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -38,7 +38,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html
index 6567094..4f8954f 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -35,6 +35,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html
index 3059bf3..0cfa86a 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -38,6 +38,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html
index a481073..015fe94 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -40,7 +40,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html
index b5d8107..4334fd6 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -37,7 +37,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html
index a574e82..7f3d1a2 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -35,6 +35,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html
index 4bdf803..9b9862e 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -38,6 +38,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html
index 23cd4e8..1d7e74b 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -40,7 +40,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html
index bd7a51d..f5ccee1 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -37,7 +37,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html
index 663a953..2e8272b 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -35,6 +35,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html
index 52ad864..077041a 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -38,6 +38,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html
index bf7139e..b162354 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -40,7 +40,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html
index 1f30d1e..b415839 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -37,7 +37,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html
index 0619faa..ccae63a 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -35,6 +35,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html
index 3a71683..6ce768a 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -37,7 +37,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html
index 69120c1..9a20e39 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -37,6 +37,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html
index 8a770b2..26bdf75 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -39,7 +39,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html b/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html
index 022736c..c8a9815 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -32,6 +32,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html
index 80ed4e4..db03a3f 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -34,7 +34,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html
index 6402dc5..41a832c 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -34,6 +34,6 @@
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html
index e41e7ae..7b78f4b 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
@@ -36,7 +36,7 @@
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.nested.html b/html/canvas/offscreen/layers/2d.layer.nested.html
index 0c16849..9e5b7d5 100644
--- a/html/canvas/offscreen/layers/2d.layer.nested.html
+++ b/html/canvas/offscreen/layers/2d.layer.nested.html
@@ -8,8 +8,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
var circle = new Path2D();
circle.arc(90, 90, 40, 0, 2 * Math.PI);
@@ -34,6 +34,6 @@
ctx.endLayer();
ctx.endLayer();
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.nested.w.html b/html/canvas/offscreen/layers/2d.layer.nested.w.html
index 3b81691..99e7390 100644
--- a/html/canvas/offscreen/layers/2d.layer.nested.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.nested.w.html
@@ -10,8 +10,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
var circle = new Path2D();
circle.arc(90, 90, 40, 0, 2 * Math.PI);
@@ -36,7 +36,7 @@
ctx.endLayer();
ctx.endLayer();
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.restore-style.html b/html/canvas/offscreen/layers/2d.layer.restore-style.html
index 66f9983..a3593cd 100644
--- a/html/canvas/offscreen/layers/2d.layer.restore-style.html
+++ b/html/canvas/offscreen/layers/2d.layer.restore-style.html
@@ -9,8 +9,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(200, 200);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,255,1)';
ctx.fillRect(50, 50, 75, 50);
@@ -23,6 +23,6 @@
ctx.fillRect(70, 70, 75, 50);
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.restore-style.w.html b/html/canvas/offscreen/layers/2d.layer.restore-style.w.html
index a717a1d..a66fc2b 100644
--- a/html/canvas/offscreen/layers/2d.layer.restore-style.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.restore-style.w.html
@@ -11,8 +11,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(200, 200);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(200, 200);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,255,1)';
ctx.fillRect(50, 50, 75, 50);
@@ -25,7 +25,7 @@
ctx.fillRect(70, 70, 75, 50);
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.several-complex.html b/html/canvas/offscreen/layers/2d.layer.several-complex.html
index 1d50bd4..c4b5028 100644
--- a/html/canvas/offscreen/layers/2d.layer.several-complex.html
+++ b/html/canvas/offscreen/layers/2d.layer.several-complex.html
@@ -9,8 +9,8 @@
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(500, 500);
- const ctx = offscreen_canvas.getContext('2d');
+ const canvas = new OffscreenCanvas(500, 500);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillRect(50, 50, 95, 70);
@@ -32,6 +32,6 @@
ctx.endLayer();
}
- const canvas = document.getElementById("canvas");
- canvas.getContext('2d').drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.several-complex.w.html b/html/canvas/offscreen/layers/2d.layer.several-complex.w.html
index 7982a8d..114c5e0 100644
--- a/html/canvas/offscreen/layers/2d.layer.several-complex.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.several-complex.w.html
@@ -11,8 +11,8 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(500, 500);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(500, 500);
+ const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillRect(50, 50, 95, 70);
@@ -34,7 +34,7 @@
ctx.endLayer();
}
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
diff --git a/html/canvas/tools/templates-new.yaml b/html/canvas/tools/templates-new.yaml
index 4981e80..581c1d7 100644
--- a/html/canvas/tools/templates-new.yaml
+++ b/html/canvas/tools/templates-new.yaml
@@ -141,13 +141,13 @@
%(fallback)s
</canvas>
<script>
- const offscreen_canvas = new OffscreenCanvas(%(width)s, %(height)s);
- const ctx = offscreen_canvas.getContext(%(context_args)s);
+ const canvas = new OffscreenCanvas(%(width)s, %(height)s);
+ const ctx = canvas.getContext(%(context_args)s);
%(code)s
- const canvas = document.getElementById("canvas");
- canvas.getContext(%(context_args)s).drawImage(offscreen_canvas, 0, 0);
+ const outputCanvas = document.getElementById("canvas");
+ outputCanvas.getContext(%(context_args)s).drawImage(canvas, 0, 0);
</script>
%(images)s
@@ -167,12 +167,12 @@
</canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
- const oc = new OffscreenCanvas(%(width)s, %(height)s);
- const ctx = oc.getContext('2d');
+ const canvas = new OffscreenCanvas(%(width)s, %(height)s);
+ const ctx = canvas.getContext('2d');
%(code)s
- const bitmap = oc.transferToImageBitmap();
+ const bitmap = canvas.transferToImageBitmap();
self.postMessage(bitmap, bitmap);
};
</script>
