prototype.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Canvas experiment</title>
    <script type="application/javascript">
      function draw() {
        const canvas = document.getElementById("canvas");
        if (canvas.getContext) {
          const ctx = canvas.getContext("2d");

          ctx.fillStyle = "rgb(200, 0, 0)";
          ctx.fillRect(10, 10, 50, 50);

          ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
          ctx.fillRect(30, 30, 50, 50);
        }
      }

      /*
      d1 = 3.3 //mm
      d2 = 1.4
      d3 = 2.9
	  //xInt = 0.7 actual
      //ymax = 1.25 actual
	  */
	  
      d1 = 2.8 //mm
      d2 = 2.2
      d3 = 2.2
	  //xInt = 1.3 actual
      //ymax = 1.8 actual	  

      xMax = d1
      xInt = (d1**2 + d2**2 - d3**2) / (2*d1)
      console.log(xInt)
      yMax = Math.sqrt(d2**2 - xInt**2)
      console.log(yMax)
                                                                                                                             
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
</html>