diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml
index d346a3ef0f1ea..3b72607517f21 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml
@@ -3575,44 +3575,26 @@ name
.
layer
.
-ctm
-.
-filter
+clip
+-
+inside
desc
:
-Checks
-that
-parent
-transforms
-affect
+Check
+clipping
+set
+inside
+the
layer
-filters
-.
size
:
[
-200
-200
+100
+100
]
code
:
|
-/
-/
-Transforms
-inside
-the
-layer
-should
-not
-apply
-to
-the
-layer
-'
-s
-filter
-.
ctx
.
beginLayer
@@ -3620,57 +3602,57 @@ beginLayer
{
filter
:
-'
-drop
--
-shadow
-(
-5px
-5px
-0px
-grey
-)
-'
+{
+name
+:
+"
+gaussianBlur
+"
+stdDeviation
+:
+12
+}
}
)
;
ctx
.
-translate
+beginPath
(
-30
-90
)
;
ctx
.
-scale
+rect
(
-2
-2
+15
+15
+70
+70
)
;
ctx
.
-rotate
+clip
(
-Math
-.
-PI
-/
-2
)
;
ctx
.
+fillStyle
+=
+'
+blue
+'
+;
+ctx
+.
fillRect
(
--
-30
--
-5
-60
10
+10
+80
+80
)
;
ctx
@@ -3679,49 +3661,69 @@ endLayer
(
)
;
-/
-/
-Transforms
-in
-the
-layer
+reference
+:
+|
+const
+canvas2
+=
+new
+OffscreenCanvas
+(
+200
+200
+)
+;
+const
+ctx2
+=
+canvas2
+.
+getContext
+(
'
-s
-parent
-should
-apply
-to
-the
-layer
+2d
'
-s
-filter
-.
-ctx
+)
+;
+ctx2
.
-translate
+beginPath
(
-80
-90
)
;
-ctx
+ctx2
.
-scale
+rect
(
-2
-2
+15
+15
+70
+70
)
;
-ctx
+ctx2
.
-rotate
+clip
(
-Math
+)
+;
+ctx2
.
-PI
-/
-2
+fillStyle
+=
+'
+blue
+'
+;
+ctx2
+.
+fillRect
+(
+10
+10
+80
+80
)
;
ctx
@@ -3731,30 +3733,26 @@ beginLayer
{
filter
:
-'
-drop
--
-shadow
-(
-5px
-5px
-0px
-grey
-)
-'
+{
+name
+:
+"
+gaussianBlur
+"
+stdDeviation
+:
+12
+}
}
)
;
ctx
.
-fillRect
+drawImage
(
--
-30
--
-5
-60
-10
+canvas2
+0
+0
)
;
ctx
@@ -3763,260 +3761,280 @@ endLayer
(
)
;
-html_reference
-:
-|
-<
-svg
-xmlns
-=
-"
-http
+-
+name
:
-/
-/
-www
+2d
.
-w3
+layer
.
-org
-/
-2000
-/
-svg
-"
-width
-=
-"
-{
-{
+clip
+-
+inside
+-
+and
+-
+outside
+desc
+:
+Check
+clipping
+set
+inside
+and
+outside
+the
+layer
size
+:
[
-0
+100
+100
]
-}
-}
-"
-height
-=
-"
-{
+code
+:
+|
+ctx
+.
+beginPath
+(
+)
+;
+ctx
+.
+rect
+(
+15
+15
+70
+70
+)
+;
+ctx
+.
+clip
+(
+)
+;
+ctx
+.
+beginLayer
+(
{
-size
-[
-1
-]
-}
-}
-"
-color
--
-interpolation
--
-filters
-=
-"
-sRGB
-"
->
-<
-filter
-id
-=
-"
filter
+:
+{
+name
+:
"
-x
-=
-"
--
-100
-%
-"
-y
-=
-"
--
-100
-%
-"
-width
-=
-"
-300
-%
-"
-height
-=
-"
-300
-%
-"
->
-<
-feDropShadow
-dx
-=
-"
-5
-"
-dy
-=
-"
-5
+gaussianBlur
"
stdDeviation
+:
+12
+}
+}
+)
+;
+ctx
+.
+beginPath
+(
+)
+;
+ctx
+.
+rect
+(
+15
+15
+70
+70
+)
+;
+ctx
+.
+clip
+(
+)
+;
+ctx
+.
+fillStyle
=
-"
-0
-"
-flood
--
-color
-=
-"
-grey
-"
-/
->
-<
-/
-filter
->
-<
-g
-filter
-=
-"
-url
+'
+blue
+'
+;
+ctx
+.
+fillRect
(
-#
-filter
+10
+10
+80
+80
)
-"
->
-<
-g
-transform
+;
+ctx
+.
+endLayer
+(
+)
+;
+reference
+:
+|
+const
+canvas2
=
-"
-translate
+new
+OffscreenCanvas
(
-30
-90
+200
+200
)
-scale
+;
+const
+ctx2
+=
+canvas2
+.
+getContext
(
-2
+'
+2d
+'
)
-rotate
+;
+ctx2
+.
+beginPath
(
-90
)
-"
->
-<
+;
+ctx2
+.
rect
-x
-=
-"
--
-30
-"
-y
-=
-"
--
-5
-"
-width
-=
-60
-height
+(
+15
+15
+70
+70
+)
+;
+ctx2
+.
+clip
+(
+)
+;
+ctx2
+.
+fillStyle
=
+'
+blue
+'
+;
+ctx2
+.
+fillRect
+(
10
->
-<
-/
-rect
->
-<
-/
-g
->
-<
-/
-g
->
-<
-g
-transform
+10
+80
+80
+)
+;
+const
+canvas3
=
-"
-translate
+new
+OffscreenCanvas
+(
+200
+200
+)
+;
+const
+ctx3
+=
+canvas3
+.
+getContext
(
-80
-90
+'
+2d
+'
)
-scale
+;
+ctx3
+.
+beginLayer
(
-2
+{
+filter
+:
+{
+name
+:
+"
+gaussianBlur
+"
+stdDeviation
+:
+12
+}
+}
)
-rotate
+;
+ctx3
+.
+drawImage
(
-90
+canvas2
+0
+0
)
-"
->
-<
-g
-filter
-=
-"
-url
+;
+ctx3
+.
+endLayer
(
-#
-filter
)
-"
->
-<
-rect
-x
-=
-"
--
-30
-"
-y
-=
-"
--
-5
-"
-width
-=
-60
-height
-=
-10
->
-<
-/
+;
+ctx
+.
+beginPath
+(
+)
+;
+ctx
+.
rect
->
-<
-/
-g
->
-<
-/
-g
->
-<
-/
-svg
->
+(
+15
+15
+70
+70
+)
+;
+ctx
+.
+clip
+(
+)
+;
+ctx
+.
+drawImage
+(
+canvas3
+0
+0
+)
+;
-
name
:
@@ -4026,8 +4044,6 @@ layer
.
ctm
.
-ctx
--
filter
desc
:
@@ -4035,11 +4051,8 @@ Checks
that
parent
transforms
-don
-'
-t
affect
-context
+layer
filters
.
size
@@ -4051,13 +4064,42 @@ size
code
:
|
+/
+/
+Transforms
+inside
+the
+layer
+should
+not
+apply
+to
+the
+layer
+'
+s
+filter
+.
ctx
.
-fillStyle
-=
+beginLayer
+(
+{
+filter
+:
'
+drop
+-
+shadow
+(
+5px
+5px
+0px
grey
+)
'
+}
+)
;
ctx
.
@@ -4086,44 +4128,6 @@ PI
2
)
;
-/
-/
-The
-transform
-doesn
-'
-t
-apply
-to
-context
-filter
-on
-normal
-draw
-calls
-.
-ctx
-.
-save
-(
-)
-;
-ctx
-.
-filter
-=
-'
-drop
--
-shadow
-(
-10px
-10px
-0px
-red
-)
-'
-;
ctx
.
fillRect
@@ -4138,101 +4142,62 @@ fillRect
;
ctx
.
-restore
+endLayer
(
)
;
/
/
-Likewise
+Transforms
+in
the
-transform
-doesn
+layer
'
-t
+s
+parent
+should
apply
to
-context
-filter
-applied
-on
+the
layer
-.
-ctx
-.
-save
-(
-)
-;
-ctx
-.
-filter
-=
-'
-drop
--
-shadow
-(
-10px
-10px
-0px
-green
-)
-'
-;
-ctx
-.
-beginLayer
-(
-)
-;
-ctx
-.
-fillRect
-(
--
-30
--
-25
-60
-10
-)
-;
+'
+s
+filter
+.
ctx
.
-endLayer
+translate
(
+80
+90
)
;
ctx
.
-restore
+scale
(
+2
+2
)
;
-/
-/
-Filters
-inside
-layers
-aren
-'
-t
-affected
-by
-transform
-either
-.
ctx
.
-beginLayer
+rotate
(
+Math
+.
+PI
+/
+2
)
;
ctx
.
+beginLayer
+(
+{
filter
-=
+:
'
drop
-
@@ -4241,9 +4206,11 @@ shadow
5px
5px
0px
-blue
+grey
)
'
+}
+)
;
ctx
.
@@ -4252,7 +4219,7 @@ fillRect
-
30
-
-45
+5
60
10
)
@@ -4263,117 +4230,260 @@ endLayer
(
)
;
-reference
+html_reference
:
|
-ctx
-.
-fillStyle
+<
+svg
+xmlns
=
-'
-red
-'
-;
-ctx
+"
+http
+:
+/
+/
+www
.
-fillRect
-(
-30
-40
-20
-120
-)
-;
-ctx
+w3
.
-fillStyle
+org
+/
+2000
+/
+svg
+"
+width
=
-'
+"
+{
+{
+size
+[
+0
+]
+}
+}
+"
+height
+=
+"
+{
+{
+size
+[
+1
+]
+}
+}
+"
+color
+-
+interpolation
+-
+filters
+=
+"
+sRGB
+"
+>
+<
+filter
+id
+=
+"
+filter
+"
+x
+=
+"
+-
+100
+%
+"
+y
+=
+"
+-
+100
+%
+"
+width
+=
+"
+300
+%
+"
+height
+=
+"
+300
+%
+"
+>
+<
+feDropShadow
+dx
+=
+"
+5
+"
+dy
+=
+"
+5
+"
+stdDeviation
+=
+"
+0
+"
+flood
+-
+color
+=
+"
grey
-'
-;
-ctx
-.
-fillRect
+"
+/
+>
+<
+/
+filter
+>
+<
+g
+filter
+=
+"
+url
+(
+#
+filter
+)
+"
+>
+<
+g
+transform
+=
+"
+translate
(
-20
30
-20
-120
+90
)
-;
-ctx
-.
-fillStyle
+scale
+(
+2
+)
+rotate
+(
+90
+)
+"
+>
+<
+rect
+x
=
-'
-green
-'
-;
-ctx
-.
-fillRect
+"
+-
+30
+"
+y
+=
+"
+-
+5
+"
+width
+=
+60
+height
+=
+10
+>
+<
+/
+rect
+>
+<
+/
+g
+>
+<
+/
+g
+>
+<
+g
+transform
+=
+"
+translate
(
-70
-40
-20
-120
+80
+90
)
-;
-ctx
-.
-fillStyle
-=
-'
-grey
-'
-;
-ctx
-.
-fillRect
+scale
(
-60
-30
-20
-120
+2
)
-;
-ctx
-.
-fillStyle
-=
-'
-blue
-'
-;
-ctx
-.
-fillRect
+rotate
(
-105
-35
-20
-120
+90
)
-;
-ctx
-.
-fillStyle
+"
+>
+<
+g
+filter
=
-'
-grey
-'
-;
-ctx
-.
-fillRect
+"
+url
(
-100
-30
-20
-120
+#
+filter
)
-;
+"
+>
+<
+rect
+x
+=
+"
+-
+30
+"
+y
+=
+"
+-
+5
+"
+width
+=
+60
+height
+=
+10
+>
+<
+/
+rect
+>
+<
+/
+g
+>
+<
+/
+g
+>
+<
+/
+svg
+>
-
name
:
@@ -4383,22 +4493,21 @@ layer
.
ctm
.
-shadow
--
-in
--
-transformed
+ctx
-
-layer
+filter
desc
:
-Check
-shadows
-inside
-of
-a
-transformed
-layer
+Checks
+that
+parent
+transforms
+don
+'
+t
+affect
+context
+filters
.
size
:
@@ -4411,134 +4520,17 @@ code
|
ctx
.
-translate
-(
-80
-90
-)
-;
-ctx
-.
-scale
-(
-2
-2
-)
-;
-ctx
-.
-rotate
-(
-Math
-.
-PI
-/
-2
-)
-;
-ctx
-.
-beginLayer
-(
-)
-;
-ctx
-.
-shadowOffsetX
-=
-10
-;
-ctx
-.
-shadowOffsetY
-=
-10
-;
-ctx
-.
-shadowColor
-=
-'
-grey
-'
-;
-ctx
-.
-fillRect
-(
--
-30
--
-5
-60
-10
-)
-;
-const
-canvas2
-=
-new
-OffscreenCanvas
-(
-100
-100
-)
-;
-const
-ctx2
-=
-canvas2
-.
-getContext
-(
-'
-2d
-'
-)
-;
-ctx2
-.
fillStyle
=
'
-blue
+grey
'
;
-ctx2
-.
-fillRect
-(
-0
-0
-40
-10
-)
-;
-ctx
-.
-drawImage
-(
-canvas2
--
-30
--
-30
-)
-;
-ctx
-.
-endLayer
-(
-)
-;
-reference
-:
-|
ctx
.
translate
(
-80
+30
90
)
;
@@ -4561,24 +4553,42 @@ PI
2
)
;
-ctx
+/
+/
+The
+transform
+doesn
+'
+t
+apply
+to
+context
+filter
+on
+normal
+draw
+calls
.
-shadowOffsetX
-=
-10
-;
ctx
.
-shadowOffsetY
-=
-10
+save
+(
+)
;
ctx
.
-shadowColor
+filter
=
'
-grey
+drop
+-
+shadow
+(
+10px
+10px
+0px
+red
+)
'
;
ctx
@@ -4593,87 +4603,49 @@ fillRect
10
)
;
-const
-canvas2
-=
-new
-OffscreenCanvas
-(
-100
-100
-)
-;
-const
-ctx2
-=
-canvas2
+ctx
.
-getContext
+restore
(
-'
-2d
-'
)
;
-ctx2
-.
-fillStyle
-=
-'
-blue
+/
+/
+Likewise
+the
+transform
+doesn
'
-;
-ctx2
+t
+apply
+to
+context
+filter
+applied
+on
+layer
.
-fillRect
-(
-0
-0
-40
-10
-)
-;
ctx
.
-drawImage
+save
(
-canvas2
--
-30
--
-30
)
;
--
-name
-:
-2d
-.
-layer
-.
-ctm
-.
-getTransform
-desc
-:
-Tests
-getTransform
-inside
-layers
-.
-test_type
-:
-sync
-code
-:
-|
ctx
.
-translate
+filter
+=
+'
+drop
+-
+shadow
(
-10
-20
+10px
+10px
+0px
+green
)
+'
;
ctx
.
@@ -4683,87 +4655,41 @@ beginLayer
;
ctx
.
-scale
+fillRect
(
-2
-3
+-
+30
+-
+25
+60
+10
)
;
-const
-m
-=
ctx
.
-getTransform
-(
-)
-;
-assert_array_equals
+endLayer
(
-[
-m
-.
-a
-m
-.
-b
-m
-.
-c
-m
-.
-d
-m
-.
-e
-m
-.
-f
-]
-[
-2
-0
-0
-3
-10
-20
-]
)
;
ctx
.
-endLayer
+restore
(
)
;
--
-name
-:
-2d
-.
-layer
-.
-ctm
-.
-setTransform
-desc
-:
-Tests
-setTransform
+/
+/
+Filters
inside
layers
+aren
+'
+t
+affected
+by
+transform
+either
.
-code
-:
-|
-ctx
-.
-translate
-(
-80
-0
-)
-;
ctx
.
beginLayer
@@ -4772,65 +4698,75 @@ beginLayer
;
ctx
.
-rotate
-(
-2
-)
-;
-ctx
-.
-beginLayer
+filter
+=
+'
+drop
+-
+shadow
(
+5px
+5px
+0px
+blue
)
+'
;
ctx
.
-scale
+fillRect
(
-5
-6
+-
+30
+-
+45
+60
+10
)
;
ctx
.
-setTransform
+endLayer
(
-4
-0
-0
-2
-20
-10
)
;
+reference
+:
+|
ctx
.
fillStyle
=
'
-blue
+red
'
;
ctx
.
fillRect
(
-0
-0
-10
-10
+30
+40
+20
+120
)
;
ctx
.
-endLayer
-(
-)
+fillStyle
+=
+'
+grey
+'
;
ctx
.
-endLayer
+fillRect
(
+20
+30
+20
+120
)
;
ctx
@@ -4845,21 +4781,10 @@ ctx
.
fillRect
(
-0
-0
-20
+70
+40
20
-)
-;
-reference
-:
-|
-ctx
-.
-translate
-(
-80
-0
+120
)
;
ctx
@@ -4867,29 +4792,35 @@ ctx
fillStyle
=
'
-green
+grey
'
;
ctx
.
fillRect
(
-0
-0
-20
+60
+30
20
+120
)
;
ctx
.
-setTransform
+fillStyle
+=
+'
+blue
+'
+;
+ctx
+.
+fillRect
(
-4
-0
-0
-2
+105
+35
20
-10
+120
)
;
ctx
@@ -4897,17 +4828,17 @@ ctx
fillStyle
=
'
-blue
+grey
'
;
ctx
.
fillRect
(
-0
-0
-10
-10
+100
+30
+20
+120
)
;
-
@@ -4919,14 +4850,29 @@ layer
.
ctm
.
-resetTransform
+shadow
+-
+in
+-
+transformed
+-
+layer
desc
:
-Tests
-resetTransform
+Check
+shadows
inside
-layers
+of
+a
+transformed
+layer
.
+size
+:
+[
+200
+200
+]
code
:
|
@@ -4934,20 +4880,26 @@ ctx
.
translate
(
-40
-0
+80
+90
)
;
ctx
.
-beginLayer
+scale
(
+2
+2
)
;
ctx
.
rotate
(
+Math
+.
+PI
+/
2
)
;
@@ -4959,70 +4911,59 @@ beginLayer
;
ctx
.
-scale
-(
-5
-6
-)
+shadowOffsetX
+=
+10
;
ctx
.
-resetTransform
-(
-)
+shadowOffsetY
+=
+10
;
ctx
.
-fillStyle
+shadowColor
=
'
-blue
+grey
'
;
ctx
.
fillRect
(
-0
-0
-20
-20
+-
+30
+-
+5
+60
+10
)
;
-ctx
-.
-endLayer
+const
+canvas2
+=
+new
+OffscreenCanvas
(
+100
+100
)
;
-ctx
+const
+ctx2
+=
+canvas2
.
-endLayer
+getContext
(
-)
-;
-ctx
-.
-fillStyle
-=
'
-green
+2d
'
-;
-ctx
-.
-fillRect
-(
-0
-0
-20
-20
)
;
-reference
-:
-|
-ctx
+ctx2
.
fillStyle
=
@@ -5030,146 +4971,103 @@ fillStyle
blue
'
;
-ctx
+ctx2
.
fillRect
(
0
0
-20
-20
-)
-;
-ctx
-.
-translate
-(
40
-0
+10
)
;
ctx
.
-fillStyle
-=
-'
-green
-'
-;
-ctx
-.
-fillRect
+drawImage
(
-0
-0
-20
-20
-)
-;
+canvas2
-
-name
-:
-2d
-.
-layer
-.
-clip
+30
-
-inside
-desc
-:
-Check
-clipping
-set
-inside
-the
-layer
-size
-:
-[
-100
-100
-]
-code
-:
-|
+30
+)
+;
ctx
.
-beginLayer
-(
-{
-filter
-:
-{
-name
-:
-"
-gaussianBlur
-"
-stdDeviation
-:
-12
-}
-}
+endLayer
+(
)
;
+reference
+:
+|
ctx
.
-beginPath
+translate
(
+80
+90
)
;
ctx
.
-rect
+scale
(
-15
-15
-70
-70
+2
+2
)
;
ctx
.
-clip
+rotate
(
+Math
+.
+PI
+/
+2
)
;
ctx
.
-fillStyle
+shadowOffsetX
=
-'
-blue
-'
+10
;
ctx
.
-fillRect
-(
-10
+shadowOffsetY
+=
10
-80
-80
-)
;
ctx
.
-endLayer
+shadowColor
+=
+'
+grey
+'
+;
+ctx
+.
+fillRect
(
+-
+30
+-
+5
+60
+10
)
;
-reference
-:
-|
const
canvas2
=
new
OffscreenCanvas
(
-200
-200
+100
+100
)
;
const
@@ -5186,71 +5084,117 @@ getContext
;
ctx2
.
-beginPath
-(
-)
+fillStyle
+=
+'
+blue
+'
;
ctx2
.
-rect
+fillRect
(
-15
-15
-70
-70
+0
+0
+40
+10
)
;
-ctx2
+ctx
.
-clip
+drawImage
(
+canvas2
+-
+30
+-
+30
)
;
-ctx2
+-
+name
+:
+2d
.
-fillStyle
-=
-'
-blue
-'
-;
-ctx2
+layer
.
-fillRect
+ctm
+.
+getTransform
+desc
+:
+Tests
+getTransform
+inside
+layers
+.
+test_type
+:
+sync
+code
+:
+|
+ctx
+.
+translate
(
10
-10
-80
-80
+20
)
;
ctx
.
beginLayer
(
-{
-filter
-:
-{
-name
-:
-"
-gaussianBlur
-"
-stdDeviation
-:
-12
-}
-}
)
;
ctx
.
-drawImage
+scale
(
-canvas2
+2
+3
+)
+;
+const
+m
+=
+ctx
+.
+getTransform
+(
+)
+;
+assert_array_equals
+(
+[
+m
+.
+a
+m
+.
+b
+m
+.
+c
+m
+.
+d
+m
+.
+e
+m
+.
+f
+]
+[
+2
0
0
+3
+10
+20
+]
)
;
ctx
@@ -5266,94 +5210,153 @@ name
.
layer
.
-clip
--
-inside
--
-and
--
-outside
+ctm
+.
+setTransform
desc
:
-Check
-clipping
-set
+Tests
+setTransform
inside
-and
-outside
-the
-layer
-size
-:
-[
-100
-100
-]
+layers
+.
code
:
|
ctx
.
-beginPath
+translate
+(
+80
+0
+)
+;
+ctx
+.
+beginLayer
+(
+)
+;
+ctx
+.
+rotate
+(
+2
+)
+;
+ctx
+.
+beginLayer
+(
+)
+;
+ctx
+.
+scale
+(
+5
+6
+)
+;
+ctx
+.
+setTransform
+(
+4
+0
+0
+2
+20
+10
+)
+;
+ctx
+.
+fillStyle
+=
+'
+blue
+'
+;
+ctx
+.
+fillRect
(
+0
+0
+10
+10
)
;
ctx
.
-rect
+endLayer
(
-15
-15
-70
-70
)
;
ctx
.
-clip
+endLayer
(
)
;
ctx
.
-beginLayer
+fillStyle
+=
+'
+green
+'
+;
+ctx
+.
+fillRect
(
-{
-filter
-:
-{
-name
-:
-"
-gaussianBlur
-"
-stdDeviation
-:
-12
-}
-}
+0
+0
+20
+20
)
;
+reference
+:
+|
ctx
.
-beginPath
+translate
(
+80
+0
)
;
ctx
.
-rect
+fillStyle
+=
+'
+green
+'
+;
+ctx
+.
+fillRect
(
-15
-15
-70
-70
+0
+0
+20
+20
)
;
ctx
.
-clip
+setTransform
(
+4
+0
+0
+2
+20
+10
)
;
ctx
@@ -5368,66 +5371,74 @@ ctx
.
fillRect
(
+0
+0
10
10
-80
-80
)
;
+-
+name
+:
+2d
+.
+layer
+.
+ctm
+.
+resetTransform
+desc
+:
+Tests
+resetTransform
+inside
+layers
+.
+code
+:
+|
ctx
.
-endLayer
+translate
(
+40
+0
)
;
-reference
-:
-|
-const
-canvas2
-=
-new
-OffscreenCanvas
+ctx
+.
+beginLayer
(
-200
-200
)
;
-const
-ctx2
-=
-canvas2
+ctx
.
-getContext
+rotate
(
-'
-2d
-'
+2
)
;
-ctx2
+ctx
.
-beginPath
+beginLayer
(
)
;
-ctx2
+ctx
.
-rect
+scale
(
-15
-15
-70
-70
+5
+6
)
;
-ctx2
+ctx
.
-clip
+resetTransform
(
)
;
-ctx2
+ctx
.
fillStyle
=
@@ -5435,102 +5446,91 @@ fillStyle
blue
'
;
-ctx2
+ctx
.
fillRect
(
-10
-10
-80
-80
+0
+0
+20
+20
)
;
-const
-canvas3
-=
-new
-OffscreenCanvas
+ctx
+.
+endLayer
(
-200
-200
)
;
-const
-ctx3
-=
-canvas3
+ctx
.
-getContext
+endLayer
(
-'
-2d
-'
)
;
-ctx3
+ctx
.
-beginLayer
-(
-{
-filter
-:
-{
-name
-:
-"
-gaussianBlur
-"
-stdDeviation
-:
-12
-}
-}
-)
+fillStyle
+=
+'
+green
+'
;
-ctx3
+ctx
.
-drawImage
+fillRect
(
-canvas2
0
0
+20
+20
)
;
-ctx3
+reference
+:
+|
+ctx
.
-endLayer
-(
-)
+fillStyle
+=
+'
+blue
+'
;
ctx
.
-beginPath
+fillRect
(
+0
+0
+20
+20
)
;
ctx
.
-rect
+translate
(
-15
-15
-70
-70
+40
+0
)
;
ctx
.
-clip
-(
-)
+fillStyle
+=
+'
+green
+'
;
ctx
.
-drawImage
+fillRect
(
-canvas3
0
0
+20
+20
)
;
-