| <!DOCTYPE html> |
| <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> |
| <meta charset="UTF-8"> |
| <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css"> |
| <title>Canvas test: 2d.layer.globalCompositeOperation</title> |
| <h1>2d.layer.globalCompositeOperation</h1> |
| <p class="desc">Checks that layers work with all globalCompositeOperation values.</p> |
| |
| <div class="grid-container" style="--grid-width: 7"> |
| <span> |
| <div>source-over</div> |
| <canvas class="grid-cell-content" id="canvas0" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas0"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'source-over'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>source-in</div> |
| <canvas class="grid-cell-content" id="canvas1" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas1"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'source-in'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>source-out</div> |
| <canvas class="grid-cell-content" id="canvas2" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas2"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'source-out'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>source-atop</div> |
| <canvas class="grid-cell-content" id="canvas3" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas3"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'source-atop'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>destination-over</div> |
| <canvas class="grid-cell-content" id="canvas4" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas4"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'destination-over'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>destination-in</div> |
| <canvas class="grid-cell-content" id="canvas5" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas5"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'destination-in'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>destination-out</div> |
| <canvas class="grid-cell-content" id="canvas6" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas6"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'destination-out'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>destination-atop</div> |
| <canvas class="grid-cell-content" id="canvas7" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas7"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'destination-atop'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>lighter</div> |
| <canvas class="grid-cell-content" id="canvas8" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas8"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'lighter'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>copy</div> |
| <canvas class="grid-cell-content" id="canvas9" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas9"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'copy'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>xor</div> |
| <canvas class="grid-cell-content" id="canvas10" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas10"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'xor'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>multiply</div> |
| <canvas class="grid-cell-content" id="canvas11" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas11"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'multiply'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>screen</div> |
| <canvas class="grid-cell-content" id="canvas12" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas12"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'screen'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>overlay</div> |
| <canvas class="grid-cell-content" id="canvas13" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas13"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'overlay'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>darken</div> |
| <canvas class="grid-cell-content" id="canvas14" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas14"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'darken'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>lighten</div> |
| <canvas class="grid-cell-content" id="canvas15" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas15"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'lighten'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>color-dodge</div> |
| <canvas class="grid-cell-content" id="canvas16" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas16"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'color-dodge'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>color-burn</div> |
| <canvas class="grid-cell-content" id="canvas17" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas17"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'color-burn'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>hard-light</div> |
| <canvas class="grid-cell-content" id="canvas18" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas18"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'hard-light'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>soft-light</div> |
| <canvas class="grid-cell-content" id="canvas19" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas19"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'soft-light'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>difference</div> |
| <canvas class="grid-cell-content" id="canvas20" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas20"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'difference'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>exclusion</div> |
| <canvas class="grid-cell-content" id="canvas21" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas21"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'exclusion'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>hue</div> |
| <canvas class="grid-cell-content" id="canvas22" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas22"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'hue'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>saturation</div> |
| <canvas class="grid-cell-content" id="canvas23" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas23"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'saturation'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>color</div> |
| <canvas class="grid-cell-content" id="canvas24" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas24"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'color'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| <span> |
| <div>luminosity</div> |
| <canvas class="grid-cell-content" id="canvas25" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script type="module"> |
| const canvas = document.getElementById("canvas25"); |
| const ctx = canvas.getContext('2d'); |
| |
| ctx.translate(50, 50); |
| ctx.scale(2, 2); |
| ctx.rotate(Math.PI); |
| ctx.translate(-25, -25); |
| |
| ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; |
| ctx.fillRect(15, 15, 25, 25); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.globalCompositeOperation = 'luminosity'; |
| ctx.shadowOffsetX = 7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| |
| const canvas2 = document.createElement("canvas"); |
| const ctx2 = canvas2.getContext("2d"); |
| |
| ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; |
| ctx2.fillRect(10, 25, 25, 20); |
| ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; |
| ctx2.fillRect(25, 10, 20, 25); |
| |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(canvas2, 0, 0); |
| </script> |
| </span> |
| |
| </div> |
