title: Drawing a rectangle bounding box on PDF to get coordinate but inner rectangle filled with white color!! I tried this with online example code only
body: <p>In this code, I have preview the PDF and I can able to draw the bounding box but its filling white color and added screenshot of mine. I can able to get the coordinate using (check it in the console) but the inner text is not visible apart from I need to copy the coordinate once I drew the rectangle in mouse listener so I can paste in anywhere I want.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="pdf.js"&gt;&lt;/script&gt;
      &lt;script src="pdf.worker.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
          #upload-button {
              width: 150px;
              display: block;
              margin: 20px auto;
          }
          
          #file-to-upload {
              display: none;
          }
          
          #pdf-main-container {
              width: 400px;
              margin: 20px auto;
          }
          
          #pdf-loader {
              display: none;
              text-align: center;
              color: #999999;
              font-size: 13px;
              line-height: 100px;
              height: 100px;
          }
          
          #pdf-contents {
              display: none;
          }
          
          #pdf-meta {
              overflow: hidden;
              margin: 0 0 20px 0;
          }
          
          #pdf-buttons {
              float: left;
          }
          
          #page-count-container {
              float: right;
          }
          
          #pdf-current-page {
              display: inline;
          }
          
          #pdf-total-pages {
              display: inline;
          }
          
          #pdf-canvas {
              /* border: 1px solid rgba(0,0,0,0.2) transparent; */
              box-sizing: border-box;
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              overflow: hidden;
              opacity: 1;
              background: none;
          }
          
          #page-loader {
              height: 100px;
              line-height: 100px;
              text-align: center;
              display: none;
              color: #999999;
              font-size: 13px;
          }
          /* #pdf-canvas{
               opacity:0.5;  
               } */
          
          .rectangle {
              border: 1px solid #FF0000;
              position: absolute;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;button id="upload-button"&gt;Select PDF&lt;/button&gt;
      &lt;input type="file" id="file-to-upload" accept="application/pdf" /&gt;
      &lt;div id="pdf-main-container"&gt;
          &lt;div id="pdf-loader"&gt;Loading document ...&lt;/div&gt;
          &lt;div id="pdf-contents"&gt;
              &lt;div id="pdf-meta"&gt;
                  &lt;div id="pdf-buttons"&gt;
                      &lt;button id="pdf-prev"&gt;Previous&lt;/button&gt;
                      &lt;button id="pdf-next"&gt;Next&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div id="page-count-container"&gt;
                      Page
                      &lt;div id="pdf-current-page"&gt;&lt;/div&gt;
                      of
                      &lt;div id="pdf-total-pages"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;canvas id="pdf-canvas" width="400"&gt;&lt;/canvas&gt;
              &lt;div id="page-loader"&gt;Loading page ...&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          //Rectangle
          "use strict";
          requestAnimationFrame(mainLoop);
          const canvas = document.getElementById("pdf-canvas");
          const ctx = canvas.getContext("2d");
          // ctx.globalCompositeOperation = "lighter";
          ctx.globalAlpha = 0.2;
  
          const storedRects = [];
          const baseImage = loadImage("");
          var refresh = true;
          const rect = (() =&gt; {
              var x1, y1, x2, y2;
              var show = false;
  
              function fix() {
                  rect.x = Math.min(x1, x2);
                  rect.y = Math.min(y1, y2);
                  rect.w = Math.max(x1, x2) - Math.min(x1, x2);
                  rect.h = Math.max(y1, y2) - Math.min(y1, y2);
  
                  jQuery("body").click(function(e) {
                      // ctx.fillRect(50,50,500,500);
                      //   ctx.clearRect(0, 0, 500, 500);
                      console.log(rect.x + '=' + rect.y + '=' + rect.w + '=' + rect.h);
                      $('#output').html('current x : ' + rect.x + ', current y : ' + rect.y + ', width : ' + rect.w + ', height : ' + rect.h);
  
                      if (e.target.id == "pdf-canvas") {
                          ddrag();
                          jQuery(".position_x").val(rect.x);
                          jQuery(".position_y").val(rect.y);
                          jQuery(".position_w").val(rect.w);
                          jQuery(".position_h").val(rect.h);
                      }
                  });
              }
  
              function draw(ctx) {
                  // ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
                  ctx.clearRect(this.x, this.y, this.w, this.h);
                  ctx.strokeRect(this.x, this.y, this.w, this.h)
              }
              const rect = {
                  x: 0,
                  y: 0,
                  w: 0,
                  h: 0,
                  draw
              };
              const API = {
                  restart(point) {
                          x2 = x1 = point.x;
                          y2 = y1 = point.y;
                          fix();
                          show = true;
                      },
                      update(point) {
                          x2 = point.x;
                          y2 = point.y;
                          fix();
                          show = true;
                      },
                      toRect() {
                          show = false;
                          return Object.assign({}, rect);
                      },
                      draw(ctx) {
                          if (show) {
                              rect.draw(ctx)
                          }
                      },
                      show: false,
              }
              return API;
          })();
  
          function loadImage(url) {
              const image = new Image();
              image.src = url;
              image.onload = () =&gt; refresh = true;
              return image;
          }
  
          const mouse = {
              button: false,
              x: 0,
              y: 0,
              down: false,
              up: false,
              element: null,
              event(e) {
  
                  const m = mouse;
                  m.bounds = m.element.getBoundingClientRect();
                  m.x = e.pageX - m.bounds.left - scrollX;
                  m.y = e.pageY - m.bounds.top - scrollY;
                  const prevButton = m.button;
                  m.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
                  if (!prevButton &amp;&amp; m.button) {
                      m.down = true;
                      /*
                      var cv=document.createElement('canvas'); 
                      cv.width=canvas.width;
                      cv.height=canvas.height;
                      */
                  }
                  if (prevButton &amp;&amp; !m.button) {
                      m.up = true
                  }
              },
              start(element) {
                  mouse.element = element;
                  "down,up,move".split(",").forEach(name =&gt; document.addEventListener("mouse" + name, mouse.event));
              }
          }
  
          mouse.start(canvas);
  
          function draw() {
              // ctx.fillRect(baseImage, 0, 0, ctx.canvas.width, ctx.canvas.width);
              __CANVAS_CTX.strokeRect();
  
              const storedRects = [];
              // ctx.restore();
              // ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
              ctx.drawImage(baseImage, 0, 0, ctx.canvas.width, ctx.canvas.height)
                  // if(__PDF_DOC!=null &amp;&amp; __PDF_DOC!=undefined &amp;&amp; __PDF_DOC!=null){
                  //     showPage(__CURRENT_PAGE);
                  // }
  
              // ctx.drawImage(baseImage, 0, 0, ctx.canvas.width, ctx.canvas.width);
              ctx.lineWidth = 1;
              // ctx.strokeStyle = "yellow";
              storedRects.forEach(rect =&gt; rect.draw(ctx));
              ctx.strokeStyle = "red";
              rect.draw(ctx);
              // ctx.clearRect(20, 20, 100, 50);
          }
  
          function mainLoop() {
              if (refresh || mouse.down || mouse.up || mouse.button) {
                  refresh = false;
                  if (mouse.down) {
                      mouse.down = false;
                      rect.restart(mouse);
                  } else if (mouse.button) {
                      rect.update(mouse);
                  } else if (mouse.up) {
                      mouse.up = false;
                      rect.update(mouse);
                      //storedRects.push(rect.toRect());
                  }
                  draw();
              }
              requestAnimationFrame(mainLoop)
          }
  
          function clearCanvas(canvas) {
              const storedRects = [];
              //alert(jQuery(".position_x").val());
              jQuery('#pdf-contents').removeClass('test');
  
              // ctx.fillRect(jQuery(".position_x").val(), jQuery(".position_y").val(), jQuery(".position_w").val(),jQuery(".position_h").val());   
              //ctx.clearRect(0,0,jQuery(".position_w").val(),jQuery(".position_h").val());
  
              //ctx.drawImage(baseImage, 0, 0, ctx.canvas.width, ctx.canvas.width);
              //      URL.createObjectURL($("#file-input").get(0).files[0]); /*reload mate*/
  
              //alert(URL.createObjectURL($("#file-input").get(0).files[0]))
              showPDF(URL.createObjectURL($("#file-input").get(0).files[0]));
              //setTimeout(function(){ showPDF(URL.createObjectURL($("#file-input").get(0).files[0])); }, 3000);
  
          }
  
          function ddrag() {
              // ctx.clearRect(0, 0, 500, 500);
  
              //const storedRects = [];
              jQuery('.test #pdf-canvas').mousedown(function() {
                  console.log(jQuery(this).parent().parent().attr('class'));
                  if (jQuery(this).parent().parent().attr('class') == "test") {
                      return false;
                  } else {
                      return true;
                  }
              });
              jQuery('#pdf-contents').addClass('test');
  
              //return false; 
          }
      &lt;/script&gt;
      &lt;script&gt;
          var __PDF_DOC,
              __CURRENT_PAGE,
              __TOTAL_PAGES,
              __PAGE_RENDERING_IN_PROGRESS = 0,
              __CANVAS = $('#pdf-canvas').get(0),
              __CANVAS_CTX = __CANVAS.getContext('2d');
  
          function showPDF(pdf_url) {
              $("#pdf-loader").show();
  
              PDFJS.getDocument({
                  url: pdf_url
              }).then(function(pdf_doc) {
                  __PDF_DOC = pdf_doc;
                  __TOTAL_PAGES = __PDF_DOC.numPages;
  
                  // Hide the pdf loader and show pdf container in HTML
                  $("#pdf-loader").hide();
                  $("#pdf-contents").show();
                  $("#pdf-total-pages").text(__TOTAL_PAGES);
  
                  // Show the first page
                  showPage(1);
              }).catch(function(error) {
                  // If error re-show the upload button
                  $("#pdf-loader").hide();
                  $("#upload-button").show();
  
                  alert(error.message);
              });;
          }
  
          function showPage(page_no) {
              __PAGE_RENDERING_IN_PROGRESS = 1;
              __CURRENT_PAGE = page_no;
  
              // Disable Prev &amp; Next buttons while page is being loaded
              $("#pdf-next, #pdf-prev").attr('disabled', 'disabled');
  
              // While page is being rendered hide the canvas and show a loading message
              $("#pdf-canvas").hide();
              $("#page-loader").show();
  
              // Update current page in HTML
              $("#pdf-current-page").text(page_no);
  
              // Fetch the page
              __PDF_DOC.getPage(page_no).then(function(page) {
                  // As the canvas is of a fixed width we need to set the scale of the viewport accordingly
                  var scale_required = __CANVAS.width / page.getViewport(1).width;
  
                  // Get viewport of the page at required scale
                  var viewport = page.getViewport(scale_required);
  
                  // Set canvas height
                  __CANVAS.height = viewport.height;
  
                  var renderContext = {
                      canvasContext: __CANVAS_CTX,
                      viewport: viewport
                  };
  
                  // Render the page contents in the canvas
                  page.render(renderContext).then(function() {
                      __PAGE_RENDERING_IN_PROGRESS = 0;
  
                      // Re-enable Prev &amp; Next buttons
                      $("#pdf-next, #pdf-prev").removeAttr('disabled');
  
                      // Show the canvas and hide the page loader
                      $("#pdf-canvas").show();
                      $("#page-loader").hide();
                  });
              });
          }
  
          // Upon click this should should trigger click on the #file-to-upload file input element
          // This is better than showing the not-good-looking file input element
          $("#upload-button").on('click', function() {
              $("#file-to-upload").trigger('click');
          });
  
          // When user chooses a PDF file
          $("#file-to-upload").on('change', function() {
              // Validate whether PDF
              if (['application/pdf'].indexOf($("#file-to-upload").get(0).files[0].type) == -1) {
                  alert('Error : Not a PDF');
                  return;
              }
  
              $("#upload-button").hide();
  
              // Send the object url of the pdf
              showPDF(URL.createObjectURL($("#file-to-upload").get(0).files[0]));
          });
  
          // Previous page of the PDF
          $("#pdf-prev").on('click', function() {
              if (__CURRENT_PAGE != 1)
                  showPage(--__CURRENT_PAGE);
          });
  
          // Next page of the PDF
          $("#pdf-next").on('click', function() {
              if (__CURRENT_PAGE != __TOTAL_PAGES)
                  showPage(++__CURRENT_PAGE);
          });
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>