1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<style>
canvas { display: inline-block; }
</style>
</head>
<body>
<canvas id='output0' width='100' height='100'></canvas>
<canvas id='output1' width='100' height='100'></canvas>
<canvas id='output2' width='100' height='100'></canvas>
<canvas id='output3' width='100' height='100'></canvas>
<canvas id='output4' width='100' height='100'></canvas>
<br>
<canvas id='output5' width='100' height='100'></canvas>
<canvas id='output6' width='100' height='100'></canvas>
<canvas id='output7' width='100' height='100'></canvas>
<canvas id='output8' width='100' height='100'></canvas>
<canvas id='output9' width='100' height='100'></canvas>
<br>
<canvas id='output10' width='100' height='100'></canvas>
<canvas id='output11' width='100' height='100'></canvas>
<canvas id='output12' width='100' height='100'></canvas>
<canvas id='output13' width='100' height='100'></canvas>
<canvas id='output14' width='100' height='100'></canvas>
<script>
var paint = function(id, filter) {
var c = document.getElementById(id);
var ctx = c.getContext('2d');
ctx.filter = filter;
ctx.fillStyle = '#A00';
ctx.fillRect(0, 0, 15, 15);
ctx.fillStyle = '#0A0';
ctx.fillRect(15, 0, 15, 15);
ctx.fillStyle = '#00A';
ctx.fillRect(0, 15, 15, 15);
ctx.fillStyle = "#AA0";
ctx.fillRect(15, 15, 15, 15);
return ctx;
};
paint('output0', "none");
paint('output1', "blur(10px)");
paint('output2', "blur(0px)");
paint('output3', "blur(16px)");
paint('output4', "blur(0px)");
paint('output5', "brightness(40%)");
paint('output6', "contrast(20%)");
paint('output7', "drop-shadow(0 0 5px green)");
paint('output8', "grayscale(100%)");
paint('output9', "invert(100%)");
paint('output10', "opacity(50%)");
paint('output11', "saturate(20%)");
paint('output12', "sepia(100%)");
paint('output13', "sepia(1) hue-rotate(200deg)");
paint('output14', "url(#url)");
</script>
</body>
</html>
|
