// 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 caminho existente

    // O seu problema é que já existia um círculo maior do caminho!

    // Ao chamar .beginPath e .closePath, ele começa um novo caminho.   

    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);

});