I have a black area. In this square in different corners I have blue squares. With my code, I manually subdivide the black area until I get to my blue squares.
function draw() {
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let canvasWidth = 160;
canvas.width = canvas.height = canvasWidth;
context.fillRect(0,0,canvas.width,canvas.height);
let a = 20;
context.fillStyle = "blue";
context.fillRect(0,0,a,a);
context.fillRect(canvas.width-a,canvas.height-a,a,a);
context.strokeStyle = "white";
context.lineWidth = 2;
context.beginPath();
// ---
context.moveTo(0,canvas.height/2);
context.lineTo(canvas.width,canvas.height/2);
context.moveTo(canvas.width/2,0);
context.lineTo(canvas.width/2,canvas.height);
// ---
context.moveTo(0,canvas.height/2/2);
context.lineTo(canvas.width/2,canvas.height/2/2);
context.moveTo(canvas.width/2/2,0);
context.lineTo(canvas.width/2/2,canvas.height/2);
//
context.moveTo(0,canvas.height/2/2/2);
context.lineTo(canvas.width/2/2,canvas.height/2/2/2);
context.moveTo(canvas.width/2/2/2,0);
context.lineTo(canvas.width/2/2/2,canvas.height/2/2);
// ---
context.moveTo(canvas.width/2,canvas.height/2+canvas.height/4);
context.lineTo(canvas.width,canvas.height/2+canvas.height/4);
context.moveTo(canvas.width/2+canvas.width/4,canvas.height/2);
context.lineTo(canvas.width/2+canvas.width/4,canvas.height);
// ---
context.moveTo(canvas.width/2+canvas.width/4,canvas.height/2+canvas.height/8*3);
context.lineTo(canvas.width,canvas.height/2+canvas.height/8*3);
context.moveTo(canvas.width/2+canvas.width/8*3,canvas.height/2+canvas.height/8*2);
context.lineTo(canvas.width/2+canvas.width/8*3,canvas.height);
context.stroke();
}<body onload="draw();">
<canvas id="canvas"></canvas>
</body>Is there a way to do this using recursion? For example, even if blue cards are located in different areas of the black area