29 lines
1.0 KiB
HTML
29 lines
1.0 KiB
HTML
<style>
|
|
canvas {
|
|
border: 1px solid;
|
|
}
|
|
</style>
|
|
<body>
|
|
<canvas id="c1" width="100" height="100"></canvas>
|
|
<canvas id="c2" width="100" height="100"></canvas>
|
|
<canvas id="c3" width="100" height="100"></canvas>
|
|
<canvas id="c4" width="100" height="100"></canvas>
|
|
<script>
|
|
function fillCanvasWithSolidColor(canvasId, x, y, width, height) {
|
|
const canvas = document.getElementById(canvasId);
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.fillStyle = "black";
|
|
ctx.fillRect(x, y, width, height);
|
|
}
|
|
|
|
fillCanvasWithSolidColor("c1", 20, 0, 80, 20);
|
|
fillCanvasWithSolidColor("c1", 0, 20, 20, 80);
|
|
fillCanvasWithSolidColor("c2", 80, 0, 20, 20);
|
|
fillCanvasWithSolidColor("c2", 0, 20, 80, 80);
|
|
fillCanvasWithSolidColor("c3", 20, 0, 80, 80);
|
|
fillCanvasWithSolidColor("c3", 0, 80, 20, 20);
|
|
fillCanvasWithSolidColor("c4", 80, 0, 20, 80);
|
|
fillCanvasWithSolidColor("c4", 0, 80, 80, 20);
|
|
</script>
|
|
</body>
|