Value of d:
Select 1-9 to turn the cubes on and off

Near Plane:

Far Plane:

The HTML file:

<head>
    <script type="text/javascript" src="code.js" defer> </script> 
    <script type="text/javascript" src="UI.js" defer> </script> 
</head>
<body>
   <canvas id="canvas" width=400 height=400 style="border:2px solid"></canvas>
   <p>
   <table>
   <tr><td>
   Value of d: 
   <input type="range" min="1" max="50" value="25" class="slider" 
          id="dInput" onchange="DrawScene()" list="ticks">
	  <output for="dInput" id="dInputValue"></output>
   <datalist id="ticks">
   <option value="1"></option>
   <option value="12"></option>
   <option value="25"></option>
   <option value="36"></option>
   <option value="50"></option>
   </datalist>
   <p>
   Select 1-9 to turn the cubes on and off
   </td></tr> 
   <tr><td>
   Near Plane: <input id="near" type="number" min = 0 max=100 >
   </td><td rowspan =2>
    <input type="button" id="DoIt" value = "Update Near/Far"></button> 
   </td></tr> 
   <tr><td>
   Far Plane: <input id="far" type="number" min = 10 max=100>
   </td></tr> 
   </table>
</body>

UI.js

'use strict'
 
var canvas = document.getElementById('canvas');
canvas.tabIndex=0;
canvas.addEventListener("keypress", Keypress);

var ctx = canvas.getContext('2d');
ctx.transform(1,0,0,-1,0,canvas.height);

var d = 25;
document.getElementById('dInput').value = d;

var display = [false, false, false, 
               false, true, false, 
	       false, false, false];

let nearBox = document.getElementById('near');
let farBox = document.getElementById('far');

let near = 10
let far = 20

function Update() {
    let near = nearBox.value;
    let far = farBox.value;
    if (near < far) {
        UpdateVerts(near, far);
        DrawScene();
    }
}

let DoItButton = document.getElementById("DoIt");
DoItButton.addEventListener("click", Update);

UpdateVerts(near,far);

nearBox.value = near
farBox.value = far

DrawScene();

code.js

'use strict'

let CUBE_VERTS = [[-10,-10,near], [10,-10,near], [10,10,near], [-10,10,near],
                    [-10,-10,far], [10,-10,far], [10,10,far], [-10,10,far]]

const CUBE_EDGES = [ 
                     [0,1,"red"], [1,2,"red"], [2,3,"red"], [3,0,"red"], 
		     [4,5,"green"], [5,6,"green"], [6,7,"green"], [7,4,"green"],
		     [0,4,"blue"], [1,5,"blue"], [2,6,"blue"], [3,7,"blue"],
		   ]

function UpdateVerts(near, far) {
   for(let i =0; i < 4; i++) {
      CUBE_VERTS[i][2] =  near;
      CUBE_VERTS[i+4][2] =  far;
   }
}

function Project(pt, tx, ty) {
    let x = (pt[0]+tx)*(d/pt[2]);
    let y = (pt[1]+ty)*(d/pt[2]);
    return [x,y];
}

function DrawLine(ctx, start, end, tx, ty) {
    let a = Project(start, tx, ty);
    let b = Project(end, tx, ty);

    ctx.beginPath();
    ctx.moveTo(a[0], a[1]);
    ctx.lineTo(b[0], b[1]);
    ctx.stroke();
    ctx.closePath();
}

function Cube(ctx,tx, ty) {
    for (let i=0; i<CUBE_EDGES.length; i++) {
       let start = CUBE_EDGES[i][0];
       let end = CUBE_EDGES[i][1];
       let color = CUBE_EDGES[i][2];

       ctx.strokeStyle = color;
       DrawLine(ctx, CUBE_VERTS[start],CUBE_VERTS[end], tx, ty);
    }
}

function Keypress(evnt) {
     if (evnt.key >= '1' && evnt.key <= '9') {
         let pos = parseInt(event.key-'1');
	 display[pos] = !display[pos];
	 DrawScene();
     }
}

function DrawScene() {
    ctx.clearRect(0,0,canvas.width, canvas.height);
    d = document.getElementById('dInput').value
    document.getElementById('dInputValue').value = d

    ctx.save()
    ctx.translate(canvas.width/2, canvas.height/2);

    var pos =0;
    for(let i =-1; i<2; i++) {
       for (let j=-1; j<2; j++) {
         if(display[pos]) {
             Cube(ctx,50*j,50*i);
	 }
	 pos ++;
       }
    }

    ctx.restore();
}

Value of d: Select 1-9 to turn the cubes on and off
Near Plane:
Far Plane: