56 lines
1.9 KiB
HTML
56 lines
1.9 KiB
HTML
<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="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>
|
|
|
|
<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="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>
|
|
|