Tengo una zona negra. En este cuadrado en diferentes esquinas tengo cuadrados azules. Con mi código, subdivido manualmente el área negra hasta que llego a mis cuadrados azules.
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>¿Hay alguna manera de hacer esto usando la recursividad? Por ejemplo, incluso si las tarjetas azules están ubicadas en diferentes áreas del área negra