line with style button

lines-style.html

<canvas id="myCanvas" width="400" height="400"></canvas>
<div>
    <table>
        <tr>
            <th># lines</th>
            <th>Orientation</th>
        </tr>
        <tr>
            <td>
        <input type="radio"  name="lineNumber" value="10" checked> 10 lines
        </td>
        <td>
            <input type="radio" value="horizontal" name="orientation" checked> Horizontal
        </td>
        </tr>
        <tr>
            <td>
            <input type="radio" name="lineNumber" value="20"> 20 lines
            </td>
            <td>
                <input type="radio" name="orientation" value="vertical"> Vertical
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="radio" name="orientation" value="diagonal"> Diagonal
            </td>
        </tr>

    </table>
    <br>
    <button onclick="selectLineStyle()">Create Lines</button>
    <br>
    <button onclick="clearCanvas()">Clear</button>
</div>


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


    function createHorizontalLine(counter){
        let originalX = 10;
        let originalY = 10;
        moveDistance = counter * 15;
        context.beginPath();
        context.moveTo(originalX, originalY + moveDistance);
        context.lineTo(20 + moveDistance, originalY + moveDistance);
        context.stroke();
    }


    function createVerticalLine(counter) {
        let originalX = 10;
        let originalY = 10;
        console.log("creating vertical line");
        moveDistance = counter * 15;
        context.beginPath();
        context.moveTo(originalX + moveDistance, originalY);
        context.lineTo(originalX + moveDistance, originalY + moveDistance);
        context.stroke();
    }


    function createDiagonalLine(counter) {
        let originalX = 10;
        let originalY = 10;
        let slantY = 30;
        moveDistance = counter * 15;
        context.beginPath();
        context.moveTo(originalX, originalY  + moveDistance);
        context.lineTo(200 + originalX , originalY + slantY+ moveDistance);
        context.stroke();
    }


    function createManyLines(orientation){
        var counter = 0;
        var numLines;
        var lineNumbers = document.getElementsByName("lineNumber");
        for (i=0; i<lineNumbers.length; i++){
                    if (lineNumbers[i].checked){
                        numLines = parseInt(lineNumbers[i].value);
                    }
                }
        var loop = setInterval(function(){
            if (counter >= numLines){
                clearInterval(loop);
            } else {
                if (orientation == "horizontal") {
                    createHorizontalLine(counter);
                }
                else if(orientation == "vertical"){
                    createVerticalLine(counter);
                } else if (orientation == "diagonal"){
                    createDiagonalLine(counter);
                }
                counter += 1;
            }
        }, 600);
    }   
    
    
    function clearCanvas() {
        var myCanvas = document.getElementById('myCanvas');
        context.clearRect(0, 0, myCanvas.width, myCanvas.height);
    }


    function selectLineStyle() {
        var counter = 0;
        var orientationButtons = document.getElementsByName("orientation");
        for (i=0; i<orientationButtons.length; i++){
            if (orientationButtons[i].checked){
                var orientation = orientationButtons[i].value;
                createManyLines(orientation);
            }
        }
    }
</script>