2d.layer.globalCompositeOperation.html (23110B)
1 <!DOCTYPE html> 2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> 3 <meta charset="UTF-8"> 4 <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css"> 5 <link rel="match" href="2d.layer.globalCompositeOperation-expected.html"> 6 <title>Canvas test: 2d.layer.globalCompositeOperation</title> 7 <h1>2d.layer.globalCompositeOperation</h1> 8 <p class="desc">Checks that layers work with all globalCompositeOperation values.</p> 9 10 <div class="grid-container" style="--grid-width: 7"> 11 <span> 12 <div>source-over</div> 13 <canvas class="grid-cell-content" id="canvas0" width="90" height="90"> 14 <p class="fallback">FAIL (fallback content)</p> 15 </canvas> 16 <script type="module"> 17 const canvas = document.getElementById("canvas0"); 18 const ctx = canvas.getContext('2d'); 19 20 ctx.translate(50, 50); 21 ctx.scale(2, 2); 22 ctx.rotate(Math.PI); 23 ctx.translate(-25, -25); 24 25 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 26 ctx.fillRect(15, 15, 25, 25); 27 28 ctx.globalAlpha = 0.75; 29 ctx.globalCompositeOperation = 'source-over'; 30 ctx.shadowOffsetX = 7; 31 ctx.shadowOffsetY = 7; 32 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 33 34 ctx.beginLayer(); 35 36 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 37 ctx.fillRect(10, 25, 25, 20); 38 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 39 ctx.fillRect(25, 10, 20, 25); 40 41 ctx.endLayer(); 42 </script> 43 </span> 44 45 <span> 46 <div>source-in</div> 47 <canvas class="grid-cell-content" id="canvas1" width="90" height="90"> 48 <p class="fallback">FAIL (fallback content)</p> 49 </canvas> 50 <script type="module"> 51 const canvas = document.getElementById("canvas1"); 52 const ctx = canvas.getContext('2d'); 53 54 ctx.translate(50, 50); 55 ctx.scale(2, 2); 56 ctx.rotate(Math.PI); 57 ctx.translate(-25, -25); 58 59 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 60 ctx.fillRect(15, 15, 25, 25); 61 62 ctx.globalAlpha = 0.75; 63 ctx.globalCompositeOperation = 'source-in'; 64 ctx.shadowOffsetX = 7; 65 ctx.shadowOffsetY = 7; 66 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 67 68 ctx.beginLayer(); 69 70 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 71 ctx.fillRect(10, 25, 25, 20); 72 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 73 ctx.fillRect(25, 10, 20, 25); 74 75 ctx.endLayer(); 76 </script> 77 </span> 78 79 <span> 80 <div>source-out</div> 81 <canvas class="grid-cell-content" id="canvas2" width="90" height="90"> 82 <p class="fallback">FAIL (fallback content)</p> 83 </canvas> 84 <script type="module"> 85 const canvas = document.getElementById("canvas2"); 86 const ctx = canvas.getContext('2d'); 87 88 ctx.translate(50, 50); 89 ctx.scale(2, 2); 90 ctx.rotate(Math.PI); 91 ctx.translate(-25, -25); 92 93 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 94 ctx.fillRect(15, 15, 25, 25); 95 96 ctx.globalAlpha = 0.75; 97 ctx.globalCompositeOperation = 'source-out'; 98 ctx.shadowOffsetX = 7; 99 ctx.shadowOffsetY = 7; 100 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 101 102 ctx.beginLayer(); 103 104 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 105 ctx.fillRect(10, 25, 25, 20); 106 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 107 ctx.fillRect(25, 10, 20, 25); 108 109 ctx.endLayer(); 110 </script> 111 </span> 112 113 <span> 114 <div>source-atop</div> 115 <canvas class="grid-cell-content" id="canvas3" width="90" height="90"> 116 <p class="fallback">FAIL (fallback content)</p> 117 </canvas> 118 <script type="module"> 119 const canvas = document.getElementById("canvas3"); 120 const ctx = canvas.getContext('2d'); 121 122 ctx.translate(50, 50); 123 ctx.scale(2, 2); 124 ctx.rotate(Math.PI); 125 ctx.translate(-25, -25); 126 127 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 128 ctx.fillRect(15, 15, 25, 25); 129 130 ctx.globalAlpha = 0.75; 131 ctx.globalCompositeOperation = 'source-atop'; 132 ctx.shadowOffsetX = 7; 133 ctx.shadowOffsetY = 7; 134 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 135 136 ctx.beginLayer(); 137 138 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 139 ctx.fillRect(10, 25, 25, 20); 140 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 141 ctx.fillRect(25, 10, 20, 25); 142 143 ctx.endLayer(); 144 </script> 145 </span> 146 147 <span> 148 <div>destination-over</div> 149 <canvas class="grid-cell-content" id="canvas4" width="90" height="90"> 150 <p class="fallback">FAIL (fallback content)</p> 151 </canvas> 152 <script type="module"> 153 const canvas = document.getElementById("canvas4"); 154 const ctx = canvas.getContext('2d'); 155 156 ctx.translate(50, 50); 157 ctx.scale(2, 2); 158 ctx.rotate(Math.PI); 159 ctx.translate(-25, -25); 160 161 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 162 ctx.fillRect(15, 15, 25, 25); 163 164 ctx.globalAlpha = 0.75; 165 ctx.globalCompositeOperation = 'destination-over'; 166 ctx.shadowOffsetX = 7; 167 ctx.shadowOffsetY = 7; 168 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 169 170 ctx.beginLayer(); 171 172 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 173 ctx.fillRect(10, 25, 25, 20); 174 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 175 ctx.fillRect(25, 10, 20, 25); 176 177 ctx.endLayer(); 178 </script> 179 </span> 180 181 <span> 182 <div>destination-in</div> 183 <canvas class="grid-cell-content" id="canvas5" width="90" height="90"> 184 <p class="fallback">FAIL (fallback content)</p> 185 </canvas> 186 <script type="module"> 187 const canvas = document.getElementById("canvas5"); 188 const ctx = canvas.getContext('2d'); 189 190 ctx.translate(50, 50); 191 ctx.scale(2, 2); 192 ctx.rotate(Math.PI); 193 ctx.translate(-25, -25); 194 195 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 196 ctx.fillRect(15, 15, 25, 25); 197 198 ctx.globalAlpha = 0.75; 199 ctx.globalCompositeOperation = 'destination-in'; 200 ctx.shadowOffsetX = 7; 201 ctx.shadowOffsetY = 7; 202 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 203 204 ctx.beginLayer(); 205 206 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 207 ctx.fillRect(10, 25, 25, 20); 208 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 209 ctx.fillRect(25, 10, 20, 25); 210 211 ctx.endLayer(); 212 </script> 213 </span> 214 215 <span> 216 <div>destination-out</div> 217 <canvas class="grid-cell-content" id="canvas6" width="90" height="90"> 218 <p class="fallback">FAIL (fallback content)</p> 219 </canvas> 220 <script type="module"> 221 const canvas = document.getElementById("canvas6"); 222 const ctx = canvas.getContext('2d'); 223 224 ctx.translate(50, 50); 225 ctx.scale(2, 2); 226 ctx.rotate(Math.PI); 227 ctx.translate(-25, -25); 228 229 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 230 ctx.fillRect(15, 15, 25, 25); 231 232 ctx.globalAlpha = 0.75; 233 ctx.globalCompositeOperation = 'destination-out'; 234 ctx.shadowOffsetX = 7; 235 ctx.shadowOffsetY = 7; 236 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 237 238 ctx.beginLayer(); 239 240 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 241 ctx.fillRect(10, 25, 25, 20); 242 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 243 ctx.fillRect(25, 10, 20, 25); 244 245 ctx.endLayer(); 246 </script> 247 </span> 248 249 <span> 250 <div>destination-atop</div> 251 <canvas class="grid-cell-content" id="canvas7" width="90" height="90"> 252 <p class="fallback">FAIL (fallback content)</p> 253 </canvas> 254 <script type="module"> 255 const canvas = document.getElementById("canvas7"); 256 const ctx = canvas.getContext('2d'); 257 258 ctx.translate(50, 50); 259 ctx.scale(2, 2); 260 ctx.rotate(Math.PI); 261 ctx.translate(-25, -25); 262 263 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 264 ctx.fillRect(15, 15, 25, 25); 265 266 ctx.globalAlpha = 0.75; 267 ctx.globalCompositeOperation = 'destination-atop'; 268 ctx.shadowOffsetX = 7; 269 ctx.shadowOffsetY = 7; 270 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 271 272 ctx.beginLayer(); 273 274 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 275 ctx.fillRect(10, 25, 25, 20); 276 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 277 ctx.fillRect(25, 10, 20, 25); 278 279 ctx.endLayer(); 280 </script> 281 </span> 282 283 <span> 284 <div>lighter</div> 285 <canvas class="grid-cell-content" id="canvas8" width="90" height="90"> 286 <p class="fallback">FAIL (fallback content)</p> 287 </canvas> 288 <script type="module"> 289 const canvas = document.getElementById("canvas8"); 290 const ctx = canvas.getContext('2d'); 291 292 ctx.translate(50, 50); 293 ctx.scale(2, 2); 294 ctx.rotate(Math.PI); 295 ctx.translate(-25, -25); 296 297 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 298 ctx.fillRect(15, 15, 25, 25); 299 300 ctx.globalAlpha = 0.75; 301 ctx.globalCompositeOperation = 'lighter'; 302 ctx.shadowOffsetX = 7; 303 ctx.shadowOffsetY = 7; 304 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 305 306 ctx.beginLayer(); 307 308 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 309 ctx.fillRect(10, 25, 25, 20); 310 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 311 ctx.fillRect(25, 10, 20, 25); 312 313 ctx.endLayer(); 314 </script> 315 </span> 316 317 <span> 318 <div>copy</div> 319 <canvas class="grid-cell-content" id="canvas9" width="90" height="90"> 320 <p class="fallback">FAIL (fallback content)</p> 321 </canvas> 322 <script type="module"> 323 const canvas = document.getElementById("canvas9"); 324 const ctx = canvas.getContext('2d'); 325 326 ctx.translate(50, 50); 327 ctx.scale(2, 2); 328 ctx.rotate(Math.PI); 329 ctx.translate(-25, -25); 330 331 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 332 ctx.fillRect(15, 15, 25, 25); 333 334 ctx.globalAlpha = 0.75; 335 ctx.globalCompositeOperation = 'copy'; 336 ctx.shadowOffsetX = 7; 337 ctx.shadowOffsetY = 7; 338 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 339 340 ctx.beginLayer(); 341 342 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 343 ctx.fillRect(10, 25, 25, 20); 344 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 345 ctx.fillRect(25, 10, 20, 25); 346 347 ctx.endLayer(); 348 </script> 349 </span> 350 351 <span> 352 <div>xor</div> 353 <canvas class="grid-cell-content" id="canvas10" width="90" height="90"> 354 <p class="fallback">FAIL (fallback content)</p> 355 </canvas> 356 <script type="module"> 357 const canvas = document.getElementById("canvas10"); 358 const ctx = canvas.getContext('2d'); 359 360 ctx.translate(50, 50); 361 ctx.scale(2, 2); 362 ctx.rotate(Math.PI); 363 ctx.translate(-25, -25); 364 365 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 366 ctx.fillRect(15, 15, 25, 25); 367 368 ctx.globalAlpha = 0.75; 369 ctx.globalCompositeOperation = 'xor'; 370 ctx.shadowOffsetX = 7; 371 ctx.shadowOffsetY = 7; 372 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 373 374 ctx.beginLayer(); 375 376 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 377 ctx.fillRect(10, 25, 25, 20); 378 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 379 ctx.fillRect(25, 10, 20, 25); 380 381 ctx.endLayer(); 382 </script> 383 </span> 384 385 <span> 386 <div>multiply</div> 387 <canvas class="grid-cell-content" id="canvas11" width="90" height="90"> 388 <p class="fallback">FAIL (fallback content)</p> 389 </canvas> 390 <script type="module"> 391 const canvas = document.getElementById("canvas11"); 392 const ctx = canvas.getContext('2d'); 393 394 ctx.translate(50, 50); 395 ctx.scale(2, 2); 396 ctx.rotate(Math.PI); 397 ctx.translate(-25, -25); 398 399 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 400 ctx.fillRect(15, 15, 25, 25); 401 402 ctx.globalAlpha = 0.75; 403 ctx.globalCompositeOperation = 'multiply'; 404 ctx.shadowOffsetX = 7; 405 ctx.shadowOffsetY = 7; 406 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 407 408 ctx.beginLayer(); 409 410 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 411 ctx.fillRect(10, 25, 25, 20); 412 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 413 ctx.fillRect(25, 10, 20, 25); 414 415 ctx.endLayer(); 416 </script> 417 </span> 418 419 <span> 420 <div>screen</div> 421 <canvas class="grid-cell-content" id="canvas12" width="90" height="90"> 422 <p class="fallback">FAIL (fallback content)</p> 423 </canvas> 424 <script type="module"> 425 const canvas = document.getElementById("canvas12"); 426 const ctx = canvas.getContext('2d'); 427 428 ctx.translate(50, 50); 429 ctx.scale(2, 2); 430 ctx.rotate(Math.PI); 431 ctx.translate(-25, -25); 432 433 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 434 ctx.fillRect(15, 15, 25, 25); 435 436 ctx.globalAlpha = 0.75; 437 ctx.globalCompositeOperation = 'screen'; 438 ctx.shadowOffsetX = 7; 439 ctx.shadowOffsetY = 7; 440 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 441 442 ctx.beginLayer(); 443 444 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 445 ctx.fillRect(10, 25, 25, 20); 446 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 447 ctx.fillRect(25, 10, 20, 25); 448 449 ctx.endLayer(); 450 </script> 451 </span> 452 453 <span> 454 <div>overlay</div> 455 <canvas class="grid-cell-content" id="canvas13" width="90" height="90"> 456 <p class="fallback">FAIL (fallback content)</p> 457 </canvas> 458 <script type="module"> 459 const canvas = document.getElementById("canvas13"); 460 const ctx = canvas.getContext('2d'); 461 462 ctx.translate(50, 50); 463 ctx.scale(2, 2); 464 ctx.rotate(Math.PI); 465 ctx.translate(-25, -25); 466 467 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 468 ctx.fillRect(15, 15, 25, 25); 469 470 ctx.globalAlpha = 0.75; 471 ctx.globalCompositeOperation = 'overlay'; 472 ctx.shadowOffsetX = 7; 473 ctx.shadowOffsetY = 7; 474 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 475 476 ctx.beginLayer(); 477 478 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 479 ctx.fillRect(10, 25, 25, 20); 480 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 481 ctx.fillRect(25, 10, 20, 25); 482 483 ctx.endLayer(); 484 </script> 485 </span> 486 487 <span> 488 <div>darken</div> 489 <canvas class="grid-cell-content" id="canvas14" width="90" height="90"> 490 <p class="fallback">FAIL (fallback content)</p> 491 </canvas> 492 <script type="module"> 493 const canvas = document.getElementById("canvas14"); 494 const ctx = canvas.getContext('2d'); 495 496 ctx.translate(50, 50); 497 ctx.scale(2, 2); 498 ctx.rotate(Math.PI); 499 ctx.translate(-25, -25); 500 501 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 502 ctx.fillRect(15, 15, 25, 25); 503 504 ctx.globalAlpha = 0.75; 505 ctx.globalCompositeOperation = 'darken'; 506 ctx.shadowOffsetX = 7; 507 ctx.shadowOffsetY = 7; 508 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 509 510 ctx.beginLayer(); 511 512 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 513 ctx.fillRect(10, 25, 25, 20); 514 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 515 ctx.fillRect(25, 10, 20, 25); 516 517 ctx.endLayer(); 518 </script> 519 </span> 520 521 <span> 522 <div>lighten</div> 523 <canvas class="grid-cell-content" id="canvas15" width="90" height="90"> 524 <p class="fallback">FAIL (fallback content)</p> 525 </canvas> 526 <script type="module"> 527 const canvas = document.getElementById("canvas15"); 528 const ctx = canvas.getContext('2d'); 529 530 ctx.translate(50, 50); 531 ctx.scale(2, 2); 532 ctx.rotate(Math.PI); 533 ctx.translate(-25, -25); 534 535 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 536 ctx.fillRect(15, 15, 25, 25); 537 538 ctx.globalAlpha = 0.75; 539 ctx.globalCompositeOperation = 'lighten'; 540 ctx.shadowOffsetX = 7; 541 ctx.shadowOffsetY = 7; 542 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 543 544 ctx.beginLayer(); 545 546 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 547 ctx.fillRect(10, 25, 25, 20); 548 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 549 ctx.fillRect(25, 10, 20, 25); 550 551 ctx.endLayer(); 552 </script> 553 </span> 554 555 <span> 556 <div>color-dodge</div> 557 <canvas class="grid-cell-content" id="canvas16" width="90" height="90"> 558 <p class="fallback">FAIL (fallback content)</p> 559 </canvas> 560 <script type="module"> 561 const canvas = document.getElementById("canvas16"); 562 const ctx = canvas.getContext('2d'); 563 564 ctx.translate(50, 50); 565 ctx.scale(2, 2); 566 ctx.rotate(Math.PI); 567 ctx.translate(-25, -25); 568 569 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 570 ctx.fillRect(15, 15, 25, 25); 571 572 ctx.globalAlpha = 0.75; 573 ctx.globalCompositeOperation = 'color-dodge'; 574 ctx.shadowOffsetX = 7; 575 ctx.shadowOffsetY = 7; 576 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 577 578 ctx.beginLayer(); 579 580 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 581 ctx.fillRect(10, 25, 25, 20); 582 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 583 ctx.fillRect(25, 10, 20, 25); 584 585 ctx.endLayer(); 586 </script> 587 </span> 588 589 <span> 590 <div>color-burn</div> 591 <canvas class="grid-cell-content" id="canvas17" width="90" height="90"> 592 <p class="fallback">FAIL (fallback content)</p> 593 </canvas> 594 <script type="module"> 595 const canvas = document.getElementById("canvas17"); 596 const ctx = canvas.getContext('2d'); 597 598 ctx.translate(50, 50); 599 ctx.scale(2, 2); 600 ctx.rotate(Math.PI); 601 ctx.translate(-25, -25); 602 603 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 604 ctx.fillRect(15, 15, 25, 25); 605 606 ctx.globalAlpha = 0.75; 607 ctx.globalCompositeOperation = 'color-burn'; 608 ctx.shadowOffsetX = 7; 609 ctx.shadowOffsetY = 7; 610 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 611 612 ctx.beginLayer(); 613 614 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 615 ctx.fillRect(10, 25, 25, 20); 616 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 617 ctx.fillRect(25, 10, 20, 25); 618 619 ctx.endLayer(); 620 </script> 621 </span> 622 623 <span> 624 <div>hard-light</div> 625 <canvas class="grid-cell-content" id="canvas18" width="90" height="90"> 626 <p class="fallback">FAIL (fallback content)</p> 627 </canvas> 628 <script type="module"> 629 const canvas = document.getElementById("canvas18"); 630 const ctx = canvas.getContext('2d'); 631 632 ctx.translate(50, 50); 633 ctx.scale(2, 2); 634 ctx.rotate(Math.PI); 635 ctx.translate(-25, -25); 636 637 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 638 ctx.fillRect(15, 15, 25, 25); 639 640 ctx.globalAlpha = 0.75; 641 ctx.globalCompositeOperation = 'hard-light'; 642 ctx.shadowOffsetX = 7; 643 ctx.shadowOffsetY = 7; 644 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 645 646 ctx.beginLayer(); 647 648 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 649 ctx.fillRect(10, 25, 25, 20); 650 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 651 ctx.fillRect(25, 10, 20, 25); 652 653 ctx.endLayer(); 654 </script> 655 </span> 656 657 <span> 658 <div>soft-light</div> 659 <canvas class="grid-cell-content" id="canvas19" width="90" height="90"> 660 <p class="fallback">FAIL (fallback content)</p> 661 </canvas> 662 <script type="module"> 663 const canvas = document.getElementById("canvas19"); 664 const ctx = canvas.getContext('2d'); 665 666 ctx.translate(50, 50); 667 ctx.scale(2, 2); 668 ctx.rotate(Math.PI); 669 ctx.translate(-25, -25); 670 671 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 672 ctx.fillRect(15, 15, 25, 25); 673 674 ctx.globalAlpha = 0.75; 675 ctx.globalCompositeOperation = 'soft-light'; 676 ctx.shadowOffsetX = 7; 677 ctx.shadowOffsetY = 7; 678 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 679 680 ctx.beginLayer(); 681 682 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 683 ctx.fillRect(10, 25, 25, 20); 684 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 685 ctx.fillRect(25, 10, 20, 25); 686 687 ctx.endLayer(); 688 </script> 689 </span> 690 691 <span> 692 <div>difference</div> 693 <canvas class="grid-cell-content" id="canvas20" width="90" height="90"> 694 <p class="fallback">FAIL (fallback content)</p> 695 </canvas> 696 <script type="module"> 697 const canvas = document.getElementById("canvas20"); 698 const ctx = canvas.getContext('2d'); 699 700 ctx.translate(50, 50); 701 ctx.scale(2, 2); 702 ctx.rotate(Math.PI); 703 ctx.translate(-25, -25); 704 705 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 706 ctx.fillRect(15, 15, 25, 25); 707 708 ctx.globalAlpha = 0.75; 709 ctx.globalCompositeOperation = 'difference'; 710 ctx.shadowOffsetX = 7; 711 ctx.shadowOffsetY = 7; 712 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 713 714 ctx.beginLayer(); 715 716 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 717 ctx.fillRect(10, 25, 25, 20); 718 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 719 ctx.fillRect(25, 10, 20, 25); 720 721 ctx.endLayer(); 722 </script> 723 </span> 724 725 <span> 726 <div>exclusion</div> 727 <canvas class="grid-cell-content" id="canvas21" width="90" height="90"> 728 <p class="fallback">FAIL (fallback content)</p> 729 </canvas> 730 <script type="module"> 731 const canvas = document.getElementById("canvas21"); 732 const ctx = canvas.getContext('2d'); 733 734 ctx.translate(50, 50); 735 ctx.scale(2, 2); 736 ctx.rotate(Math.PI); 737 ctx.translate(-25, -25); 738 739 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 740 ctx.fillRect(15, 15, 25, 25); 741 742 ctx.globalAlpha = 0.75; 743 ctx.globalCompositeOperation = 'exclusion'; 744 ctx.shadowOffsetX = 7; 745 ctx.shadowOffsetY = 7; 746 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 747 748 ctx.beginLayer(); 749 750 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 751 ctx.fillRect(10, 25, 25, 20); 752 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 753 ctx.fillRect(25, 10, 20, 25); 754 755 ctx.endLayer(); 756 </script> 757 </span> 758 759 <span> 760 <div>hue</div> 761 <canvas class="grid-cell-content" id="canvas22" width="90" height="90"> 762 <p class="fallback">FAIL (fallback content)</p> 763 </canvas> 764 <script type="module"> 765 const canvas = document.getElementById("canvas22"); 766 const ctx = canvas.getContext('2d'); 767 768 ctx.translate(50, 50); 769 ctx.scale(2, 2); 770 ctx.rotate(Math.PI); 771 ctx.translate(-25, -25); 772 773 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 774 ctx.fillRect(15, 15, 25, 25); 775 776 ctx.globalAlpha = 0.75; 777 ctx.globalCompositeOperation = 'hue'; 778 ctx.shadowOffsetX = 7; 779 ctx.shadowOffsetY = 7; 780 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 781 782 ctx.beginLayer(); 783 784 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 785 ctx.fillRect(10, 25, 25, 20); 786 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 787 ctx.fillRect(25, 10, 20, 25); 788 789 ctx.endLayer(); 790 </script> 791 </span> 792 793 <span> 794 <div>saturation</div> 795 <canvas class="grid-cell-content" id="canvas23" width="90" height="90"> 796 <p class="fallback">FAIL (fallback content)</p> 797 </canvas> 798 <script type="module"> 799 const canvas = document.getElementById("canvas23"); 800 const ctx = canvas.getContext('2d'); 801 802 ctx.translate(50, 50); 803 ctx.scale(2, 2); 804 ctx.rotate(Math.PI); 805 ctx.translate(-25, -25); 806 807 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 808 ctx.fillRect(15, 15, 25, 25); 809 810 ctx.globalAlpha = 0.75; 811 ctx.globalCompositeOperation = 'saturation'; 812 ctx.shadowOffsetX = 7; 813 ctx.shadowOffsetY = 7; 814 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 815 816 ctx.beginLayer(); 817 818 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 819 ctx.fillRect(10, 25, 25, 20); 820 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 821 ctx.fillRect(25, 10, 20, 25); 822 823 ctx.endLayer(); 824 </script> 825 </span> 826 827 <span> 828 <div>color</div> 829 <canvas class="grid-cell-content" id="canvas24" width="90" height="90"> 830 <p class="fallback">FAIL (fallback content)</p> 831 </canvas> 832 <script type="module"> 833 const canvas = document.getElementById("canvas24"); 834 const ctx = canvas.getContext('2d'); 835 836 ctx.translate(50, 50); 837 ctx.scale(2, 2); 838 ctx.rotate(Math.PI); 839 ctx.translate(-25, -25); 840 841 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 842 ctx.fillRect(15, 15, 25, 25); 843 844 ctx.globalAlpha = 0.75; 845 ctx.globalCompositeOperation = 'color'; 846 ctx.shadowOffsetX = 7; 847 ctx.shadowOffsetY = 7; 848 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 849 850 ctx.beginLayer(); 851 852 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 853 ctx.fillRect(10, 25, 25, 20); 854 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 855 ctx.fillRect(25, 10, 20, 25); 856 857 ctx.endLayer(); 858 </script> 859 </span> 860 861 <span> 862 <div>luminosity</div> 863 <canvas class="grid-cell-content" id="canvas25" width="90" height="90"> 864 <p class="fallback">FAIL (fallback content)</p> 865 </canvas> 866 <script type="module"> 867 const canvas = document.getElementById("canvas25"); 868 const ctx = canvas.getContext('2d'); 869 870 ctx.translate(50, 50); 871 ctx.scale(2, 2); 872 ctx.rotate(Math.PI); 873 ctx.translate(-25, -25); 874 875 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 876 ctx.fillRect(15, 15, 25, 25); 877 878 ctx.globalAlpha = 0.75; 879 ctx.globalCompositeOperation = 'luminosity'; 880 ctx.shadowOffsetX = 7; 881 ctx.shadowOffsetY = 7; 882 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 883 884 ctx.beginLayer(); 885 886 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 887 ctx.fillRect(10, 25, 25, 20); 888 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 889 ctx.fillRect(25, 10, 20, 25); 890 891 ctx.endLayer(); 892 </script> 893 </span> 894 895 </div>