Canvas 1 y funciones (codigo comentado)

var d = document.getElementById("dib"); //metodo del obj document que nos trae un elemento por id
var	lienzo = d.getContext("2d"); //getContext permite obtener el area para dibujar, metodo del obj canvas d, se aplica el contexto 2d

dibujoBordes("black");
creaDibujo("orange",1); //cambiando el segundo parametro del 1 al 5 se grefican diferentes posiciones del algoritmo

//Vertice InfDer con while
/*while(lineasContador < lineasTotales){
	yIni=10*lineasContador;
	xFi=10*(lineasContador+1)
	dibujoLinea(lineaColor,0,yIni,xFi,300);
	lineasContador+=3; // si editamos el numero la separacion de las lineas cambia
	
}*/

function creaDibujo(color,esquinaCompleta){
	var lineasTotales = 30 ; 
	var lineasContador = 0;
	var lineaColor=color;
	var esquinaCompleta;
	
	var xIni,yIni;
	var xFi,yFi;

	if (esquinaCompleta==1) {
		
		for (lineasContador; lineasContador < lineasTotales; lineasContador++) {
		xIni=0;
		yIni=10*lineasContador;
		xFi=10*(lineasContador+1);
		yFi=300;
		dibujoLinea(lineaColor,xIni,yIni,xFi,yFi);		
		} 

	}else if (esquinaCompleta==2) {
		
		for (lineasContador; lineasContador < lineasTotales; lineasContador++) {
		xIni=300-(lineasContador*10);
		yIni=0;
		xFi=0;
		yFi=10*(lineasContador);
		dibujoLinea(lineaColor,xIni,yIni,xFi,yFi);
		}

	} else if (esquinaCompleta==3) {
		for (lineasContador; lineasContador < lineasTotales; lineasContador++) {
	
		xIni=10*(lineasContador);
		yIni=0;
		xFi=300;
		yFi=10*(lineasContador+1);
		dibujoLinea(lineaColor,xIni,yIni,xFi,yFi);
		}
	}else if (esquinaCompleta==4) {

		for (lineasContador; lineasContador < lineasTotales; lineasContador++) {
	
		xIni=10*(lineasContador);
		yIni=300;
		xFi=300;
		yFi=300-(lineasContador*10);
		dibujoLinea(lineaColor,xIni,yIni,xFi,yFi);
		}		
	}else if (esquinaCompleta==5) {
		creaDibujo(color,1);
		lineasContador=0;
		creaDibujo(color,2);
		lineasContador=0;
		creaDibujo(color,3);
		lineasContador=0;
		creaDibujo(color,4);
	}
}
function dibujoBordes(lineaColor){
	dibujoLinea(lineaColor,0,0,300,0);
	dibujoLinea(lineaColor,0,0,0,300);
	dibujoLinea(lineaColor,0,300,300,300);
	dibujoLinea(lineaColor,300,0,300,300);
}
function dibujoLinea(color,xInicial,yInicial,xFinal,yFinal){

	lienzo.beginPath();					//inicio del trazo
	lienzo.strokeStyle = color;			//Estilo del trazo
	lienzo.moveTo(xInicial,yInicial);	//Pto de inicio
	lienzo.lineTo(xFinal,yFinal)		//Pto de fin
	lienzo.stroke();					//Trazo en si
	lienzo.closePath();					//Fin del trazo
}	```