<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>