blob: 5c8e7578e613e126300fde4f4cb5c748a37d4b72 [file] [log] [blame]
<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>