JSFiddle - React, Tailwind, and code Playground

by hiitskiran

HTML

<script src="https://seikichi.github.io/tmp/PDFJS.0.8.715/pdf.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
  <canvas id="pdfcanvas" style="border:1px solid black"></canvas>

JavaScript

//pdfjs stuff
    var url = 'https://cdn.mozilla.net/pdfjs/helloworld.pdf';
    PDFJS.disableWorker = true;
    PDFJS.getDocument(url).then(function (pdf) {
      pdf.getPage(1).then(function (page) {
        var scale = 1.5;
        var viewport = page.getViewport(scale);
        var canvas = document.getElementById('pdfcanvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        page.render({canvasContext: context, viewport: viewport});
      });
    });
    
    //fabricjs stuff
    var fcanvas = new fabric.Canvas("pdfcanvas", {selection: false});
    fcanvas.setWidth(300);
    fcanvas.setHeight(300);
    var rect = new fabric.Rect({
                left: 100,
                top: 100,
                width: 50,
                height: 50,
                fill: '#FF454F',
                opacity: 0.5,
                transparentCorners: true,
                borderColor: "gray",
                cornerColor: "gray",
                cornerSize: 5
            });
     fcanvas.add(rect);
     fcanvas.renderAll();