I have two radio buttons in my html code,

  <div>
    <h1>Select Your View</h1>
    <input type="radio"  id="first_view" name="first_view" value="first_view" onclick="CreateCanvas('first_view')">
    <label for="first_view">first_view</label>
    <input type="radio"  id="second_view" name="second_view" value="second_view" onclick="CreateCanvas('second_view')">
    <label for="second_view">second_view</label><br>
  </div>

Here is js code in another file. the canvas.clear doesn't clear the canvas.

function CreateCanvas(view){
    
    var canvas = new draw2d.Canvas("gfx_holder");

    if(view == "first_view")
        {
        canvas.clear();
        canvas.add(rect2);
    
    }
    else
    {
        canvas.clear();
        canvas.add(rect1);
    }
};

but if I add something like in the following code, clear canvas works perfectly.

function CreateCanvas(view){

var canvas = new draw2d.Canvas("gfx_holder");

if(view == "first_view")
    {
    canvas.add(rect1)
    canvas.clear();
    canvas.add(rect2);

}
else
{
    canvas.add(rect2)
    canvas.clear();
    canvas.add(rect1);
}

};

Why does adding something before clearing works in certain conditions? what is the right way to code here? I do not want to add unnecessary stuff to my canvas.