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
|
var getRegularContextForFilter = function(filter, pattern) {
var c = document.createElement("canvas");
c.width = c.height = 80;
var ctx = c.getContext('2d');
ctx.filter = filter;
ctx.drawImage(pattern, 5, 5);
ctx.drawImage(pattern, 25, 25);
ctx.drawImage(pattern, 45, 45);
return ctx;
};
var matchImageDataResults = function(offscreenImage, regularImage, filter) {
assert_array_equals(offscreenImage, regularImage,
"The image data generated by filter " +
filter +
" should be the same for both OffscreenCanvas and regular canvas");
};
var createPatternCanvas = function() {
var patternCanvas = document.createElement('canvas');
patternCanvas.width = 20;
patternCanvas.height = 20;
var patternCtx = patternCanvas.getContext('2d');
patternCtx.fillStyle = '#A00';
patternCtx.fillRect(0, 0, 10, 10);
patternCtx.fillStyle = '#0A0';
patternCtx.fillRect(10, 0, 10, 10);
patternCtx.fillStyle = '#00A';
patternCtx.fillRect(0, 10, 10, 10);
patternCtx.fillStyle = "#AA0";
patternCtx.fillRect(10, 10, 10, 10);
return patternCanvas;
};
var filters = [ "none" ,
"blur(10px)" ,
"brightness(40%)" ,
"contrast(20%)" ,
"drop-shadow(0 0 5px green)" ,
"grayscale(100%)" ,
"invert(100%)" ,
"opacity(50%)" ,
"saturate(20%)" ,
"sepia(100%)" ,
"sepia(1) hue-rotate(200deg)",
"url(#url)" ];
|
