使用不同长度的javascript ctx.rect函数绘制正方形

Question

我是javascript的新手。我有一个基于坐标和距离绘制矩形的程序。我想添加绘制正方形的选项。以下是我在JS中的代码，当我在html中选择矩形时。任何人都可以指导，如果我在变量modeName中添加“square”选项，需要在下面的代码中进行哪些更改。感谢

return {
    setRadio: function(groupNum,buttonNum) {
      var oldFillColor=fillColor,oldStrokeColor=strokeColor;
      // add option square
      var modeName=["Selection","Rectangle", "Set Properties"];

      switch (groupNum) {
        case 0: // Mode options 
          if (modeOption==buttonNum)
            return;
          trace("Mode switch from "+modeName[modeOption]+" to "+
            modeName[buttonNum]);
          if (buttonNum==0) { // Change to selection, save state
            selectionSaveFillColor=fillColor;
            selectionSaveStrokeColor=strokeColor;
            selectionSaveStrokeThickness=strokeThickness;
            setDisabled(true);
            }
          else if (modeOption==0) { // Change from selection, restore state
            fillColor=selectionSaveFillColor;
            document.getElementById("radio1"+fillColor).checked=true;
            strokeColor=selectionSaveStrokeColor;
            document.getElementById("radio2"+strokeColor).checked=true;
            strokeThickness=selectionSaveStrokeThickness;
            document.getElementById("radio3"+strokeThickness).checked=true;
            setDisabled(false);
            }
          modeOption=buttonNum;
          break;
        case 1: // Fill color
          fillColor=colorOptions[buttonNum];
          break;
        case 2: // Stroke color
          strokeColor=colorOptions[buttonNum];
          break;
        case 3: // Stroke thickness
          strokeThickness=buttonNum==5 ? "inherit" : buttonNum+1;
          break;
        }
      if ((oldFillColor!=fillColor || oldStrokeColor!=strokeColor)
      && fillColor=="none" && strokeColor=="none")
        trace("new objects will be invisible!");
    },

    setState: function(fillColor,strokeColor,strokeThickness) {
      selectionSaveFillColor=fillColor;
      selectionSaveStrokeColor=strokeColor;
      selectionSaveStrokeThickness=strokeThickness;
      trace("Rectangle props:  filled with "+ fillColor+
            "   stroked with "+strokeColor+
            "   @ thickness "+ strokeThickness);
      }
    };