tengo un problema con mi código, estoy tratando de dibujar un patrón repetitivo con un lienzo pero sigue cortando una pieza. ¿Alguien sabe si es posible calcular qué dimensiones se necesitan para el lienzo?
Yo uso este código para generar los lienzos:
const beginLength = 600; const minLength = 1; var alpha = 90; var beta = -90; const ratioA = 0.7; const ratioB = 0.7; const Point = function(x, y) { this.X = x; this.Y = y; }; const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); canvas.width = window.innerWidth * 1; canvas.height = window.innerHeight * 1; const drawLine = function(rootPoint, r, theta) { context.beginPath(); const endX = rootPoint.X + r * Math.cos(theta); const endY = rootPoint.Y + r * Math.sin(theta); const endPoint = new Point(endX, endY); context.moveTo(rootPoint.X, rootPoint.Y); context.lineTo(endPoint.X, endPoint.Y); context.strokeStyle = generateColor(); context.stroke(); if (r * ratioA < minLength || r * ratioB < minLength) { return; } else { drawLine(endPoint, r * ratioA, theta + alpha); drawLine(endPoint, r * ratioB, theta + beta); } }; function generateColor() { return "rgb(" + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ")"; } beta = beta / 180 * Math.PI; alpha = alpha / 180 * Math.PI; drawLine(new Point(canvas.width / 2, canvas.height), beginLength, Math.PI * 1.5); <!DOCTYPE HTML> <html> <head> <link rel="icon" type="image/x-icon" href="svg/draw.png"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css2?family=Hubballi&family=Oxygen:wght@300&family=Roboto+Mono:wght@200&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/index.css" /> </head> <body> <canvas id="canvas" style="image-rendering: pixelated;"></canvas> </body> </html>