Muy buenas tardes tengo una duda, después de haber hecho varios dibujos hay uno en especifico que me esta causando problemas y no e logra...

me doy cuenta de que el problema radica en que xf empieza con el valor de 150 después se le va sumando 10 por cada linea así cuando ya se han calculado 15 lineas ya a alcanzado el limite del lienzo de 300 pero el continua dibujando hasta alcanzar las 30 lineas que seria equivalente a xf terminaría con un valor de 450, he pensado en una forma de limitar a xf a 300 pero no lo he logrado aun

se que no es la mejor manera pero aqui dejo el enlace a google fotos donde esta la imagen del dibujo

https://photos.app.goo.gl/KiTpzjanse6j5qYq5

Gracais por tu aporte pero no hera lo que intentaba, mi intencion era que el dibujo inicie en el punto X150, Y0 y de hay partiera al punto X300, Y 300 y al X0, Y300 pero el problema es que en el dibujo el eje X no me esta terminando en el punto X0 ni en el punto X300 sino que sigue de largo hasta que se generan las 30 lineas que es donde terminan, quiero limitar que X no sobrepase los limites de 0 y 300

Ahora que lo pienso también el color debería ponerlo en una variable. Así si quiere cambiar el color no tiene que estar cambiando uno por uno.

Así:

var color = “#ff7f24”;

Luego, sustituye en todos los casos por la palabra color. Por ejemplo:

dibujarLinea (color, xi, yi, xf1 , yf);

Me parece que se me fue un + yi en esa parte. Ese + fue un error xD.

Creo que era eso lo que intentaba. Puse comentarios en el código que le sea más fa entender las modificaciones que hice.

var d = document.getElementById("dibujito1");
var lienzo = d.getContext("2d");
var lineas = 30;
var l = 0;

for (l = 0; l < lineas; l++)
{
  //Cambié las variables porque había varias que no estaba usando siquiera.
  //Considero que es importante poner asignarle a una variable incluso valores constantes.
  //Esto porque en caso de que usted quiera modificar su código de manera general no se le romperá el código.
  var ancho = d.width;
  var xi = ancho/2; // ancho es d.width que es 300. Lo que pasa es que si usted agrandaba el tamaño del canvas se le rompería. De esta manera no porque siempre dividirá el canvas en 2.
  var yi = 10 * l; //En la clase de preguntar al usuario la cantidad de lineas este 10 debe cambiar por un valor que el usuario ingrese en un textbox.
  var xf1 = ancho/2 - 10*l;
  var xf2 = ancho/2 +10*l;
  var yf = ancho/2;
  //Tal vez con la palabra ancho sea más fácil de visualizar.


  dibujarLinea ("#ff7f24", xi,  + yi, xf1 , yf); //Estas sí las modifiqué para que para que corregir xf y yf. Espero sea eso lo que intentaba.

  dibujarLinea ("#ff7f24", xi, yi, xf2, yf); //En este caso es igual solo cambia xf2. En el anterior es xf1.

  console.log("lineas " +l);

}
//Creo que lo que intentaba era un borde alrededor del dibujo hasta la mitad del canvas.
dibujarLinea ("#ff7f24", 299, 1, 1, 1);
dibujarLinea ("#ff7f24", 1, 299, 1, 1);
//De manera que corregí estas dos líneas para que salieran de la mitad del canvas y rodearan el dibujo.
dibujarLinea ("#ff7f24", 1, 150, 299, 150);
dibujarLinea ("#ff7f24", 299, 150, 299, 1);


//De la función no cambié nada.
function dibujarLinea(color, x_inicial, y_inicial, x_final, y_final)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(x_inicial, y_inicial);
  lienzo.lineTo(x_final, y_final);
  lienzo.stroke();
  lienzo.closePath();
}

disculpen no es spam xD es que no logro subir la imagen ya lo intente varias veces y no se como lo hacen algun consejo xD he intentado con subirla a google fotos crearle un link y agregarlo por la opcion imagen y la opcion enlace y no los toma de que forma debo de subirlas?