<style>
body {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><g fill="#ccc"><rect width="5" height="5"/><rect x="5" y="5" width="5" height="5"/></g></svg>');
    background-size: 100px 100px;
}

canvas {
    display: inline-block;
    width: 100px;
    height: 100px;
}
</style>
<script>
window.addEventListener("load", run, false);

function run()
{
    var canvases = document.querySelectorAll("canvas");
    Array.from(canvases).forEach(function (canvas) {
        canvas.width = 100;
        canvas.height = 100;
        var ctx = canvas.getContext("2d");
        if (canvas.dataset.type == "fill") {
            ctx.fillStyle = canvas.dataset.color;
            ctx.fillRect(0, 0, 100, 100);
        } else {
            ctx.strokeStyle = canvas.dataset.color;
            ctx.lineWidth = 20;
            ctx.strokeRect(10, 10, 80, 80);
        }
    });
}
</script>
<p>These two rows should be identical</p>
<canvas data-type="fill" data-color="red"></canvas>
<canvas data-type="fill" data-color="#00ff00"></canvas>
<canvas data-type="fill" data-color="blue"></canvas>
<canvas data-type="fill" data-color="rgba(255, 0, 0, 0.6)"></canvas>
<br>
<canvas data-type="fill" data-color="color(srgb 1 0 0)"></canvas>
<canvas data-type="fill" data-color="color(srgb 0 1 0)"></canvas>
<canvas data-type="fill" data-color="color(srgb 0 0 1)"></canvas>
<canvas data-type="fill" data-color="color(srgb 1 0 0 / 0.6)"></canvas>

<p>These two rows should be identical</p>
<canvas data-type="stroke" data-color="red"></canvas>
<canvas data-type="stroke" data-color="#00ff00"></canvas>
<canvas data-type="stroke" data-color="blue"></canvas>
<canvas data-type="stroke" data-color="rgba(255, 0, 0, 0.6)"></canvas>
<br>
<canvas data-type="stroke" data-color="color(srgb 1 0 0)"></canvas>
<canvas data-type="stroke" data-color="color(srgb 0 1 0)"></canvas>
<canvas data-type="stroke" data-color="color(srgb 0 0 1)"></canvas>
<canvas data-type="stroke" data-color="color(srgb 1 0 0 / 0.6)"></canvas>