在单选按钮

Question

我有两个raphael.js函数，它们是drawLine（）和drawCircle（）以及两个调用这些函数的单选按钮。
两个单选按钮按预期工作，但是一旦我点击另一个单选按钮，我使用上一个单选按钮制作的先前绘图将从div中删除。

这些是代码：

HTML

<div class="col" id="droppable" style="background-color: white;">
            <div id="raphaelContainer"></div>
        </div>

<div>
  <input type="radio" id="radio01" name="radio" value="straight" />
  <label for="radio01" style="font-family: Montserrat; font-size: 12px; font-style: italic;"><span></span>Straight</label>
</div>

<div>
  <input type="radio" id="radio02" name="radio" value="arrow" />
  <label for="radio02" style="font-family: Montserrat; font-size: 12px; font-style: italic;"><span></span>Arrow Head</label>
</div>

JQuery的

$(document).on('change', 'input[name=radio]', function() {

            var selection = $(this).val();

            if (selection == "straight") {
                drawLine();
            }else if(selection == "arrow"){
                drawcircle();
            }

        });

        function drawLine() {

                function Line(startX, startY, endX, endY, raphael) {
                    var start = {
                        x: startX,
                        y: startY
                    };
                    var end = {
                        x: endX,
                        y: endY
                    };
                    var getPath = function () {
                        return "M" + start.x + " " + start.y + " L" + end.x + " " + end.y;
                    };


                    var redraw = function () {
                        node.attr("path", getPath());
                    }

                    var node = raphael.path(getPath());

                    node.attr("stroke-width", "3"); //sets the width of the line
                    node.attr("stroke", "red");

                   //sets the color of the line

                    return {
                        updateStart: function (x, y) {
                            start.x = x;
                            start.y = y;
                            redraw();
                            return this;
                        },
                        updateEnd: function (x, y) {
                            end.x = x;
                            end.y = y;
                            redraw();
                            return this;
                        }
                    };
                };


                $(document).ready(function () {
                    var paper = Raphael("raphaelContainer", 1280, 470, 0, 0);
                    $("#raphaelContainer").mousedown(
                            function (e) {
                                x = e.offsetX;
                                y = e.offsetY;
                                line = Line(x, y, x, y, paper);
                                $("#raphaelContainer").bind('mousemove', function (e) {
                                    x = e.offsetX;
                                    y = e.offsetY;
                                    line.updateEnd(x, y);
                                });

                            });

                    $("#raphaelContainer").mouseup(
                            function (e) {
                                $("#raphaelContainer").unbind('mousemove');
                            });
                });
            }

        function drawcircle() {
            var size = 3,
                    color = "Blue",
                    fill = "F",
                    x2 = 0,
                    y2 = 0;

            $(document).ready(function () {
                var paper = Raphael("raphaelContainer", 1280, 470, 0, 0);
                var shap;
                $("#raphaelContainer").mousedown(function (e) {
                    if (e.offsetX) {
                        x1 = e.offsetX;
                        y1 = e.offsetY;
                    }
                    else if (e.layerX) {
                        x1 = e.layerX;
                        y1 = e.layerY;
                    }

                    shap = circle(x1, y1, x1, y1, paper);

                    $("#raphaelContainer").bind('mousemove', function (e) {
                        if (e.offsetX) {
                            x2 = e.offsetX;
                            y2 = e.offsetY;
                        }
                        else if (e.layerX) {
                            x2 = e.layerX;
                            y2 = e.layerY;
                        }
                        shap.updateEnd(x2, y2);
                    });
                    $("#raphaelContainer").mouseup(function (e) {
                        $("#raphaelContainer").unbind('mousemove');
                    });
                });
            });
            function circle(x1, y1, x2, y2, raphael) {

                var center = {
                    x: (x1+x2)/2,
                    y: (y1+y2)/2
                };

                var radius = {

                    h: Math.sqrt((y2 - y1) * (y2 - y1))/2,
                    w: Math.sqrt((x2 - x1) * (x2 - x1))/2

                };
                var getPath = function () {

                    return [["M", center.x, center.y], ["m", 0, -radius.h],
                        ["a", radius.w, radius.h, 0, 1, 1, 0, 2 * radius.h],
                        ["a", radius.w, radius.h, 0, 1, 1, 0, -2 * radius.h],
                        ["z"]];

                };

                var redraw = function () {

                    node.attr("path", getPath());

                    if (fill == "T")
                        node.attr(
                                {
                                    'fill': color,
                                    'stroke-width': 0
                                });
                    else {
                        node.attr(
                                {
                                    stroke: color,
                                    'stroke-width': size
                                });
                    }
                };
                var node = raphael.path(getPath());
                return {
                    updateStart: function (x, y) {
                        center.x = (x1 + x) / 2;
                        center.y = (y1 + y) / 2;
                        radius.w = Math.sqrt((x - x1) * (x - x1))/2;
                        radius.h = Math.sqrt((y - y1) * (y - y1))/2;
                        redraw();
                        return this;
                    },
                    updateEnd: function (x, y) {
                        center.x = (x1 + x) / 2;
                        center.y = (y1 + y) / 2;
                        radius.w = Math.sqrt((x - x1) * (x - x1))/2;
                        radius.h = Math.sqrt((y - y1) * (y - y1))/2;
                        redraw();
                        return this;
                    }
                };
            };
        }

修改 之前的图纸正在div下面。

这里是JSFiddle链接。
任何想法为什么会这样？任何帮助将不胜感激。感谢。