如何显示/隐藏画布的一部分

这是我的JS小提琴

切换外圆，当用户单击外部小圆圈时，应该更改中心圆值。

在这里，我不知道如何在用户单击中心圆圈时显示/隐藏画布的一部分？

关于如何做到这一点的任何帮助？

GenerateCanvas();
function GenerateCanvas() {
    try {
        var FlagCircleCenterCoordinates = new Array();
        var FlagCircles = [];
        
        var CenterX = document.getElementById('canvasFlag').width / 2;
        var CenterY = document.getElementById('canvasFlag').height / 2;
        var OuterTrackRadius = 98;
        var InnerTrackRadius = 70;
        var InnerCircleRadius = 20;
        var FlagElement = document.getElementById("canvasFlag");
        var ObjContext = FlagElement.getContext("2d");
        // Outer track
        ObjContext.fillStyle = "#FFF";
        ObjContext.beginPath();
        ObjContext.arc(CenterX, CenterY, OuterTrackRadius, 0, 2 * Math.PI);
        ObjContext.strokeStyle = '#CCC';
        ObjContext.stroke();
        ObjContext.fill();
        // Inner track
        ObjContext.beginPath();
        ObjContext.arc(CenterX, CenterY, InnerTrackRadius, 0, 2 * Math.PI);
        ObjContext.strokeStyle = '#CCC';
        ObjContext.stroke();
        // Inner small circle
        ObjContext.beginPath();
        ObjContext.arc(CenterX, CenterY, InnerCircleRadius, 0, 2 * Math.PI);
        ObjContext.strokeStyle = '#CCC';
        ObjContext.stroke();
        
        //Max 17...other wide need to change the Inner and Outer circle radius
        var FlagImagesArray =  [1, 2, 3,4,5];
        if (FlagImagesArray.length > 0) {
            var StepAngle = 2 * Math.PI / FlagImagesArray.length;
            var FlagCircleRadius = (OuterTrackRadius - InnerTrackRadius) / 2;
            var RadiusOfFlagCircleCenters = OuterTrackRadius - FlagCircleRadius;
            for (var LoopCnt in FlagImagesArray) {
                var CircleCenterCoordinates = new Object();
                 CircleCenterCoordinates.PostionX = CenterX + (Math.cos(StepAngle * (parseInt(LoopCnt) + 1)) * RadiusOfFlagCircleCenters);
                 CircleCenterCoordinates.PostionY = CenterY + (Math.sin(StepAngle * (parseInt(LoopCnt) + 1)) * RadiusOfFlagCircleCenters);
                ObjContext.beginPath();
                ObjContext.arc(CircleCenterCoordinates.PostionX, CircleCenterCoordinates.PostionY, FlagCircleRadius, 0, 2 * Math.PI);
                ObjContext.strokeStyle = '#CCC';
                ObjContext.stroke();
                ObjContext.fillStyle = 'blue';
                ObjContext.fillText(FlagImagesArray[LoopCnt], CircleCenterCoordinates.PostionX, CircleCenterCoordinates.PostionY); 
                FlagCircleCenterCoordinates[LoopCnt] = CircleCenterCoordinates;
                var ObjFlagCircle = {
                    Left : CircleCenterCoordinates.PostionX - FlagCircleRadius,
                    Top : CircleCenterCoordinates.PostionY - FlagCircleRadius,
                    Right : CircleCenterCoordinates.PostionX + FlagCircleRadius,
                    Bottom : CircleCenterCoordinates.PostionY + FlagCircleRadius,
                    FlagName : FlagImagesArray[LoopCnt]
                }
                FlagCircles[LoopCnt] = ObjFlagCircle;
            }
                        
            $('#canvasFlag').mousemove(function (Event) {
                 debugger;
                $(this).css('cursor', 'auto');
                var ClickedX = Event.pageX - $('#canvasFlag').offset().left;
                var ClickedY = Event.pageY - $('#canvasFlag').offset().top;
                for (var Count = 0; Count < FlagCircles.length; Count++) {
   
                    if (ClickedX < FlagCircles[Count].Right &&
                        ClickedX > FlagCircles[Count].Left &&
                        ClickedY > FlagCircles[Count].Top &&
                        ClickedY < FlagCircles[Count].Bottom) {
                        $(this).css('cursor', 'pointer');
                        break;
                    }
                }
            });
            
            $('#canvasFlag').click(function (Event) {
                 debugger;
                $(this).css('cursor', 'auto');
                var ClickedX = Event.pageX - $('#canvasFlag').offset().left;
                var ClickedY = Event.pageY - $('#canvasFlag').offset().top;
                for (var Count = 0; Count < FlagCircles.length; Count++) {
   
                    if (ClickedX < FlagCircles[Count].Right &&
                        ClickedX > FlagCircles[Count].Left &&
                        ClickedY > FlagCircles[Count].Top &&
                        ClickedY < FlagCircles[Count].Bottom) {
                            ObjContext.fillStyle = "#FFF";
                            ObjContext.beginPath();
                            ObjContext.arc(CenterX, CenterY, InnerCircleRadius - 1, 0, Math.PI * 2);
                            ObjContext.closePath();                        
                            ObjContext.fill();
                        
                            ObjContext.fillStyle = "blue";
                            ObjContext.fillText(FlagCircles[Count].FlagName, CenterX, CenterY); 
                        
                        break;
                    }
                }
            });
        }
    }
    catch (E) {
        alert(E);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="canvasFlag" width="200" height="200">
    Your browser does not support the canvas
</canvas>