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