my chart is overlapping everytime I submit, how can it be fixed?

[et4891]

*Sorry if I posted in the wrong forum, please let me know if I am*

I have a piechart with three inputs one submit button.

I can input whatever angle into the three inputs and the piechart will draw with a .js I found online.

but I found there's a slight problem which is the second time I input a value it just overlaps the previous piechart so if the second time submitting the angles and the angle values are smaller than the original one then you won't be able to see it..I will attach an image to explain it more clearly.

<canvas id="piechart1"></canvas>
<script type="text/javascript" >
$(function() {
$("#submitBtn").click(function() 
    {   
    var input1 = $("#angle1").val();
    if($("#angle1").val()=='') input1="";

    var input2 = $("#angle2").val();
    if($("#angle2").val()=='') input2="";

    var input3 = $("#angle3").val();
    if($("#angle3").val()=='') input3="";

    piechart("piechart1", ["cyan", "yellow", "green"], [input1, input2, input3]);

    });
});
</script>

      <form action="" method="post">

        <label>Angle 1</label>
        <label>Angle 2</label>
        <label>Angle 3</label>
        <br>
        <input name="" id="angle1" value="" type="number">
        <input name="" id="angle2" value="" type="number">
        <input name="" id="angle3" value="" type="number">

        <input type="button" id="submitBtn" value="submit">
      </form>

Can someone give me a hand with this?
Thanks a lot~!