The scroll box is set up inside the makeCanvas() function. In Internet Explorer, it starts with extracting the HTML code from the external file into firstPage and secondPage

function fillAllPages() {
  var text = '<DIV ID="canvas" STYLE="position:absolute">';
  text += '<DIV ID="firstPage" STYLE="position:absolute">'
   + arBody[0].innerHTML + '</DIV>';
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  text += '<DIV ID="secondPage" STYLE="position:absolute">'
   + arBody[0].innerHTML + '</DIV>';
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  text += '</DIV>';
  document.body.insertAdjacentHTML("BeforeEnd", text);
}

Notice the hierarchical structure of these dynamic HTML elements. The canvas element contains the firstPage and secondPage elements.

In Netscape Navigator, the canvas element is created via a layer constructor:

canvas = new Layer(canvasWidth);

The clipping area of the canvas is generated next. While in Netscape Navigator the creation of a clipping area is as simple as property assignment, you need to use the rect() constructor in Internet Explorer:

if (IE4){
  canvas.style.clip = "rect(0 " + canvasWidth + " " + canvasHeight + " 0)";
}
else {
  canvas.clip.width = canvasWidth;
  canvas.clip.height= canvasHeight;
}

The remainder of the makeCanvas() function sets the width, height, top, left, background color, and visibility properties of the scrolling box:

eval("canvas" + styleString).width = canvasWidth;
eval("canvas" + styleString).height = canvasHeight;
if (NS4) {
  canvas.left = canvasLeft;
  canvas.top = canvasTop;
  canvas.bgColor = GcanvasColor;
}
else {
  canvas.style.pixelLeft = canvasLeft;
  canvas.style.pixelTop = canvasTop;
  canvas.style.backgroundColor = GcanvasColor;
}
eval("canvas" + styleString).visibility = (NS4) ? "show" : "visible";