<!DOCTYPE html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<canvas id="canvas-srgb" width="220" height="220"></canvas>
<canvas id="canvas-display-p3" width="220" height="220"></canvas>
<style>
html { text-align: center; }
canvas { background-color: #ddd; }
@media (prefers-color-scheme: dark) {
    html { background-color: black; }
    canvas { background-color: #444; }
}
</style>
<script>
for (let colorSpace of ["srgb", "display-p3"]) {
    let canvas = document.getElementById(`canvas-${colorSpace}`);
    let context = canvas.getContext("2d", { colorSpace });
    let position = 20;
    for (let green of [1, 0]) {
        for (let blue of [1, 0]) {
            for (let red of [1, 0]) {
                context.fillStyle = `color(display-p3 ${red} ${green} ${blue})`;
                context.fillRect(position, position, 40, 40);
                position += 20;
            }
        }
    }
}
</script>