i have a problem with my code, i'm trying to draw a repeating pattern with a canvas but it keeps cutting off a piece. Does anyone know if it is possible to calculate what dimensions are needed for the canvas?
I use this code to generate the canvases:
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>