0.9.8 • Published 1 year ago
squared-circle v0.9.8
squared-circle
Draws a squared circle to a canvas object. It has 4 equal length sides, 4 right angles, but no paralell lines, so looks like a keyhole.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alternative Square</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
<script type="module" src="./dist/bundle.js">
</script>
</body>
</html>const sc = require ('squared-circle');
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let origin = {
x: canvas.width / 2,
y: canvas.height / 2,
};
ctx.beginPath();
ctx.arc(origin.x, origin.y, 390, 0, 2 * Math.PI);
ctx.stroke();
sc.drawSquaredCircleDebug(ctx, origin, 20 * (Math.PI / 180), 290);
console.log("290", sc.squaredCircleArea(290), 290 * 290);
origin.x = origin.x / 2;
sc.drawSquaredCircleDebug(ctx, origin, 90 * (Math.PI / 180), 170);
console.log("170", sc.squaredCircleArea(170), 170 * 170);
origin.y = origin.y / 2;
sc.drawSquaredCircle(ctx, origin, 220 * (Math.PI / 180), 70);
console.log("70", sc.squaredCircleArea(70), 70 * 70);