在使用pdfjs呈现PDF的现有<canvas>上绘制rect

Question

我目前正在使用以下代码

https://mozilla.github.io/pdf.js/web/viewer.html

将pdf显示为视频。对于此代码，我添加了以下内容

    var x = 0, y = 0;
    var xx = 0, yy = 0;
    var pagina = 0;
    var canvas,ctx, rect, drag;

 $(document).on("mousedown", ".textLayer", function (event) {
        event.preventDefault();
        // $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
        //move = false;
        $('.textLayer').attr('id', '');
        $(this).attr('id', 'paper');
        div_paper = document.getElementById('paper');
        // paper = new Raphael(div_paper);
        paper = new Raphael("paper");
        offset = findPos(div_paper);
        var marginLeft = $(this).parent().css('margin-left').replace('px', '');
        var borderLeft = $(this).parent().css('border-left-width').replace('px', '');
        pagina = $(this).parent().data("page-number");
        var offset_ = $(this).offset();
        x = event.pageX - parseFloat(marginLeft) - parseFloat(borderLeft);
        y = event.pageY - offset_.top;
        //alert("pageX: " + x + ", pageY: " + y+ ", Margin-left: " + marginLeft);

        console.log("inizio " + x + " " + y);

        //var mouseCoords = getCoords(event);
        //startX = mouseCoords.x - offset[0];
        //startY = mouseCoords.y - offset[1];
        //rect = paper.rect(startX, startY, 0, 0);
        //document.onmousemove = doDraw;
        canvas = $('#page' + pagina)[0];
        ctx = canvas.getContext('2d');

        rect = {};
        drag = false;
        //rect.startX = event.pageX - $(this).offset().left;
        //rect.startY = event.pageY - $(this).offset().top;
        rect.startX = event.pageX - $(this).offset().left;
        rect.startY = event.pageY - $(this).offset().top;
        //rect.w = 0;
        //rect.h = 0;
        drag = true;


    });

    $(document).on("mouseup ", ".textLayer", function (event) {
        // $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
        //move = false;

        var marginLeft = $(this).parent().css('margin-left').replace('px', '');
        var borderLeft = $(this).parent().css('border-left-width').replace('px', '');
        var offset_ = $(this).offset();
        xx = event.pageX - parseFloat(marginLeft) - parseFloat(borderLeft);
        yy = event.pageY - offset_.top;
        //alert("pageX: " + x + ", pageY: " + y+ ", Margin-left: " + marginLeft);
        console.log("Fine " + xx + " " + yy);

        //if (rect) {
        //    rect.remove();
        //}
        //document.onmousemove = null;
        //paper = null;
        drag = false;
        // ctx.clearRect(0, 0, 0, 0);


        //        dialog.dialog("open");




    });
                $(document).on('mousemove', function (e) {

          if (drag) {
                        rect.w = (e.pageX - $('#page' + pagina).offset().left) - rect.startX;
                        rect.h = (e.pageY - $('#page' + pagina).offset().top) - rect.startY;
                        // ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
                        ctx.clearRect(0, 0, canvas.width, canvas.height);


                        //  ctx.fillStyle = 'rgba(0,0,0,0.5)';
                        //ctx.fillStyle = "#ff0000";

                        ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);

                        //ctx.setLineDash([6]);
                        //ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
                    }}

我需要用鼠标绘制一个矩形并取出起点（我点击的地方）和终点（我释放鼠标的地方）。 两点的坐标可以正确，但我无法绘制矩形，它成为整个黑页。 你能告诉我如何解决这个问题吗？