HTML5 Canvas Arc() is not the correct size

Question

I am developing a college job that consists basically in creating a kind of "Paint" using the canvas HTML5 in conjunction with Javascript, but came across a problem when trying to update a canvas which serves to display the current stroke size...
I’m using a input of the kind range to set the stroke size and event oninput to detect the value change in the input, at the moment, I have the code below:

HTML
<input type="range" id="lineSize" class="no_margin range" value="2" min="1" max="20" />
<canvas id="showSize" width="40" height="40" />

Javascript

var lineSize = document.getElementById("lineSize");

function clearCanvas(canvas) {
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function updateLineSize(size) {
    var canvas = document.getElementById("showSize");
    clearCanvas(canvas);
    var ctx = canvas.getContext("2d");
    ctx.arc(canvas.width/2, canvas.height/2, size/2.0, 0, 2 * Math.PI, false);
    ctx.fillStyle = "#000000";
    ctx.fill();
}

updateLineSize(lineSize.value);

lineSize.oninput = function() {
    updateLineSize(this.value);
}

What happens is that every time the function updateLineSizeis called, it always fills the circle with the size of the largest size already used, even after reducing the input.
How could I solve this problem?

----- EDIT -----
I managed to solve the problem by recreating the canvas every time I change the value of input, changing the function updateLineSize as follows:

function updateLineSize(size) {
    var holder = document.getElementById("showSizeHolder");
    while (holder.firstChild) {
        holder.removeChild(holder.firstChild);
    }
    var canvas = document.createElement("canvas");
    canvas.id = "showSize";
    canvas.className = "option";
    holder.appendChild(canvas);
    canvas.width = 40;
    canvas.height = 40;
    var ctx = canvas.getContext("2d");
    ctx.arc(canvas.width/2, canvas.height/2, size/2.0, 0, 2 * Math.PI, false);
    ctx.fillStyle = "#000000";
    ctx.fill();
}

But someone could explain to me why it doesn’t work the other way?

Answer 1

Below is the correct script with some comments:

// Vamos criar essa variável para evitar de sempre chamar document.getElementById
var canvas = document.getElementById("showSize");

// Vamos trabalhar em cima do mesmo contexto
var ctx = canvas.getContext("2d");

var lineSize = document.getElementById("lineSize");

function clearCanvas(canvas) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function updateLineSize(size) {
    clearCanvas(canvas);

    // O seu problema estava aqui.
    // Conforma você vai chamando o método .arc, apenas um caminho vai sendo criado.
    // Quando o método .fill é chamado, ele desenha o último caminho existente.
    // O seu problema é que já existia um círculo maior do caminho!
    // Ao chamar .beginPath e .closePath, o caminho é iniciado e terminado.
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, size / 2.0, 0, 2 * Math.PI, false);
    ctx.closePath();

    ctx.fill();
}

updateLineSize(lineSize.value);

// Apenas uma forma mais elegante
lineSize.addEventListener('input', function () {
    updateLineSize(this.value);
});

Follow an example from Jsbin: http://jsbin.com/wepaweyepo/edit?html,js,output