HTML:
   <h1>Mi dibujo en canvas</h1>

    <canvas width="300" height="300" id="miDibu"></canvas>
	  <script src="dibujar.js"></script>
    <p>Así queda mi dibujo. </p>

JS:
var d = document.getElementById("miDibu");
var lienzo = d.getContext("2d");
var ancho = d.width;

//llamamos la función y pasamos los valores por parámetro:
var lineas = 30;
var l = 0;
var yi, xf;

while (l < lineas)
{
    yi = 10 * l;//este es uno de los valores que modifica, multiplica por 10 al valor l
    xf = 10 * (l + 1);//este es otro de los valores que modifica, suma 1 al valor l y luego multiplica por 10
    dibujarLinea("rgb(171,9,147)", 0, yi, xf, ancho);
    l++;//suma 1 a la variable l
}
dibujarLinea("rgb(63,224,201)", 1, 1, 1, ancho);//dibuje la linea recta vertical color gris

for (l = 0; l < lineas; l++)
{
    yi = 10 * l;//este es uno de los valores que modifica, multiplica por 10 al valor l
    xf = 10 * (l + 1);//este es otro de los valores que modifica, suma 1 al valor l y luego multiplica por 10
    dibujarLinea("rgb(63,224,201)", ancho, yi, xf, 0);

}
var line = 16;
for (l = 0; l < line; l++)
{
    yi = 10 * l;//este es uno de los valores que modifica, multiplica por 10 al valor l
    xf = 160 + (l * 10);//este es otro de los valores que modifica, suma 1 al valor l y luego multiplica por 10
    dibujarLinea("black", 150, yi, xf, 150);
    dibujarLinea("black", yi, 150, 150, xf);
    dibujarLinea("black", 150, yi, 150 - yi, 150);
    dibujarLinea("black", 150, 300 - yi, xf, 150);
}
dibujarLinea("black", 150, yi, 150, -yi);//linea recta vertical
dibujarLinea("black", xf, 150, -xf, 150);//linea recta horizontal
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.moveTo(xinicial, yinicial);
    lienzo.lineTo(xfinal, yfinal);
    lienzo.stroke();
    lienzo.closePath();
}