| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <style> |
| html { text-align: center; } |
| canvas { border-radius: 100px; box-shadow: 0 0 16px #0008; margin: 16px; } |
| @media (prefers-color-scheme: dark) { |
| html { background-color: black; } |
| canvas { box-shadow: 0 0 16px #fff4; } |
| } |
| </style> |
| <canvas id="canvas-srgb" width="200" height="200"></canvas> |
| <canvas id="canvas-display-p3" width="200" height="200"></canvas> |
| <script> |
| const STOP_COLORS = ["1 0 0", "1 0 1", "0 0 1", "0 1 0", "1 1 0", "1 0 0"]; |
| |
| for (let colorSpace of ["srgb", "display-p3"]) { |
| let canvas = document.getElementById(`canvas-${colorSpace}`); |
| let context = canvas.getContext("2d", { colorSpace }); |
| let gradient = context.createConicGradient(0, 100, 100); |
| for (let i = 0; i < STOP_COLORS.length; ++i) |
| gradient.addColorStop(i / (STOP_COLORS.length - 1), `color(display-p3 ${STOP_COLORS[i]})`); |
| context.fillStyle = gradient; |
| context.fillRect(0, 0, 200, 200); |
| } |
| </script> |
