Squared-circle NPM

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);

example image