diff --git a/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.html b/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.html
index f8a93d687135cf..22dac93dcf8ff1 100644
--- a/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.html
+++ b/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.html
@@ -19,10 +19,9 @@ <h1>2d.filter.canvasFilterObject.blur.exceptions</h1>
 var t = async_test("Test exceptions on CanvasFilter() blur.object");
 _addTest(function(canvas, ctx) {
 
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: null}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {}}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {stdDevation: null}}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {stdDeviation: "foo"}}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur"}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDevation: null}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "foo"}); });
 
 
 });
diff --git a/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.html b/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.html
index ffb0dd2c0391ac..23beed933458f5 100644
--- a/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.html
+++ b/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.html
@@ -13,44 +13,44 @@ <h1>2d.filter.canvasFilterObject.colorMatrix</h1>
 
 <p class="output">Actual output:</p>
 <canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
-<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+
 <ul id="d"></ul>
 <script>
 var t = async_test("Test the functionality of ColorMatrix filters in CanvasFilter objects");
 _addTest(function(canvas, ctx) {
 
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: undefined}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: "foo"}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: null}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: [1, 2, 3]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: undefined}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: "foo"}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: null}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}); });
 ctx.fillStyle = "#f00";
-ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 0}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 0});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 255,0,0,255, "10,10", "255,0,0,255", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 90}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 90});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 0,91,0,255, "10,10", "0,91,0,255", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 180}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 180});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 0,109,109,255, "10,10", "0,109,109,255", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 270}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 270});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 109,18,255,255, "10,10", "109,18,255,255", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "saturate", values: 0.5}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "saturate", values: 0.5});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 155,27,27,255, "10,10", "155,27,27,255", 2);
 ctx.clearRect(0, 0, 100, 50);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "luminanceToAlpha"}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "luminanceToAlpha"});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 0,0,0,54, "10,10", "0,0,0,54", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {values: [
+ctx.filter = new CanvasFilter({filter: "colorMatrix", values: [
         0, 0, 0, 0, 0,
         1, 1, 1, 1, 0,
         0, 0, 0, 0, 0,
         0, 0, 0, 1, 0
-]}});
+]});
 ctx.fillRect(0, 0, 50, 25);
 ctx.fillStyle = "#0f0";
 ctx.fillRect(50, 0, 50, 25);
diff --git a/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.html b/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.html
index 953b83fd205ff4..52875f374dc687 100644
--- a/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.html
+++ b/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.html
@@ -40,11 +40,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.discrete</h1>
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "discrete", tableValues: tableValuesR},
     funcG: {type: "discrete", tableValues: tableValuesG},
     funcB: {type: "discrete", tableValues: tableValuesB},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.html b/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.html
index 9ef769f37060ec..7ded8587212350 100644
--- a/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.html
+++ b/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.html
@@ -31,11 +31,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.gamma</h1>
 const amplitudes = [2, 1.1, 0.5];
 const exponents = [5, 3, 1];
 const offsets = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "gamma", amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
     funcG: {type: "gamma", amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
     funcB: {type: "gamma", amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.html b/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.html
index ab234cdcc1ba93..5f5229c2f421f7 100644
--- a/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.html
+++ b/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.html
@@ -19,11 +19,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.identity</h1>
 var t = async_test("Test pixels on CanvasFilter() componentTransfer with identity type");
 _addTest(function(canvas, ctx) {
 
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "identity"},
     funcG: {type: "identity"},
     funcB: {type: "identity"},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.html b/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.html
index 6c17b58c54e5f9..2ce24aaae023c9 100644
--- a/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.html
+++ b/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.html
@@ -30,11 +30,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.linear</h1>
 
 const slopes = [0.5, 1.2, -0.2];
 const intercepts = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "linear", slope: slopes[0], intercept: intercepts[0]},
     funcG: {type: "linear", slope: slopes[1], intercept: intercepts[1]},
     funcB: {type: "linear", slope: slopes[2], intercept: intercepts[2]},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.html b/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.html
index 6e41f3f7154ff6..d6bdf5e7a4caa0 100644
--- a/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.html
+++ b/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.html
@@ -40,11 +40,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.table</h1>
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "table", tableValues: tableValuesR},
     funcG: {type: "table", tableValues: tableValuesG},
     funcB: {type: "table", tableValues: tableValuesB},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
@@ -60,6 +60,7 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.table</h1>
     ctx.fillRect(0, 0, 10, 10);
     _assertPixelApprox(canvas, 5, 5, outputColor[0],outputColor[1],outputColor[2],255, "5,5", `${outputColor[0]},${outputColor[1]},${outputColor[2]}`, 2);
 }
+t.done()
 
 
 });
diff --git a/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.html b/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.html
index 8760f6a0a93126..2183a7700fde3d 100644
--- a/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.html
+++ b/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.html
@@ -19,18 +19,17 @@ <h1>2d.filter.canvasFilterObject.convolveMatrix.exceptions</h1>
 var t = async_test("Test exceptions on CanvasFilter() convolveMatrix");
 _addTest(function(canvas, ctx) {
 
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: null}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {divisor: 2}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: null}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: 1}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], [0]]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, "a"], [0]]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], 0]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], [0, Infinity]]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: []}}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix"}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", divisor: 2}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: null}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: 1}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, "a"], [0]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], 0]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0, Infinity]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: []}); });
 // This should not throw an error
-ctx.filter = new CanvasFilter({convolveMatrix: {kernelMatrix: [[]]}});
+ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[]]});
 
 
 });
diff --git a/html/canvas/element/filters/2d.filter.canvasFilterObject.html b/html/canvas/element/filters/2d.filter.canvasFilterObject.html
index c4a0838d4fa647..771bbfecf9f2e2 100644
--- a/html/canvas/element/filters/2d.filter.canvasFilterObject.html
+++ b/html/canvas/element/filters/2d.filter.canvasFilterObject.html
@@ -22,9 +22,12 @@ <h1>2d.filter.canvasFilterObject</h1>
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
 ctx.filter = 'blur(5px)';
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
-ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
-ctx.filter = new CanvasFilter([{blur: {stdDeviation: 5}}, {blur: {stdDeviation: 10}}]);
+ctx.filter = new CanvasFilter([
+    {filter: "gaussianBlur", stdDeviation: 5},
+    {filter: "gaussianBlur", stdDeviation: 10}
+]);
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 var canvas2 = document.createElement('canvas');
 var ctx2 = canvas2.getContext('2d');
@@ -34,7 +37,7 @@ <h1>2d.filter.canvasFilterObject</h1>
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
 ctx.filter = 'none';
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
-ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
 ctx.filter = "this string is not a filter and should do nothing";
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 
diff --git a/html/canvas/element/manual/filters/canvas-filter-object-blur.html b/html/canvas/element/manual/filters/canvas-filter-object-blur.html
index b95712bf3a64ec..957d73de2fcb64 100644
--- a/html/canvas/element/manual/filters/canvas-filter-object-blur.html
+++ b/html/canvas/element/manual/filters/canvas-filter-object-blur.html
@@ -7,14 +7,15 @@
 <script>
   var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
-  ctx.filter = new CanvasFilter({blur: {stdDeviation: 2}});
+  ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 2});
   ctx.fillStyle = 'yellow';
   ctx.fillRect(10,10,100,100);
-  ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+  ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
   ctx.fillStyle = 'magenta';
   ctx.fillRect(120, 10, 100, 100);
-  ctx.filter = new CanvasFilter([{
-    blur: {stdDeviation: 5}}, {blur: {stdDeviation: 10}}]);
+  ctx.filter = new CanvasFilter([
+    {filter: "gaussianBlur", stdDeviation: 5},
+    {filter: "gaussianBlur", stdDeviation: 10}]);
   ctx.fillStyle = 'cyan';
   ctx.fillRect(10, 120, 100, 100);
   ctx.filter = 'none';
diff --git a/html/canvas/element/manual/filters/canvas-filter-object-component-transfer.html b/html/canvas/element/manual/filters/canvas-filter-object-component-transfer.html
index 30dff089a6ae2c..76da185d1361f0 100644
--- a/html/canvas/element/manual/filters/canvas-filter-object-component-transfer.html
+++ b/html/canvas/element/manual/filters/canvas-filter-object-component-transfer.html
@@ -14,44 +14,49 @@
   grad.addColorStop(1, "#000");
   ctx.fillStyle = grad;
 
-  const identityFilter = new CanvasFilter({componentTransfer:{
+  const identityFilter = new CanvasFilter({
+    filter: "componentTransfer",
     funcR: {type: "identity"},
     funcG: {type: "identity"},
     funcB: {type: "identity"},
     funcA: {type: "identity"},
-  }});
+  });
   ctx.filter = identityFilter;
   ctx.fillRect(10, 10, 480, 10);
 
-  const tableFilter = new CanvasFilter({componentTransfer: {
+  const tableFilter = new CanvasFilter({
+    filter: "componentTransfer",
     funcR: {type: "table", tableValues: [0, 2, 0.5, 1]},
     funcG: {type: "table", tableValues: [1, -1, 5, 0]},
     funcB: {type: "table", tableValues: [0, 1, 1, 0]},
-  }});
+  });
   ctx.filter = tableFilter;
   ctx.fillRect(10, 30, 480, 10);
 
-  const discreteFilter = new CanvasFilter({componentTransfer: {
+  const discreteFilter = new CanvasFilter({
+    filter: "componentTransfer",
     funcR: {type: "discrete", tableValues: [0, 2, 0.5, 1]},
     funcG: {type: "discrete", tableValues: [1, -1, 5, 0]},
     funcB: {type: "discrete", tableValues: [0, 1, 1, 0]},
-  }});
+  });
   ctx.filter = discreteFilter;
   ctx.fillRect(10, 50, 480, 10);
 
-  const linearFilter = new CanvasFilter({componentTransfer: {
+  const linearFilter = new CanvasFilter({
+    filter: "componentTransfer",
     funcR: {type: "linear", slope: 0.5, intercept: 0.25},
     funcG: {type: "linear", slope: 1.5, intercept: 0},
     funcB: {type: "linear", slope: -0.5, intercept: 0.5},
-  }});
+  });
   ctx.filter = linearFilter;
   ctx.fillRect(10, 70, 480, 10);
 
-  const gammaFilter = new CanvasFilter({componentTransfer: {
+  const gammaFilter = new CanvasFilter({
+    filter: "componentTransfer",
     funcR: {type: "gamma", amplitude: 2, exponent: 5, offset: -0.5},
     funcG: {type: "gamma", amplitude: 0.9, exponent: 3, offset: 0.3},
     funcB: {type: "gamma", amplitude: 1.1, exponent: 1, offset: 0.1},
-  }});
+  });
   ctx.filter = gammaFilter;
   ctx.fillRect(10, 90, 480, 10);
 </script>
diff --git a/html/canvas/element/manual/filters/canvas-filter-object-convolve-matrix.html b/html/canvas/element/manual/filters/canvas-filter-object-convolve-matrix.html
index 157deec7a16031..c02f77b7f91873 100644
--- a/html/canvas/element/manual/filters/canvas-filter-object-convolve-matrix.html
+++ b/html/canvas/element/manual/filters/canvas-filter-object-convolve-matrix.html
@@ -17,8 +17,9 @@
     [0, 0, -3],
   ];
 
-  options = Object.assign(options, {kernelMatrix: KERNEL_MATRIX});
-  return new CanvasFilter({convolveMatrix: options});
+  options = Object.assign(options, {
+    kernelMatrix: KERNEL_MATRIX, filter: "convolveMatrix"});
+  return new CanvasFilter(options);
 }
 
 const test_cases = [
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.html b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.html
index 6ca962c7f02772..c047903e6e07ec 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.html
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.html
@@ -20,10 +20,9 @@ <h1>2d.filter.canvasFilterObject.blur.exceptions</h1>
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: null}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {}}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {stdDevation: null}}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {stdDeviation: "foo"}}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur"}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDevation: null}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "foo"}); });
 t.done();
 
 });
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.worker.js b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.worker.js
index 276c7b23c5f59a..1f44c002ac721d 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.worker.js
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.worker.js
@@ -16,10 +16,9 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: null}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {}}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {stdDevation: null}}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {stdDeviation: "foo"}}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur"}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDevation: null}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "foo"}); });
 t.done();
 
 });
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.html b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.html
index e11013e25b8a58..ed02c4d490c809 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.html
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.html
@@ -20,38 +20,38 @@ <h1>2d.filter.canvasFilterObject.colorMatrix</h1>
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: undefined}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: "foo"}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: null}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: [1, 2, 3]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: undefined}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: "foo"}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: null}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}); });
 ctx.fillStyle = "#f00";
-ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 0}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 0});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(offscreenCanvas, 10,10, 255,0,0,255, "10,10", "255,0,0,255", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 90}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 90});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(offscreenCanvas, 10,10, 0,91,0,255, "10,10", "0,91,0,255", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 180}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 180});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(offscreenCanvas, 10,10, 0,109,109,255, "10,10", "0,109,109,255", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 270}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 270});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(offscreenCanvas, 10,10, 109,18,255,255, "10,10", "109,18,255,255", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "saturate", values: 0.5}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "saturate", values: 0.5});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(offscreenCanvas, 10,10, 155,27,27,255, "10,10", "155,27,27,255", 2);
 ctx.clearRect(0, 0, 100, 50);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "luminanceToAlpha"}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "luminanceToAlpha"});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(offscreenCanvas, 10,10, 0,0,0,54, "10,10", "0,0,0,54", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {values: [
+ctx.filter = new CanvasFilter({filter: "colorMatrix", values: [
         0, 0, 0, 0, 0,
         1, 1, 1, 1, 0,
         0, 0, 0, 0, 0,
         0, 0, 0, 1, 0
-]}});
+]});
 ctx.fillRect(0, 0, 50, 25);
 ctx.fillStyle = "#0f0";
 ctx.fillRect(50, 0, 50, 25);
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.worker.js b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.worker.js
index 3b4959d44f1ea4..4e839f93b59f1f 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.worker.js
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.worker.js
@@ -16,38 +16,38 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: undefined}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: "foo"}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: null}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: [1, 2, 3]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: undefined}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: "foo"}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: null}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}); });
 ctx.fillStyle = "#f00";
-ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 0}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 0});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(offscreenCanvas, 10,10, 255,0,0,255, "10,10", "255,0,0,255", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 90}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 90});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(offscreenCanvas, 10,10, 0,91,0,255, "10,10", "0,91,0,255", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 180}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 180});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(offscreenCanvas, 10,10, 0,109,109,255, "10,10", "0,109,109,255", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 270}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 270});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(offscreenCanvas, 10,10, 109,18,255,255, "10,10", "109,18,255,255", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "saturate", values: 0.5}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "saturate", values: 0.5});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(offscreenCanvas, 10,10, 155,27,27,255, "10,10", "155,27,27,255", 2);
 ctx.clearRect(0, 0, 100, 50);
-ctx.filter = new CanvasFilter({colorMatrix: {type: "luminanceToAlpha"}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "luminanceToAlpha"});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(offscreenCanvas, 10,10, 0,0,0,54, "10,10", "0,0,0,54", 2);
-ctx.filter = new CanvasFilter({colorMatrix: {values: [
+ctx.filter = new CanvasFilter({filter: "colorMatrix", values: [
         0, 0, 0, 0, 0,
         1, 1, 1, 1, 0,
         0, 0, 0, 0, 0,
         0, 0, 0, 1, 0
-]}});
+]});
 ctx.fillRect(0, 0, 50, 25);
 ctx.fillStyle = "#0f0";
 ctx.fillRect(50, 0, 50, 25);
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.html b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.html
index e4e1d944d5063d..d77d49c503f9ff 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.html
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.html
@@ -41,11 +41,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.discrete</h1>
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "discrete", tableValues: tableValuesR},
     funcG: {type: "discrete", tableValues: tableValuesG},
     funcB: {type: "discrete", tableValues: tableValuesB},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.worker.js b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.worker.js
index 75b57ff5dbdc94..335dd48c8c35eb 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.worker.js
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.worker.js
@@ -37,11 +37,11 @@ function getColor(inputColor, tableValues) {
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "discrete", tableValues: tableValuesR},
     funcG: {type: "discrete", tableValues: tableValuesG},
     funcB: {type: "discrete", tableValues: tableValuesB},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.html b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.html
index 40354ee3375efa..ec7c184b24dcde 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.html
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.html
@@ -32,11 +32,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.gamma</h1>
 const amplitudes = [2, 1.1, 0.5];
 const exponents = [5, 3, 1];
 const offsets = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "gamma", amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
     funcG: {type: "gamma", amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
     funcB: {type: "gamma", amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.worker.js b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.worker.js
index 27f3a689936304..ae9df2467bc3b1 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.worker.js
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.worker.js
@@ -28,11 +28,11 @@ function getColor(inputColor, amplitude, exponent, offset) {
 const amplitudes = [2, 1.1, 0.5];
 const exponents = [5, 3, 1];
 const offsets = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "gamma", amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
     funcG: {type: "gamma", amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
     funcB: {type: "gamma", amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.html b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.html
index f4c9cddefb1d8a..dd60a37934a741 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.html
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.html
@@ -20,11 +20,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.identity</h1>
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "identity"},
     funcG: {type: "identity"},
     funcB: {type: "identity"},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.worker.js b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.worker.js
index 4a051aa504f0f2..2997cf318c36a7 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.worker.js
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.worker.js
@@ -16,11 +16,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "identity"},
     funcG: {type: "identity"},
     funcB: {type: "identity"},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.html b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.html
index 79b02436e5e782..a42819e8e2ae77 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.html
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.html
@@ -31,11 +31,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.linear</h1>
 
 const slopes = [0.5, 1.2, -0.2];
 const intercepts = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "linear", slope: slopes[0], intercept: intercepts[0]},
     funcG: {type: "linear", slope: slopes[1], intercept: intercepts[1]},
     funcB: {type: "linear", slope: slopes[2], intercept: intercepts[2]},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.worker.js b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.worker.js
index 97787d7e9831b7..f1caad3dd6546e 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.worker.js
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.worker.js
@@ -27,11 +27,11 @@ function getColor(inputColor, slopes, intercepts) {
 
 const slopes = [0.5, 1.2, -0.2];
 const intercepts = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "linear", slope: slopes[0], intercept: intercepts[0]},
     funcG: {type: "linear", slope: slopes[1], intercept: intercepts[1]},
     funcB: {type: "linear", slope: slopes[2], intercept: intercepts[2]},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.html b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.html
index b81a3f3f2b30b5..4c355208e0d9dd 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.html
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.html
@@ -41,11 +41,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.table</h1>
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "table", tableValues: tableValuesR},
     funcG: {type: "table", tableValues: tableValuesG},
     funcB: {type: "table", tableValues: tableValuesB},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.worker.js b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.worker.js
index 5348c750806697..cb8d2141414969 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.worker.js
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.worker.js
@@ -37,11 +37,11 @@ function getColor(inputColor, tableValues) {
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "table", tableValues: tableValuesR},
     funcG: {type: "table", tableValues: tableValuesG},
     funcB: {type: "table", tableValues: tableValuesB},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.html b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.html
index 6eda8073e1128f..c70fd8a3ad2d80 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.html
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.html
@@ -20,18 +20,17 @@ <h1>2d.filter.canvasFilterObject.convolveMatrix.exceptions</h1>
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: null}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {divisor: 2}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: null}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: 1}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], [0]]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, "a"], [0]]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], 0]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], [0, Infinity]]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: []}}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix"}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", divisor: 2}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: null}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: 1}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, "a"], [0]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], 0]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0, Infinity]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: []}); });
 // This should not throw an error
-ctx.filter = new CanvasFilter({convolveMatrix: {kernelMatrix: [[]]}});
+ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[]]});
 t.done();
 
 });
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.worker.js b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.worker.js
index 7958946a31e8eb..54cf13b3a912fb 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.worker.js
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.worker.js
@@ -16,18 +16,17 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: null}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {divisor: 2}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: null}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: 1}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], [0]]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, "a"], [0]]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], 0]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], [0, Infinity]]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: []}}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix"}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", divisor: 2}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: null}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: 1}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, "a"], [0]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], 0]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0, Infinity]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: []}); });
 // This should not throw an error
-ctx.filter = new CanvasFilter({convolveMatrix: {kernelMatrix: [[]]}});
+ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[]]});
 t.done();
 
 });
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.html b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.html
index 8e2e2d8ba95efd..1536cca274b20e 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.html
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.html
@@ -23,9 +23,12 @@ <h1>2d.filter.canvasFilterObject</h1>
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
 ctx.filter = 'blur(5px)';
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
-ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
-ctx.filter = new CanvasFilter([{blur: {stdDeviation: 5}}, {blur: {stdDeviation: 10}}]);
+ctx.filter = new CanvasFilter([
+    {filter: "gaussianBlur", stdDeviation: 5},
+    {filter: "gaussianBlur", stdDeviation: 10}
+]);
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 var canvas2 = new OffscreenCanvas(100, 50);
 var ctx2 = canvas2.getContext('2d');
@@ -35,7 +38,7 @@ <h1>2d.filter.canvasFilterObject</h1>
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
 ctx.filter = 'none';
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
-ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
 ctx.filter = "this string is not a filter and should do nothing";
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 t.done();
diff --git a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.worker.js b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.worker.js
index d07c32e0eb93dd..94f82ba36542fa 100644
--- a/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.worker.js
+++ b/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.worker.js
@@ -19,9 +19,12 @@ var ctx = offscreenCanvas.getContext('2d');
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
 ctx.filter = 'blur(5px)';
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
-ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
-ctx.filter = new CanvasFilter([{blur: {stdDeviation: 5}}, {blur: {stdDeviation: 10}}]);
+ctx.filter = new CanvasFilter([
+    {filter: "gaussianBlur", stdDeviation: 5},
+    {filter: "gaussianBlur", stdDeviation: 10}
+]);
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 var canvas2 = new OffscreenCanvas(100, 50);
 var ctx2 = canvas2.getContext('2d');
@@ -31,7 +34,7 @@ ctx.filter = 'blur(5px)';
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
 ctx.filter = 'none';
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
-ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
 ctx.filter = "this string is not a filter and should do nothing";
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 t.done();
diff --git a/html/canvas/tools/yaml/element/filters.yaml b/html/canvas/tools/yaml/element/filters.yaml
index 3ba9bd6ec950f7..420af371f5fe14 100644
--- a/html/canvas/tools/yaml/element/filters.yaml
+++ b/html/canvas/tools/yaml/element/filters.yaml
@@ -38,9 +38,12 @@
     @assert ctx.filter == 'none';
     ctx.filter = 'blur(5px)';
     @assert ctx.filter == 'blur(5px)';
-    ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+    ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
     @assert ctx.filter.toString() == '[object CanvasFilter]';
-    ctx.filter = new CanvasFilter([{blur: {stdDeviation: 5}}, {blur: {stdDeviation: 10}}]);
+    ctx.filter = new CanvasFilter([
+        {filter: "gaussianBlur", stdDeviation: 5},
+        {filter: "gaussianBlur", stdDeviation: 10}
+    ]);
     @assert ctx.filter.toString() == '[object CanvasFilter]';
     var canvas2 = document.createElement('canvas');
     var ctx2 = canvas2.getContext('2d');
@@ -50,53 +53,52 @@
     @assert ctx.filter == 'blur(5px)';
     ctx.filter = 'none';
     @assert ctx.filter == 'none';
-    ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+    ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
     ctx.filter = "this string is not a filter and should do nothing";
     @assert ctx.filter.toString() == '[object CanvasFilter]';
 
 - name: 2d.filter.canvasFilterObject.blur.exceptions
   desc: Test exceptions on CanvasFilter() blur.object
   code: |
-    @assert throws TypeError ctx.filter = new CanvasFilter({blur: null});
-    @assert throws TypeError ctx.filter = new CanvasFilter({blur: {}});
-    @assert throws TypeError ctx.filter = new CanvasFilter({blur: {stdDevation: null}});
-    @assert throws TypeError ctx.filter = new CanvasFilter({blur: {stdDeviation: "foo"}});
+    @assert throws TypeError ctx.filter = new CanvasFilter({filter: "gaussianBlur"});
+    @assert throws TypeError ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDevation: null});
+    @assert throws TypeError ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "foo"});
 
 - name: 2d.filter.canvasFilterObject.colorMatrix
   desc: Test the functionality of ColorMatrix filters in CanvasFilter objects
   code: |
-    @assert throws TypeError new CanvasFilter({colorMatrix: {values: undefined}});
-    @assert throws TypeError new CanvasFilter({colorMatrix: {values: "foo"}});
-    @assert throws TypeError new CanvasFilter({colorMatrix: {values: null}});
-    @assert throws TypeError new CanvasFilter({colorMatrix: {values: [1, 2, 3]}});
-    @assert throws TypeError new CanvasFilter({colorMatrix: {values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]}});
-    @assert throws TypeError new CanvasFilter({colorMatrix: {values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}});
+    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: undefined});
+    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: "foo"});
+    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: null});
+    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3]});
+    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]});
+    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]});
     ctx.fillStyle = "#f00";
-    ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 0}});
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 0});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 255,0,0,255;
-    ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 90}});
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 90});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 0,91,0,255;
-    ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 180}});
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 180});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 0,109,109,255;
-    ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 270}});
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 270});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 109,18,255,255;
-    ctx.filter = new CanvasFilter({colorMatrix: {type: "saturate", values: 0.5}});
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "saturate", values: 0.5});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 155,27,27,255;
     ctx.clearRect(0, 0, 100, 50);
-    ctx.filter = new CanvasFilter({colorMatrix: {type: "luminanceToAlpha"}});
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "luminanceToAlpha"});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 0,0,0,54;
-    ctx.filter = new CanvasFilter({colorMatrix: {values: [
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", values: [
             0, 0, 0, 0, 0,
             1, 1, 1, 1, 0,
             0, 0, 0, 0, 0,
             0, 0, 0, 1, 0
-    ]}});
+    ]});
     ctx.fillRect(0, 0, 50, 25);
     ctx.fillStyle = "#0f0";
     ctx.fillRect(50, 0, 50, 25);
@@ -108,23 +110,21 @@
     @assert pixel 60,10 ==~ 0,255,0,255;
     @assert pixel 10,30 ==~ 0,255,0,255;
     @assert pixel 60,30 ==~ 0,255,0,255;
-  expected: green
 
 - name: 2d.filter.canvasFilterObject.convolveMatrix.exceptions
   desc: Test exceptions on CanvasFilter() convolveMatrix
   code: |
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: null});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {divisor: 2}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: null}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: 1}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], [0]]}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, "a"], [0]]}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], 0]}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], [0, Infinity]]}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: []}});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix"});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", divisor: 2});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: null});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: 1});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0]]});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, "a"], [0]]});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], 0]});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0, Infinity]]});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: []});
     // This should not throw an error
-    ctx.filter = new CanvasFilter({convolveMatrix: {kernelMatrix: [[]]}});
+    ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[]]});
 
 - name: 2d.filter.canvasFilterObject.componentTransfer.linear
   desc: Test pixels on CanvasFilter() componentTransfer with linear type
@@ -140,11 +140,11 @@
 
     const slopes = [0.5, 1.2, -0.2];
     const intercepts = [0.25, 0, 0.5];
-    ctx.filter = new CanvasFilter({componentTransfer: {
+    ctx.filter = new CanvasFilter({filter: "componentTransfer",
         funcR: {type: "linear", slope: slopes[0], intercept: intercepts[0]},
         funcG: {type: "linear", slope: slopes[1], intercept: intercepts[1]},
         funcB: {type: "linear", slope: slopes[2], intercept: intercepts[2]},
-    }});
+    });
 
     const inputColors = [
         [255, 255, 255],
@@ -164,11 +164,11 @@
 - name: 2d.filter.canvasFilterObject.componentTransfer.identity
   desc: Test pixels on CanvasFilter() componentTransfer with identity type
   code: |
-    ctx.filter = new CanvasFilter({componentTransfer: {
+    ctx.filter = new CanvasFilter({filter: "componentTransfer",
         funcR: {type: "identity"},
         funcG: {type: "identity"},
         funcB: {type: "identity"},
-    }});
+    });
 
     const inputColors = [
         [255, 255, 255],
@@ -199,11 +199,11 @@
     const amplitudes = [2, 1.1, 0.5];
     const exponents = [5, 3, 1];
     const offsets = [0.25, 0, 0.5];
-    ctx.filter = new CanvasFilter({componentTransfer: {
+    ctx.filter = new CanvasFilter({filter: "componentTransfer",
         funcR: {type: "gamma", amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
         funcG: {type: "gamma", amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
         funcB: {type: "gamma", amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
-    }});
+    });
 
     const inputColors = [
         [255, 255, 255],
@@ -244,11 +244,11 @@
     tableValuesR = [0, 0, 1, 1];
     tableValuesG = [2, 0, 0.5, 3];
     tableValuesB = [1, -1, 5, 0];
-    ctx.filter = new CanvasFilter({componentTransfer: {
+    ctx.filter = new CanvasFilter({filter: "componentTransfer",
         funcR: {type: "table", tableValues: tableValuesR},
         funcG: {type: "table", tableValues: tableValuesG},
         funcB: {type: "table", tableValues: tableValuesB},
-    }});
+    });
 
     const inputColors = [
         [255, 255, 255],
@@ -264,6 +264,7 @@
         ctx.fillRect(0, 0, 10, 10);
         _assertPixelApprox(canvas, 5, 5, outputColor[0],outputColor[1],outputColor[2],255, "5,5", `${outputColor[0]},${outputColor[1]},${outputColor[2]}`, 2);
     }
+    t.done()
 
 - name: 2d.filter.canvasFilterObject.componentTransfer.discrete
   desc: Test pixels on CanvasFilter() componentTransfer with discrete type
@@ -289,11 +290,11 @@
     tableValuesR = [0, 0, 1, 1];
     tableValuesG = [2, 0, 0.5, 3];
     tableValuesB = [1, -1, 5, 0];
-    ctx.filter = new CanvasFilter({componentTransfer: {
+    ctx.filter = new CanvasFilter({filter: "componentTransfer",
         funcR: {type: "discrete", tableValues: tableValuesR},
         funcG: {type: "discrete", tableValues: tableValuesG},
         funcB: {type: "discrete", tableValues: tableValuesB},
-    }});
+    });
 
     const inputColors = [
         [255, 255, 255],
diff --git a/html/canvas/tools/yaml/offscreen/filters.yaml b/html/canvas/tools/yaml/offscreen/filters.yaml
index d51b7f88fff398..e715c95258cd13 100644
--- a/html/canvas/tools/yaml/offscreen/filters.yaml
+++ b/html/canvas/tools/yaml/offscreen/filters.yaml
@@ -4,9 +4,12 @@
     @assert ctx.filter == 'none';
     ctx.filter = 'blur(5px)';
     @assert ctx.filter == 'blur(5px)';
-    ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+    ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
     @assert ctx.filter.toString() == '[object CanvasFilter]';
-    ctx.filter = new CanvasFilter([{blur: {stdDeviation: 5}}, {blur: {stdDeviation: 10}}]);
+    ctx.filter = new CanvasFilter([
+        {filter: "gaussianBlur", stdDeviation: 5},
+        {filter: "gaussianBlur", stdDeviation: 10}
+    ]);
     @assert ctx.filter.toString() == '[object CanvasFilter]';
     var canvas2 = new OffscreenCanvas(100, 50);
     var ctx2 = canvas2.getContext('2d');
@@ -16,7 +19,7 @@
     @assert ctx.filter == 'blur(5px)';
     ctx.filter = 'none';
     @assert ctx.filter == 'none';
-    ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+    ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
     ctx.filter = "this string is not a filter and should do nothing";
     @assert ctx.filter.toString() == '[object CanvasFilter]';
     t.done();
@@ -24,47 +27,46 @@
 - name: 2d.filter.canvasFilterObject.blur.exceptions
   desc: Test exceptions on CanvasFilter() blur.object
   code: |
-    @assert throws TypeError ctx.filter = new CanvasFilter({blur: null});
-    @assert throws TypeError ctx.filter = new CanvasFilter({blur: {}});
-    @assert throws TypeError ctx.filter = new CanvasFilter({blur: {stdDevation: null}});
-    @assert throws TypeError ctx.filter = new CanvasFilter({blur: {stdDeviation: "foo"}});
+    @assert throws TypeError ctx.filter = new CanvasFilter({filter: "gaussianBlur"});
+    @assert throws TypeError ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDevation: null});
+    @assert throws TypeError ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "foo"});
     t.done();
 
 - name: 2d.filter.canvasFilterObject.colorMatrix
   desc: Test the functionality of ColorMatrix filters in CanvasFilter objects
   code: |
-    @assert throws TypeError new CanvasFilter({colorMatrix: {values: undefined}});
-    @assert throws TypeError new CanvasFilter({colorMatrix: {values: "foo"}});
-    @assert throws TypeError new CanvasFilter({colorMatrix: {values: null}});
-    @assert throws TypeError new CanvasFilter({colorMatrix: {values: [1, 2, 3]}});
-    @assert throws TypeError new CanvasFilter({colorMatrix: {values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]}});
-    @assert throws TypeError new CanvasFilter({colorMatrix: {values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}});
+    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: undefined});
+    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: "foo"});
+    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: null});
+    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3]});
+    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]});
+    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]});
     ctx.fillStyle = "#f00";
-    ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 0}});
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 0});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 255,0,0,255;
-    ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 90}});
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 90});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 0,91,0,255;
-    ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 180}});
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 180});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 0,109,109,255;
-    ctx.filter = new CanvasFilter({colorMatrix: {type: "hueRotate", values: 270}});
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 270});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 109,18,255,255;
-    ctx.filter = new CanvasFilter({colorMatrix: {type: "saturate", values: 0.5}});
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "saturate", values: 0.5});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 155,27,27,255;
     ctx.clearRect(0, 0, 100, 50);
-    ctx.filter = new CanvasFilter({colorMatrix: {type: "luminanceToAlpha"}});
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "luminanceToAlpha"});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 0,0,0,54;
-    ctx.filter = new CanvasFilter({colorMatrix: {values: [
+    ctx.filter = new CanvasFilter({filter: "colorMatrix", values: [
             0, 0, 0, 0, 0,
             1, 1, 1, 1, 0,
             0, 0, 0, 0, 0,
             0, 0, 0, 1, 0
-    ]}});
+    ]});
     ctx.fillRect(0, 0, 50, 25);
     ctx.fillStyle = "#0f0";
     ctx.fillRect(50, 0, 50, 25);
@@ -81,18 +83,17 @@
 - name: 2d.filter.canvasFilterObject.convolveMatrix.exceptions
   desc: Test exceptions on CanvasFilter() convolveMatrix
   code: |
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: null});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {divisor: 2}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: null}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: 1}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], [0]]}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, "a"], [0]]}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], 0]}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], [0, Infinity]]}});
-    @assert throws TypeError new CanvasFilter({convolveMatrix: {kernelMatrix: []}});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix"});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", divisor: 2});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: null});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: 1});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0]]});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, "a"], [0]]});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], 0]});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0, Infinity]]});
+    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: []});
     // This should not throw an error
-    ctx.filter = new CanvasFilter({convolveMatrix: {kernelMatrix: [[]]}});
+    ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[]]});
     t.done();
 
 - name: 2d.filter.canvasFilterObject.componentTransfer.linear
@@ -109,11 +110,11 @@
 
     const slopes = [0.5, 1.2, -0.2];
     const intercepts = [0.25, 0, 0.5];
-    ctx.filter = new CanvasFilter({componentTransfer: {
+    ctx.filter = new CanvasFilter({filter: "componentTransfer",
         funcR: {type: "linear", slope: slopes[0], intercept: intercepts[0]},
         funcG: {type: "linear", slope: slopes[1], intercept: intercepts[1]},
         funcB: {type: "linear", slope: slopes[2], intercept: intercepts[2]},
-    }});
+    });
 
     const inputColors = [
         [255, 255, 255],
@@ -134,11 +135,11 @@
 - name: 2d.filter.canvasFilterObject.componentTransfer.identity
   desc: Test pixels on CanvasFilter() componentTransfer with identity type
   code: |
-    ctx.filter = new CanvasFilter({componentTransfer: {
+    ctx.filter = new CanvasFilter({filter: "componentTransfer",
         funcR: {type: "identity"},
         funcG: {type: "identity"},
         funcB: {type: "identity"},
-    }});
+    });
 
     const inputColors = [
         [255, 255, 255],
@@ -170,11 +171,11 @@
     const amplitudes = [2, 1.1, 0.5];
     const exponents = [5, 3, 1];
     const offsets = [0.25, 0, 0.5];
-    ctx.filter = new CanvasFilter({componentTransfer: {
+    ctx.filter = new CanvasFilter({filter: "componentTransfer",
         funcR: {type: "gamma", amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
         funcG: {type: "gamma", amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
         funcB: {type: "gamma", amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
-    }});
+    });
 
     const inputColors = [
         [255, 255, 255],
@@ -216,11 +217,11 @@
     tableValuesR = [0, 0, 1, 1];
     tableValuesG = [2, 0, 0.5, 3];
     tableValuesB = [1, -1, 5, 0];
-    ctx.filter = new CanvasFilter({componentTransfer: {
+    ctx.filter = new CanvasFilter({filter: "componentTransfer",
         funcR: {type: "table", tableValues: tableValuesR},
         funcG: {type: "table", tableValues: tableValuesG},
         funcB: {type: "table", tableValues: tableValuesB},
-    }});
+    });
 
     const inputColors = [
         [255, 255, 255],
@@ -262,11 +263,11 @@
     tableValuesR = [0, 0, 1, 1];
     tableValuesG = [2, 0, 0.5, 3];
     tableValuesB = [1, -1, 5, 0];
-    ctx.filter = new CanvasFilter({componentTransfer: {
+    ctx.filter = new CanvasFilter({filter: "componentTransfer",
         funcR: {type: "discrete", tableValues: tableValuesR},
         funcG: {type: "discrete", tableValues: tableValuesG},
         funcB: {type: "discrete", tableValues: tableValuesB},
-    }});
+    });
 
     const inputColors = [
         [255, 255, 255],