如何使用pdf.js实现鼠标滚轮缩放功能?

pdf.js似乎是一个强大但糟糕的文档化工具。你们中有人知道如何使用它创建缩放功能吗?我尝试了一些方法,但效果不如预期。这是一把小提琴: http://jsfiddle.net/oeaLzavn/2/

这是代码:

HTML格式:

<div>
    <canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>

CSS:

canvas{
    width: 500px;
    /* overflow: scroll; //didn't help */
}

javascript代码:

//jQuery and pdf.js needed
$(document).ready(function () {

    var url = "http://cdn.mozilla.net/pdfjs/tracemonkey.pdf";

    var pdfDoc = null,
        pageNum = 1,
        scale = 0.8,
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

    function renderPage(num, scale) {
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function (page) {
            var viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            page.render(renderContext);
        });
    }

    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
        pdfDoc = _pdfDoc;
        renderPage(pageNum, scale);
    });

    if (canvas.addEventListener) {
        // IE9, Chrome, Safari, Opera
        canvas.addEventListener("mousewheel", MouseWheelHandler, false);
        // Firefox
        canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
    }
    // IE 6/7/8
    else canvas.attachEvent("onmousewheel", MouseWheelHandler);

    function MouseWheelHandler(e) {
        var e = window.event || e;
        console.log(e);
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        console.log(delta);
        if (delta == 1) {
            scale = scale + 0.2;
        }
        else {
            scale = scale - 0.2;
        }
        renderPage(pageNum, scale);
    }

}); 

缩放是错误的参数吗?还是只是一个css?有什么想法吗?