canvas 鼠标画填充/描边 产生问题

选中填充选项，最终汇出的图形是以填充+描边呈现的

以下是前端代码

<label for="ColorFill">填充颜色</label>
        <input type="color" id="ColorFill">
        <label for="ColorStroke">描边/直线颜色</label>
        <input type="color" id="ColorStroke">
        <select id="shape">
            <option value="arc">圆形</option>
            <option value="line">直线</option>
            <option value="ric">矩形</option>
            <option value="erase">橡皮擦</option>
        </select>
        <select id="ty">
            <option value="fill">填充</option>
            <option value="stroke">描边</option>
        </select>
        <label for="Cx" >直线粗细：</label>
        <input type="number" id="Cx"  value="25" >
        <input type="button" value="清空" id="clear">

以下是绘制矩形代码

case "ric":
            {
                ctx.beginPath();
                if(ys == 'fill')
                {
                    ctx.fillStyle=fillC;
                    ctx.fillRect(x,y,endX-x,endY-y);
                }    
                else(ys == 'stroke')
                {
                    ctx.strokeStyle=strokeC;
                    ctx.lineWidth=lineW;
                    ctx.strokeRect(x,y,endX-x,endY-y);
                }
                ctx.closePath();
                break;
            }

运行结果及报错内容

我想要达到的结果

就描边的是描边 填充的是填充的

位置重叠了吧，x, y