JSiapo/estilos.css

## estilos.css
h1{
    text-align: center;
    -webkit-text-fill-color: #0345fa8e;
    text-shadow: 1px 1px 1px rgba(13, 147, 236, 0.5);/*sombra*/
}

## index.html
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=chrome">
    <title>DDA Line</title>
    <script src="./jquery-3.2.1.min.js"></script>
    <script src="./webgl.js"></script>
    <link rel="stylesheet" href="estilo.css">
</head>

<body>
    <h1>Algoritmo DDA para lineas</h1>
    <div class="separator" style="clear: both; text-align: center;">

        <canvas style="border: rgb(161, 161, 161) 10px ridge;;" width="1000" height="500" id="webgl-canvas"></canvas>

    </div>

</body>

</html>

## webgl.js
var gl; // Un variable global para el contexto WebGL

function iniciarWebGL(canvas) {
  try {
      gl = canvas.getContext("webgl") ||
          canvas.getContext("experimental-webgl");
          if(gl){
              console.log('WebGL iniciado con éxito');
          }
  } catch (error) {
      if (!gl) {
          alert("No se pudo iniciar WebGL");
      }
  }
  return gl;
}

function iniciarCanvas(gl){
    gl.clearColor(0.96, 0.96, 0.96, 1.0);                      // Establecer el color base en negro, totalmente opaco
    gl.enable(gl.DEPTH_TEST);                               // Habilitar prueba de profundidad
    gl.depthFunc(gl.LEQUAL);                                // Objetos cercanos opacan objetos lejanos
    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);  // Limpiar el buffer de color asi como el de profundidad
}

function start() {
  var canvas = document.getElementById("webgl-canvas");

  gl = iniciarWebGL(canvas);      // Inicializar el contexto GL

  // Solo continuar si WebGL esta disponible y trabajando

  if (gl) {
        iniciarCanvas(gl);
  }
}
$(function () {
  start();
})
	h1{
	text-align: center;
	-webkit-text-fill-color: #0345fa8e;
	text-shadow: 1px 1px 1px rgba(13, 147, 236, 0.5);/sombra/
	}
	<!DOCTYPE html>
	<html lang="es">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=chrome">
	<title>DDA Line</title>
	<script src="./jquery-3.2.1.min.js"></script>
	<script src="./webgl.js"></script>
	<link rel="stylesheet" href="estilo.css">
	</head>

	<body>
	<h1>Algoritmo DDA para lineas</h1>
	<div class="separator" style="clear: both; text-align: center;">

	<canvas style="border: rgb(161, 161, 161) 10px ridge;;" width="1000" height="500" id="webgl-canvas"></canvas>

	</div>

	</body>

	</html>
	var gl; // Un variable global para el contexto WebGL

	function iniciarWebGL(canvas) {
	try {
	gl = canvas.getContext("webgl") \|\|
	canvas.getContext("experimental-webgl");
	if(gl){
	console.log('WebGL iniciado con éxito');
	}
	} catch (error) {
	if (!gl) {
	alert("No se pudo iniciar WebGL");
	}
	}
	return gl;
	}

	function iniciarCanvas(gl){
	gl.clearColor(0.96, 0.96, 0.96, 1.0); // Establecer el color base en negro, totalmente opaco
	gl.enable(gl.DEPTH_TEST); // Habilitar prueba de profundidad
	gl.depthFunc(gl.LEQUAL); // Objetos cercanos opacan objetos lejanos
	gl.clear(gl.COLOR_BUFFER_BIT\|gl.DEPTH_BUFFER_BIT); // Limpiar el buffer de color asi como el de profundidad
	}

	function start() {
	var canvas = document.getElementById("webgl-canvas");

	gl = iniciarWebGL(canvas); // Inicializar el contexto GL

	// Solo continuar si WebGL esta disponible y trabajando

	if (gl) {
	iniciarCanvas(gl);
	}
	}
	$(function () {
	start();
	})