Using PDF.js to render to an offscreen canvas – Blancer.com Tutorials and projects

The goal is to render pages of a pdf to an offsrceen canvas to that I can copy portions of the page to a visible canvas. As a first step, the code below is intended to render the entire first page of a pdf. It renders to an offscreen canvas, then copies from offscreen to the visible canvas. Or that was my intention. Nothing appears.

<!doctype html>

<html lang="en">
<head>
  <!--The pdf.js stuff, from Mozilla.-->
  <script src="pdf.js"></script>
  <script src="pdf.worker.min.js"></script>
  <style>
    canvas { border: 1px solid black; }
  </style>
</head>

<body onload="main()">

<canvas id="pdf_renderer"></canvas>

<script>

var myState = {
  pdf: null,
  zoom: 1,
  testcvs: null
}

async function main() {

  await openDocument();
  await getpage(1);
  
  var canvas = document.getElementById("pdf_renderer");
  var ctx = canvas.getContext('2d');
  
  canvas.width = myState.testcvs.width;
  canvas.height = myState.testcvs.height;
  
  ctx.drawImage(myState.testcvs,0,0);
}

async function openDocument() {
  await pdfjsLib.getDocument('ex01gear.pdf').then((pdf) => {
    myState.pdf = pdf;
  });
}

async function getpage(pagenum) {

  await myState.pdf.getPage(pagenum).then((page) => {
    
    var offcanvas = document.createElement('canvas');
    var offctx = offcanvas.getContext('2d');
    var viewport = page.getViewport(myState.zoom);
    
    offcanvas.width = viewport.width;
    offcanvas.height = viewport.height;

    page.render({
      canvasContext: offctx,
      viewport: viewport
    });

    myState.testcvs = offcanvas;
  }); 
}

</script>

</body>
</html>