Lines with radio button

lines-radio.html

<canvas id="myCanvas" width="400" height="400"></canvas>
<div>
    <form>
        <input type="radio" id="10lines" name="lineNumber" value="10" checked> 10 lines
        <br>
        <input type="radio" id="20lines" name="lineNumber" value="20"> 20 lines
    </form>    
    <br>
    <button onclick="createManyLines(10)">Create Lines</button>
</div>


<script>
    var context = document.getElementById("myCanvas").getContext('2d');


    function createLine(counter){
        moveDistance = counter * 20;
        context.beginPath();
        context.moveTo(100, 100 + moveDistance);
        context.lineTo(200 + moveDistance, 100 + moveDistance);
        context.stroke();
    }


    function createManyLines(numLines){
        var counter = 0;
        var lineNumbers = document.getElementsByName("lineNumber");
        for (i=0; i<lineNumbers.length; i++){
                    if (lineNumbers[i].checked){
                        numLines = lineNumbers[i].value;
                    }
                }

        var loop = setInterval(function(){
            if (counter >= numLines){
                clearInterval(loop);
            } else {
                createLine(counter);
                counter += 1;
            }
        }, 600);
        }   

</script>