canvas で円を描画 #JavaScript

日経ソフトウェア2013年7月号のコードを若干アレンジ
3点を使って円を描画.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>3点を使って円を描画</title>
    <style>canvas { background-color: #d0d0d0; }</style>
</head>
<body onload="draw()">
    <canvas id="canvas" width="600" height="600"></canvas>
<script>

    xx = new Array(3);
    yy = new Array(3);
    var cx, cy;     // 円の中心
    var n = 0;      // クリック回数のカウンタ

    function draw() {
        var canvas = document.getElementById("canvas"); // 描画対象の canvas を選択
        var context = canvas.getContext("2d");          // 描画コンテキストを取得

        // マウスダウンイベント処理
        canvas.onmousedown = function(e) {
            // canvas 内でのマウス座標を計算
            var rect = e.target.getBoundingClientRect();
            var mouseX = e.clientX - rect.left;
            var mouseY = e.clientY - rect.top;

            context.beginPath();
            context.strokeStyle = "rgb(128, 128, 128)";

            xx[n] = mouseX;
            yy[n] = mouseY;
            context.rect(xx[n], yy[n], 2, 2);   // 点を描画
            if( n >= 2 ) {
                drawLine();     // 3点を結ぶ直線を描画
                calcCenter();   // 垂直二等分線の交点を計算
                drawCircle();   // 3点を通る円を描画
                n = 0;
            } else {
                n++;
            }
            context.stroke();
        }

        // 3点を結ぶ直線を描画
        function drawLine() {
            context.beginPath();
            context.strokeStyle = "rgb(128, 128, 128)";
            context.moveTo(xx[0], yy[0]);
            context.lineTo(xx[1], yy[1]);
            context.lineTo(xx[2], yy[2]);
            context.closePath();
            context.stroke();
        }

        // 垂直二等分線の交点を求める
        function calcCenter() {
            // 2点間の垂直2等分線を求める
            f = function (x1, y1, x2, y2) {
                // 直線の係数を求める
                var a = (y2 - y1) / (x2 - x1);
                var b = y1 - (a * x1);
                // 直線の中点を求める
                var mx = x1 + ((x2 - x1) / 2);
                var my = y1 + ((y2 - y1) / 2);
                // 直線の垂直二等分線の係数を求める
                var aa = -1 / a;
                var bb = my - (aa * mx);
                return [mx, my, aa, bb];
            }
            ret = f(xx[0], yy[0], xx[1], yy[1]);
            m1 = [ret[0], ret[1]];              // 中点座標
            ab = [ret[2], ret[3]];              // 垂直二等分線の係数
            ret = f(xx[1], yy[1], xx[2], yy[2]);
            m2 = [ret[0], ret[1]];
            cd = [ret[2], ret[3]];

            // 二つの垂直二等分線の交点を求める
            // 解法）x = (-1/(-a+c) * -b) + (1/(-a+c) * -d)
            //       y = (-c/(-a+c) * -b) + (a/(-a+c) * -d)
            var z = 1 / (-ab[0] + cd[0]);                   // z = 1/(-a+c)
            cx = z * (-1     * -ab[1] + 1     * -cd[1]);    // x = z * (-1 * -b + 1 * -d)
            cy = z * (-cd[0] * -ab[1] + ab[0] * -cd[1]);    // y = z * (-c * -b + a * -d)

            // 垂直二等分線を描画
            context.strokeStyle = "rgb(0, 255, 0)"
            context.beginPath();
            context.moveTo(cx, cy);
            context.lineTo(m1[0], m1[1]);
            context.stroke();
            //
            context.beginPath();
            context.moveTo(cx, cy);
            context.lineTo(m2[0], m2[1]);
            context.stroke();
        }

        // 3点を通る円を描画
        function drawCircle() {
            // 円の半径を求める
            var r = Math.sqrt(Math.pow(cx - xx[0], 2) + Math.pow(cy - yy[0], 2));

            // 円を描画
            context.beginPath();
            context.strokeStyle = "rgb(255, 0, 0)";
            context.arc(cx, cy, r, 0, 2 * Math.PI, true);
            context.stroke();
        }
    }
</script>
</html>