<canvas id="myCanvas" width="500" height="50"
style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>

var canvas = document.getElementById("myCanvas");

function myFunction() {
  var length = document.getElementById("myText").value || 100;
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(length,25);
  ctx.lineTo(0,25);
  ctx.stroke();
}
myFunction()