2d.gradient.hueInterpolationMethod.html (20747B)
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.gradient.hueInterpolationMethod-expected.html"> 6 <meta name=fuzzy content="maxDifference=0-1; totalPixels=0-60000"> 7 <title>Canvas test: 2d.gradient.hueInterpolationMethod</title> 8 <h1>2d.gradient.hueInterpolationMethod</h1> 9 <p class="desc">CSS hue interpolation methods work for CanvasGradients</p> 10 11 <div class="grid-container" style="--grid-width: 4"> 12 <span> 13 <div>shorter</div> 14 <div>hsl</div> 15 <canvas class="grid-cell-content" id="canvas0" width="100" height="50"> 16 <p class="fallback">FAIL (fallback content)</p> 17 </canvas> 18 <script type="module"> 19 const canvas = new OffscreenCanvas(100, 50); 20 const ctx = canvas.getContext('2d'); 21 22 // Generate two gradients, one from red to green, the other from red to blue. 23 // In the first instance "shorter" is equivalent to "increasing". 24 // In the second, "shorter" is equivalent to "decreasing". 25 26 var g = ctx.createLinearGradient(0, 0, 100, 0); 27 g.addColorStop(0, 'color(srgb 1 0 0)'); 28 g.addColorStop(1, 'color(srgb 0 1 0)'); 29 g.colorInterpolationMethod = 'hsl'; 30 g.hueInterpolationMethod = 'shorter'; 31 ctx.fillStyle = g; 32 ctx.fillRect(0, 0, 100, 25); 33 34 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 35 g2.addColorStop(0, 'color(srgb 1 0 0)'); 36 g2.addColorStop(1, 'color(srgb 0 0 1)'); 37 g2.colorInterpolationMethod = 'hsl'; 38 g2.hueInterpolationMethod = 'shorter'; 39 ctx.fillStyle = g2; 40 ctx.fillRect(0, 25, 100, 25); 41 42 const outputCanvas = document.getElementById("canvas0"); 43 const outputCtx = outputCanvas.getContext('2d'); 44 outputCtx.drawImage(canvas, 0, 0); 45 </script> 46 </span> 47 48 <span> 49 <div>longer</div> 50 <div>hsl</div> 51 <canvas class="grid-cell-content" id="canvas1" width="100" height="50"> 52 <p class="fallback">FAIL (fallback content)</p> 53 </canvas> 54 <script type="module"> 55 const canvas = new OffscreenCanvas(100, 50); 56 const ctx = canvas.getContext('2d'); 57 58 // Generate two gradients, one from red to green, the other from red to blue. 59 // In the first instance "shorter" is equivalent to "increasing". 60 // In the second, "shorter" is equivalent to "decreasing". 61 62 var g = ctx.createLinearGradient(0, 0, 100, 0); 63 g.addColorStop(0, 'color(srgb 1 0 0)'); 64 g.addColorStop(1, 'color(srgb 0 1 0)'); 65 g.colorInterpolationMethod = 'hsl'; 66 g.hueInterpolationMethod = 'longer'; 67 ctx.fillStyle = g; 68 ctx.fillRect(0, 0, 100, 25); 69 70 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 71 g2.addColorStop(0, 'color(srgb 1 0 0)'); 72 g2.addColorStop(1, 'color(srgb 0 0 1)'); 73 g2.colorInterpolationMethod = 'hsl'; 74 g2.hueInterpolationMethod = 'longer'; 75 ctx.fillStyle = g2; 76 ctx.fillRect(0, 25, 100, 25); 77 78 const outputCanvas = document.getElementById("canvas1"); 79 const outputCtx = outputCanvas.getContext('2d'); 80 outputCtx.drawImage(canvas, 0, 0); 81 </script> 82 </span> 83 84 <span> 85 <div>increasing</div> 86 <div>hsl</div> 87 <canvas class="grid-cell-content" id="canvas2" width="100" height="50"> 88 <p class="fallback">FAIL (fallback content)</p> 89 </canvas> 90 <script type="module"> 91 const canvas = new OffscreenCanvas(100, 50); 92 const ctx = canvas.getContext('2d'); 93 94 // Generate two gradients, one from red to green, the other from red to blue. 95 // In the first instance "shorter" is equivalent to "increasing". 96 // In the second, "shorter" is equivalent to "decreasing". 97 98 var g = ctx.createLinearGradient(0, 0, 100, 0); 99 g.addColorStop(0, 'color(srgb 1 0 0)'); 100 g.addColorStop(1, 'color(srgb 0 1 0)'); 101 g.colorInterpolationMethod = 'hsl'; 102 g.hueInterpolationMethod = 'increasing'; 103 ctx.fillStyle = g; 104 ctx.fillRect(0, 0, 100, 25); 105 106 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 107 g2.addColorStop(0, 'color(srgb 1 0 0)'); 108 g2.addColorStop(1, 'color(srgb 0 0 1)'); 109 g2.colorInterpolationMethod = 'hsl'; 110 g2.hueInterpolationMethod = 'increasing'; 111 ctx.fillStyle = g2; 112 ctx.fillRect(0, 25, 100, 25); 113 114 const outputCanvas = document.getElementById("canvas2"); 115 const outputCtx = outputCanvas.getContext('2d'); 116 outputCtx.drawImage(canvas, 0, 0); 117 </script> 118 </span> 119 120 <span> 121 <div>decreasing</div> 122 <div>hsl</div> 123 <canvas class="grid-cell-content" id="canvas3" width="100" height="50"> 124 <p class="fallback">FAIL (fallback content)</p> 125 </canvas> 126 <script type="module"> 127 const canvas = new OffscreenCanvas(100, 50); 128 const ctx = canvas.getContext('2d'); 129 130 // Generate two gradients, one from red to green, the other from red to blue. 131 // In the first instance "shorter" is equivalent to "increasing". 132 // In the second, "shorter" is equivalent to "decreasing". 133 134 var g = ctx.createLinearGradient(0, 0, 100, 0); 135 g.addColorStop(0, 'color(srgb 1 0 0)'); 136 g.addColorStop(1, 'color(srgb 0 1 0)'); 137 g.colorInterpolationMethod = 'hsl'; 138 g.hueInterpolationMethod = 'decreasing'; 139 ctx.fillStyle = g; 140 ctx.fillRect(0, 0, 100, 25); 141 142 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 143 g2.addColorStop(0, 'color(srgb 1 0 0)'); 144 g2.addColorStop(1, 'color(srgb 0 0 1)'); 145 g2.colorInterpolationMethod = 'hsl'; 146 g2.hueInterpolationMethod = 'decreasing'; 147 ctx.fillStyle = g2; 148 ctx.fillRect(0, 25, 100, 25); 149 150 const outputCanvas = document.getElementById("canvas3"); 151 const outputCtx = outputCanvas.getContext('2d'); 152 outputCtx.drawImage(canvas, 0, 0); 153 </script> 154 </span> 155 156 <span> 157 <div>shorter</div> 158 <div>hwb</div> 159 <canvas class="grid-cell-content" id="canvas4" width="100" height="50"> 160 <p class="fallback">FAIL (fallback content)</p> 161 </canvas> 162 <script type="module"> 163 const canvas = new OffscreenCanvas(100, 50); 164 const ctx = canvas.getContext('2d'); 165 166 // Generate two gradients, one from red to green, the other from red to blue. 167 // In the first instance "shorter" is equivalent to "increasing". 168 // In the second, "shorter" is equivalent to "decreasing". 169 170 var g = ctx.createLinearGradient(0, 0, 100, 0); 171 g.addColorStop(0, 'color(srgb 1 0 0)'); 172 g.addColorStop(1, 'color(srgb 0 1 0)'); 173 g.colorInterpolationMethod = 'hwb'; 174 g.hueInterpolationMethod = 'shorter'; 175 ctx.fillStyle = g; 176 ctx.fillRect(0, 0, 100, 25); 177 178 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 179 g2.addColorStop(0, 'color(srgb 1 0 0)'); 180 g2.addColorStop(1, 'color(srgb 0 0 1)'); 181 g2.colorInterpolationMethod = 'hwb'; 182 g2.hueInterpolationMethod = 'shorter'; 183 ctx.fillStyle = g2; 184 ctx.fillRect(0, 25, 100, 25); 185 186 const outputCanvas = document.getElementById("canvas4"); 187 const outputCtx = outputCanvas.getContext('2d'); 188 outputCtx.drawImage(canvas, 0, 0); 189 </script> 190 </span> 191 192 <span> 193 <div>longer</div> 194 <div>hwb</div> 195 <canvas class="grid-cell-content" id="canvas5" width="100" height="50"> 196 <p class="fallback">FAIL (fallback content)</p> 197 </canvas> 198 <script type="module"> 199 const canvas = new OffscreenCanvas(100, 50); 200 const ctx = canvas.getContext('2d'); 201 202 // Generate two gradients, one from red to green, the other from red to blue. 203 // In the first instance "shorter" is equivalent to "increasing". 204 // In the second, "shorter" is equivalent to "decreasing". 205 206 var g = ctx.createLinearGradient(0, 0, 100, 0); 207 g.addColorStop(0, 'color(srgb 1 0 0)'); 208 g.addColorStop(1, 'color(srgb 0 1 0)'); 209 g.colorInterpolationMethod = 'hwb'; 210 g.hueInterpolationMethod = 'longer'; 211 ctx.fillStyle = g; 212 ctx.fillRect(0, 0, 100, 25); 213 214 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 215 g2.addColorStop(0, 'color(srgb 1 0 0)'); 216 g2.addColorStop(1, 'color(srgb 0 0 1)'); 217 g2.colorInterpolationMethod = 'hwb'; 218 g2.hueInterpolationMethod = 'longer'; 219 ctx.fillStyle = g2; 220 ctx.fillRect(0, 25, 100, 25); 221 222 const outputCanvas = document.getElementById("canvas5"); 223 const outputCtx = outputCanvas.getContext('2d'); 224 outputCtx.drawImage(canvas, 0, 0); 225 </script> 226 </span> 227 228 <span> 229 <div>increasing</div> 230 <div>hwb</div> 231 <canvas class="grid-cell-content" id="canvas6" width="100" height="50"> 232 <p class="fallback">FAIL (fallback content)</p> 233 </canvas> 234 <script type="module"> 235 const canvas = new OffscreenCanvas(100, 50); 236 const ctx = canvas.getContext('2d'); 237 238 // Generate two gradients, one from red to green, the other from red to blue. 239 // In the first instance "shorter" is equivalent to "increasing". 240 // In the second, "shorter" is equivalent to "decreasing". 241 242 var g = ctx.createLinearGradient(0, 0, 100, 0); 243 g.addColorStop(0, 'color(srgb 1 0 0)'); 244 g.addColorStop(1, 'color(srgb 0 1 0)'); 245 g.colorInterpolationMethod = 'hwb'; 246 g.hueInterpolationMethod = 'increasing'; 247 ctx.fillStyle = g; 248 ctx.fillRect(0, 0, 100, 25); 249 250 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 251 g2.addColorStop(0, 'color(srgb 1 0 0)'); 252 g2.addColorStop(1, 'color(srgb 0 0 1)'); 253 g2.colorInterpolationMethod = 'hwb'; 254 g2.hueInterpolationMethod = 'increasing'; 255 ctx.fillStyle = g2; 256 ctx.fillRect(0, 25, 100, 25); 257 258 const outputCanvas = document.getElementById("canvas6"); 259 const outputCtx = outputCanvas.getContext('2d'); 260 outputCtx.drawImage(canvas, 0, 0); 261 </script> 262 </span> 263 264 <span> 265 <div>decreasing</div> 266 <div>hwb</div> 267 <canvas class="grid-cell-content" id="canvas7" width="100" height="50"> 268 <p class="fallback">FAIL (fallback content)</p> 269 </canvas> 270 <script type="module"> 271 const canvas = new OffscreenCanvas(100, 50); 272 const ctx = canvas.getContext('2d'); 273 274 // Generate two gradients, one from red to green, the other from red to blue. 275 // In the first instance "shorter" is equivalent to "increasing". 276 // In the second, "shorter" is equivalent to "decreasing". 277 278 var g = ctx.createLinearGradient(0, 0, 100, 0); 279 g.addColorStop(0, 'color(srgb 1 0 0)'); 280 g.addColorStop(1, 'color(srgb 0 1 0)'); 281 g.colorInterpolationMethod = 'hwb'; 282 g.hueInterpolationMethod = 'decreasing'; 283 ctx.fillStyle = g; 284 ctx.fillRect(0, 0, 100, 25); 285 286 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 287 g2.addColorStop(0, 'color(srgb 1 0 0)'); 288 g2.addColorStop(1, 'color(srgb 0 0 1)'); 289 g2.colorInterpolationMethod = 'hwb'; 290 g2.hueInterpolationMethod = 'decreasing'; 291 ctx.fillStyle = g2; 292 ctx.fillRect(0, 25, 100, 25); 293 294 const outputCanvas = document.getElementById("canvas7"); 295 const outputCtx = outputCanvas.getContext('2d'); 296 outputCtx.drawImage(canvas, 0, 0); 297 </script> 298 </span> 299 300 <span> 301 <div>shorter</div> 302 <div>lch</div> 303 <canvas class="grid-cell-content" id="canvas8" width="100" height="50"> 304 <p class="fallback">FAIL (fallback content)</p> 305 </canvas> 306 <script type="module"> 307 const canvas = new OffscreenCanvas(100, 50); 308 const ctx = canvas.getContext('2d'); 309 310 // Generate two gradients, one from red to green, the other from red to blue. 311 // In the first instance "shorter" is equivalent to "increasing". 312 // In the second, "shorter" is equivalent to "decreasing". 313 314 var g = ctx.createLinearGradient(0, 0, 100, 0); 315 g.addColorStop(0, 'color(srgb 1 0 0)'); 316 g.addColorStop(1, 'color(srgb 0 1 0)'); 317 g.colorInterpolationMethod = 'lch'; 318 g.hueInterpolationMethod = 'shorter'; 319 ctx.fillStyle = g; 320 ctx.fillRect(0, 0, 100, 25); 321 322 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 323 g2.addColorStop(0, 'color(srgb 1 0 0)'); 324 g2.addColorStop(1, 'color(srgb 0 0 1)'); 325 g2.colorInterpolationMethod = 'lch'; 326 g2.hueInterpolationMethod = 'shorter'; 327 ctx.fillStyle = g2; 328 ctx.fillRect(0, 25, 100, 25); 329 330 const outputCanvas = document.getElementById("canvas8"); 331 const outputCtx = outputCanvas.getContext('2d'); 332 outputCtx.drawImage(canvas, 0, 0); 333 </script> 334 </span> 335 336 <span> 337 <div>longer</div> 338 <div>lch</div> 339 <canvas class="grid-cell-content" id="canvas9" width="100" height="50"> 340 <p class="fallback">FAIL (fallback content)</p> 341 </canvas> 342 <script type="module"> 343 const canvas = new OffscreenCanvas(100, 50); 344 const ctx = canvas.getContext('2d'); 345 346 // Generate two gradients, one from red to green, the other from red to blue. 347 // In the first instance "shorter" is equivalent to "increasing". 348 // In the second, "shorter" is equivalent to "decreasing". 349 350 var g = ctx.createLinearGradient(0, 0, 100, 0); 351 g.addColorStop(0, 'color(srgb 1 0 0)'); 352 g.addColorStop(1, 'color(srgb 0 1 0)'); 353 g.colorInterpolationMethod = 'lch'; 354 g.hueInterpolationMethod = 'longer'; 355 ctx.fillStyle = g; 356 ctx.fillRect(0, 0, 100, 25); 357 358 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 359 g2.addColorStop(0, 'color(srgb 1 0 0)'); 360 g2.addColorStop(1, 'color(srgb 0 0 1)'); 361 g2.colorInterpolationMethod = 'lch'; 362 g2.hueInterpolationMethod = 'longer'; 363 ctx.fillStyle = g2; 364 ctx.fillRect(0, 25, 100, 25); 365 366 const outputCanvas = document.getElementById("canvas9"); 367 const outputCtx = outputCanvas.getContext('2d'); 368 outputCtx.drawImage(canvas, 0, 0); 369 </script> 370 </span> 371 372 <span> 373 <div>increasing</div> 374 <div>lch</div> 375 <canvas class="grid-cell-content" id="canvas10" width="100" height="50"> 376 <p class="fallback">FAIL (fallback content)</p> 377 </canvas> 378 <script type="module"> 379 const canvas = new OffscreenCanvas(100, 50); 380 const ctx = canvas.getContext('2d'); 381 382 // Generate two gradients, one from red to green, the other from red to blue. 383 // In the first instance "shorter" is equivalent to "increasing". 384 // In the second, "shorter" is equivalent to "decreasing". 385 386 var g = ctx.createLinearGradient(0, 0, 100, 0); 387 g.addColorStop(0, 'color(srgb 1 0 0)'); 388 g.addColorStop(1, 'color(srgb 0 1 0)'); 389 g.colorInterpolationMethod = 'lch'; 390 g.hueInterpolationMethod = 'increasing'; 391 ctx.fillStyle = g; 392 ctx.fillRect(0, 0, 100, 25); 393 394 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 395 g2.addColorStop(0, 'color(srgb 1 0 0)'); 396 g2.addColorStop(1, 'color(srgb 0 0 1)'); 397 g2.colorInterpolationMethod = 'lch'; 398 g2.hueInterpolationMethod = 'increasing'; 399 ctx.fillStyle = g2; 400 ctx.fillRect(0, 25, 100, 25); 401 402 const outputCanvas = document.getElementById("canvas10"); 403 const outputCtx = outputCanvas.getContext('2d'); 404 outputCtx.drawImage(canvas, 0, 0); 405 </script> 406 </span> 407 408 <span> 409 <div>decreasing</div> 410 <div>lch</div> 411 <canvas class="grid-cell-content" id="canvas11" width="100" height="50"> 412 <p class="fallback">FAIL (fallback content)</p> 413 </canvas> 414 <script type="module"> 415 const canvas = new OffscreenCanvas(100, 50); 416 const ctx = canvas.getContext('2d'); 417 418 // Generate two gradients, one from red to green, the other from red to blue. 419 // In the first instance "shorter" is equivalent to "increasing". 420 // In the second, "shorter" is equivalent to "decreasing". 421 422 var g = ctx.createLinearGradient(0, 0, 100, 0); 423 g.addColorStop(0, 'color(srgb 1 0 0)'); 424 g.addColorStop(1, 'color(srgb 0 1 0)'); 425 g.colorInterpolationMethod = 'lch'; 426 g.hueInterpolationMethod = 'decreasing'; 427 ctx.fillStyle = g; 428 ctx.fillRect(0, 0, 100, 25); 429 430 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 431 g2.addColorStop(0, 'color(srgb 1 0 0)'); 432 g2.addColorStop(1, 'color(srgb 0 0 1)'); 433 g2.colorInterpolationMethod = 'lch'; 434 g2.hueInterpolationMethod = 'decreasing'; 435 ctx.fillStyle = g2; 436 ctx.fillRect(0, 25, 100, 25); 437 438 const outputCanvas = document.getElementById("canvas11"); 439 const outputCtx = outputCanvas.getContext('2d'); 440 outputCtx.drawImage(canvas, 0, 0); 441 </script> 442 </span> 443 444 <span> 445 <div>shorter</div> 446 <div>oklch</div> 447 <canvas class="grid-cell-content" id="canvas12" width="100" height="50"> 448 <p class="fallback">FAIL (fallback content)</p> 449 </canvas> 450 <script type="module"> 451 const canvas = new OffscreenCanvas(100, 50); 452 const ctx = canvas.getContext('2d'); 453 454 // Generate two gradients, one from red to green, the other from red to blue. 455 // In the first instance "shorter" is equivalent to "increasing". 456 // In the second, "shorter" is equivalent to "decreasing". 457 458 var g = ctx.createLinearGradient(0, 0, 100, 0); 459 g.addColorStop(0, 'color(srgb 1 0 0)'); 460 g.addColorStop(1, 'color(srgb 0 1 0)'); 461 g.colorInterpolationMethod = 'oklch'; 462 g.hueInterpolationMethod = 'shorter'; 463 ctx.fillStyle = g; 464 ctx.fillRect(0, 0, 100, 25); 465 466 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 467 g2.addColorStop(0, 'color(srgb 1 0 0)'); 468 g2.addColorStop(1, 'color(srgb 0 0 1)'); 469 g2.colorInterpolationMethod = 'oklch'; 470 g2.hueInterpolationMethod = 'shorter'; 471 ctx.fillStyle = g2; 472 ctx.fillRect(0, 25, 100, 25); 473 474 const outputCanvas = document.getElementById("canvas12"); 475 const outputCtx = outputCanvas.getContext('2d'); 476 outputCtx.drawImage(canvas, 0, 0); 477 </script> 478 </span> 479 480 <span> 481 <div>longer</div> 482 <div>oklch</div> 483 <canvas class="grid-cell-content" id="canvas13" width="100" height="50"> 484 <p class="fallback">FAIL (fallback content)</p> 485 </canvas> 486 <script type="module"> 487 const canvas = new OffscreenCanvas(100, 50); 488 const ctx = canvas.getContext('2d'); 489 490 // Generate two gradients, one from red to green, the other from red to blue. 491 // In the first instance "shorter" is equivalent to "increasing". 492 // In the second, "shorter" is equivalent to "decreasing". 493 494 var g = ctx.createLinearGradient(0, 0, 100, 0); 495 g.addColorStop(0, 'color(srgb 1 0 0)'); 496 g.addColorStop(1, 'color(srgb 0 1 0)'); 497 g.colorInterpolationMethod = 'oklch'; 498 g.hueInterpolationMethod = 'longer'; 499 ctx.fillStyle = g; 500 ctx.fillRect(0, 0, 100, 25); 501 502 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 503 g2.addColorStop(0, 'color(srgb 1 0 0)'); 504 g2.addColorStop(1, 'color(srgb 0 0 1)'); 505 g2.colorInterpolationMethod = 'oklch'; 506 g2.hueInterpolationMethod = 'longer'; 507 ctx.fillStyle = g2; 508 ctx.fillRect(0, 25, 100, 25); 509 510 const outputCanvas = document.getElementById("canvas13"); 511 const outputCtx = outputCanvas.getContext('2d'); 512 outputCtx.drawImage(canvas, 0, 0); 513 </script> 514 </span> 515 516 <span> 517 <div>increasing</div> 518 <div>oklch</div> 519 <canvas class="grid-cell-content" id="canvas14" width="100" height="50"> 520 <p class="fallback">FAIL (fallback content)</p> 521 </canvas> 522 <script type="module"> 523 const canvas = new OffscreenCanvas(100, 50); 524 const ctx = canvas.getContext('2d'); 525 526 // Generate two gradients, one from red to green, the other from red to blue. 527 // In the first instance "shorter" is equivalent to "increasing". 528 // In the second, "shorter" is equivalent to "decreasing". 529 530 var g = ctx.createLinearGradient(0, 0, 100, 0); 531 g.addColorStop(0, 'color(srgb 1 0 0)'); 532 g.addColorStop(1, 'color(srgb 0 1 0)'); 533 g.colorInterpolationMethod = 'oklch'; 534 g.hueInterpolationMethod = 'increasing'; 535 ctx.fillStyle = g; 536 ctx.fillRect(0, 0, 100, 25); 537 538 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 539 g2.addColorStop(0, 'color(srgb 1 0 0)'); 540 g2.addColorStop(1, 'color(srgb 0 0 1)'); 541 g2.colorInterpolationMethod = 'oklch'; 542 g2.hueInterpolationMethod = 'increasing'; 543 ctx.fillStyle = g2; 544 ctx.fillRect(0, 25, 100, 25); 545 546 const outputCanvas = document.getElementById("canvas14"); 547 const outputCtx = outputCanvas.getContext('2d'); 548 outputCtx.drawImage(canvas, 0, 0); 549 </script> 550 </span> 551 552 <span> 553 <div>decreasing</div> 554 <div>oklch</div> 555 <canvas class="grid-cell-content" id="canvas15" width="100" height="50"> 556 <p class="fallback">FAIL (fallback content)</p> 557 </canvas> 558 <script type="module"> 559 const canvas = new OffscreenCanvas(100, 50); 560 const ctx = canvas.getContext('2d'); 561 562 // Generate two gradients, one from red to green, the other from red to blue. 563 // In the first instance "shorter" is equivalent to "increasing". 564 // In the second, "shorter" is equivalent to "decreasing". 565 566 var g = ctx.createLinearGradient(0, 0, 100, 0); 567 g.addColorStop(0, 'color(srgb 1 0 0)'); 568 g.addColorStop(1, 'color(srgb 0 1 0)'); 569 g.colorInterpolationMethod = 'oklch'; 570 g.hueInterpolationMethod = 'decreasing'; 571 ctx.fillStyle = g; 572 ctx.fillRect(0, 0, 100, 25); 573 574 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 575 g2.addColorStop(0, 'color(srgb 1 0 0)'); 576 g2.addColorStop(1, 'color(srgb 0 0 1)'); 577 g2.colorInterpolationMethod = 'oklch'; 578 g2.hueInterpolationMethod = 'decreasing'; 579 ctx.fillStyle = g2; 580 ctx.fillRect(0, 25, 100, 25); 581 582 const outputCanvas = document.getElementById("canvas15"); 583 const outputCtx = outputCanvas.getContext('2d'); 584 outputCtx.drawImage(canvas, 0, 0); 585 </script> 586 </span> 587 588 </div>