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