codetricity/lines2.html

## lines2.html
<head>
    <meta charset="utf-8">
    <style>
        .buttonRow{
            margin-top: 10px;
        }
    </style>
</head>


<canvas id="myCanvas" width="800" height="600"></canvas>
<div class="buttonRow">
    <button onclick="horizLines()">Horizontal</button>
    <button onclick="diagonalDown()">DiagonalDown</button>
</div>

<div class="buttonRow">
    <button onclick="clearScreen()">Clear</button>
</div>


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


    function horizLines(){
        var finished = checkFinished();
        if (finished){
            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 diagonalDown() {
        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 finished = checkFinished();
        if (finished) {
            var loop = setInterval(drawLine, 300);
        }

    }


    function clearScreen() {
        var finished = checkFinished();
        if(finished) {
            context.clearRect(0, 0, myCanvas.width, 600)
        }

    }

    function checkFinished() {
        if (counter == 0) {
            return true;
        }
        else {
            return false;
        }
    }

</script>
	<head>
	<meta charset="utf-8">
	<style>
	.buttonRow{
	margin-top: 10px;
	}
	</style>
	</head>


	<canvas id="myCanvas" width="800" height="600"></canvas>
	<div class="buttonRow">
	<button onclick="horizLines()">Horizontal</button>
	<button onclick="diagonalDown()">DiagonalDown</button>
	</div>

	<div class="buttonRow">
	<button onclick="clearScreen()">Clear</button>
	</div>



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


	function horizLines(){
	var finished = checkFinished();
	if (finished){
	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 diagonalDown() {
	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 finished = checkFinished();
	if (finished) {
	var loop = setInterval(drawLine, 300);
	}

	}


	function clearScreen() {
	var finished = checkFinished();
	if(finished) {
	context.clearRect(0, 0, myCanvas.width, 600)
	}

	}

	function checkFinished() {
	if (counter == 0) {
	return true;
	}
	else {
	return false;
	}
	}

	</script>