Misbehaved simple function

Hello Fine Campers!

I wonder if someone would like to tell me why my function behaves badly when called from within a function?
In the pen below, I have written a function that draws a square on a canvas. The function sets the canvas size 10 percent larger than the square.


If you call the function by itself square(100) it works fine and as expected.
If you set variable ‘a’ to a numeric value and then call the function ‘square(a)’
it works fine and as expected!
However, if you call the function square(a) from within a function that uses a text box input value assigned to variable ‘a’ things go a little awry and the bottom and right hands side of the drawn square are chopped off.

Does anyone have any clues as to what is going on here?

Help would be much appreciated. It’s driving me potty!

Thanks in advance.


The line below causes a to be a string.

let a = document.getElementById("inputBox").value;

Why? Because all input box values are strings. Just convert the value to a number and it will work as you expect.

Thank you @RandellDawson. I had not given that a thought as console.log() was returning what appeared to be a number. I suppose that in itself is a lesson to test the type of value a variable is too!

I implemented your suggestion using parseFloat() and it works a treat in the pen below: