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