html html5-canvas fabricjs geometry rect

How can I decide whether I want to draw a circle or a rectangle in one canvas?

I would like to decide by button whether I draw a rectangle or a circle. That works so far. But if I first press the Circle button and then the Rectangle button, it does not delete the circle. The other way, it's the same. But I want only one object to be displayed at a time. The object which the user pressed at last should display.

<html>
<head>
<script src="fabric.js"></script>
</head>
   <body>
<canvas id="c" width="500" height="500"></canvas>
<button type="button" onclick="drawArc()">circle</button>
<button type="button" onclick="drawRect()">rectangle</button>

<scipt>

var canvas = new fabric.Canvas("c");
var context = canvas.getContext('2d');
var rect = new fabric.Rect({
//circle values
});
var circle = new fabric.Circle({
//rect values
});

function clear() {
     context.clearRect(0, 0, canvas.width, canvas.height);
                  }

function drawRect() {
    clear();
    canvas.add(rect);
                    }

function drawArc() {
   clear();
   canvas.add(circle);
                   }
</script>

   </body>
</html>

Solution

Use visible property to show/hide object from canvas.

DEMO

var canvas = new fabric.Canvas("c");
var rect = new fabric.Rect({
  width: 50,
  height: 50,
  fill: 'green',
  visible: false
});
var circle = new fabric.Circle({
  radius: 50,
  fill: 'blue',
  visible: false
});
canvas.add(rect, circle)

function drawRect() {
  circle.visible = false;
  rect.visible = true;
  canvas.requestRenderAll();
}

function drawArc() {
  circle.visible = true;
  rect.visible = false;
  canvas.requestRenderAll();
}

canvas{
  border:1px solid;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.js"></script>
<button type="button" onclick="drawArc()">circle</button>
<button type="button" onclick="drawRect()">rectangle</button><br>
<canvas id="c" width="500" height="500"></canvas>