File: 2d.composite.full.mode.alpha-ref.html

package info (click to toggle)
thunderbird 1%3A140.4.0esr-1
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid
  • size: 4,609,432 kB
  • sloc: cpp: 7,672,442; javascript: 5,901,613; ansic: 3,898,954; python: 1,413,343; xml: 653,997; asm: 462,286; java: 180,927; sh: 113,489; makefile: 20,460; perl: 14,288; objc: 13,059; yacc: 4,583; pascal: 3,352; lex: 1,720; ruby: 1,222; exp: 762; sql: 715; awk: 580; php: 436; lisp: 430; sed: 70; csh: 10
file content (37 lines) | stat: -rw-r--r-- 1,364 bytes parent folder | download | duplicates (13) 
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
 
<!DOCTYPE html>
<html>
    <body>
        <div id="source"></div>
        <div id="destination"></div>
        <script>
            function createCanvas(parent, width, height) {
                const canvas = document.createElement("canvas");
                canvas.width = width;
                canvas.height = height;
                parent.append(canvas);
                return canvas;
            }

            function fillRects(canvas, color, alpha, diagonal) {
                const ctx = canvas.getContext("2d");
                ctx.fillStyle = color;
                ctx.globalAlpha = alpha;
                if (diagonal == "left") {
                    ctx.fillRect(60, 60, 50, 50);
                    ctx.fillRect(110, 110, 50, 50);
                } else {
                    ctx.fillRect(60, 110, 50, 50);
                    ctx.fillRect(110, 60, 50, 50);
                }
            }

            fillRects(createCanvas(source, 200, 200), "#ff0000", 0.5, "left");
            fillRects(createCanvas(source, 200, 200), "#ff0000", 0.5, "right");
            fillRects(createCanvas(destination, 200, 200), "#777777", 0.5, "left");

            let canvas = createCanvas(destination, 200, 200);
            fillRects(canvas, "#777777", 0.5, "left");
            fillRects(canvas, "#ff0000", 0.5, "right");
        </script>
    </body>
</html>