2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
3 <link rel=
"match" href=
"2d.layer.global-states.filter.alpha.blending-expected.html">
4 <meta name=fuzzy
content=
"maxDifference=0-1; totalPixels=0-2453">
5 <title>Canvas test:
2d.layer.global-states.filter.alpha.blending
</title>
6 <h1>2d.layer.global-states.filter.alpha.blending
</h1>
7 <p class=
"desc">Checks that layers with filters correctly use global render states.
</p>
8 <canvas id=
"canvas" width=
"200" height=
"200">
9 <p class=
"fallback">FAIL (fallback content)
</p>
12 const canvas
= document
.getElementById("canvas");
13 const ctx
= canvas
.getContext('2d');
15 ctx
.fillStyle
= 'rgba(0, 0, 255, 1)';
17 var circle
= new Path2D();
18 circle
.arc(90, 90, 45, 0, 2 * Math
.PI
);
21 ctx
.globalAlpha
= 0.6;
22 ctx
.globalCompositeOperation
= 'multiply';
24 ctx
.beginLayer({filter
: [
25 {name
: 'colorMatrix', values
: [0.393, 0.769, 0.189, 0, 0,
26 0.349, 0.686, 0.168, 0, 0,
27 0.272, 0.534, 0.131, 0, 0,
29 {name
: 'componentTransfer',
30 funcA
: {type
: "table", tableValues
: [0, 0.7]}},
31 {name
: 'dropShadow', dx
: 5, dy
: 5, floodColor
: '#81e'}]});
33 ctx
.fillStyle
= 'rgba(200, 0, 0, 1)';
34 ctx
.fillRect(50, 50, 75, 50);
35 ctx
.fillStyle
= 'rgba(0, 200, 0, 1)';
36 ctx
.fillRect(70, 70, 75, 50);