Can't get clearRect to clear canvas after creating a square box using "range" input

Question

I'm trying to use the slider to make the square big as I move up the slider and smaller as I move it back. I have a clearRect to help with that but it isn't operating as it should...I looked over the code and I'm not noticing any errors - its creating the square fine but it isn't making it smaller as I move the slider back

I'm still learning basics so I apologize if this is too trivial. Would appreciate the help!

I went through different solutions from here but all of them dealt with draw or stroke which isn't the case for mine

Im currently using code pen so linking my code here -

https://codepen.io/thedailyrush/pen/gOEogQE

there are 3 inputs for the canvas - the functions below are pretty much all they do - the doRange() function is where I'm having the issue

<h1>Inputs and Events - Color Picker and Range</h1>

<canvas id="c1">
</canvas>
<p>
<input type="button" value = "red" id="redColor"     onclick="doRed()">  
<input type = "color" value="#6290C3" id = "col" onchange =     "doColor()">
<input type = "range" id="ranger" min = "1" max = "100" value     = "10" oninput = "doRange()">
</p> 

function doRed(){
  var canvas = document.getElementById("c1");
  canvas.style.backgroundColor = "#E26D5A";
}
function doColor(){
  var canvas = document.getElementById("c1");
  var input = document.getElementById("col");
  var finalColor = input.value;
  canvas.style.backgroundColor = finalColor;
}

function doRange(){
  var canvas = document.getElementById("c1");
  var sizeInput = document.getElementById("ranger");
  var howBig =sizeInput.value;
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0,0,howBig.width,howBig.length);
  ctx.fillStyle="#F5BB00";
  ctx.fillRect(10,10,howBig,howBig);
  
}

Answer 1

the issue is in your clearRect

here is updated Code

ctx.clearRect(0,0,canvas.width,canvas.height);