<meta charset="utf-8">

<canvas id="myCanvas" width="800" height="600"></canvas>
<br>
<button onclick="horizLines()">Horizontal</button>
<button onclick="diagonalLines()">Diagonal</button>
<button onclick="clearScreen()">Clear</button>


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

    function horizLines(){
        var loop =    setInterval( ()=>
        {
            var moveDistance = 20 * counter;
            context.beginPath();
            context.moveTo(100, 200 + moveDistance);
            context.lineTo(120 + moveDistance, 200 + moveDistance);
            context.stroke();
            counter +=1;
            console.log(counter);
            if (counter > 10){
                counter = 0;
                clearInterval(loop);
            }
        }, 300);
    }


    function diagonalLines() {
        var drawLine = function(){

            var moveY = 20 * counter;
            var steepness = 50;
            context.beginPath();
            context.moveTo(100, 100 + moveY)
            context.lineTo(400, 100 + moveY + steepness);
            context.stroke();
            counter +=1;
            console.log(counter);

            if (counter > 10) {
                counter = 0;
                clearInterval(loop);
            }
        }

        var loop = setInterval(drawLine, 300);
    }


    function clearScreen() {
        context.clearRect(0, 0, myCanvas.width, 600)
    }



</script>