title: PDFJS: Rendering PDF on canvas
body: <p>I am trying to render pdf file on canvas.</p>
  <p>Framework is Nuxt.js (Vue)</p>
  <p>Finally, I rendered pdf on canvas, but something is strange. Zoomed pdf was rendered.</p>
  <p>I tried to change scale and other values, but the result was same.</p>
  <p>How can I fix this?</p>
  <p>Please check my attached images.</p>
  <p>This is excepted pdf.</p>
  <p><a href="https://i.stack.imgur.com/dXfT8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dXfT8.png" alt="enter image description here" /></a></p>
  <p>And my result is as following: (Current scale value is 1.5)</p>
  <p><a href="https://i.stack.imgur.com/4vz1h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4vz1h.png" alt="enter image description here" /></a></p>
  <p>This is my some code to render pdf.</p>
  <pre><code>&lt;script&gt;
  export default {
    props: [&quot;page&quot;, &quot;scale&quot;],
    mounted() {
      this.drawPage();
    },
    beforeDestroy() {
      this.destroyPage(this.page);
    },
    methods: {
      drawPage() {
        if (this.renderTask) return;
  
        const { viewport } = this;
        const canvasContext = this.$el.getContext(&quot;2d&quot;);
  
        const renderContext = { canvasContext, viewport };
  
        this.renderTask = this.page.render(renderContext);
        this.renderTask.promise.then(() =&gt; this.$emit(&quot;rendered&quot;, this.page));
        this.renderTask.promise.then(/* */).catch(this.destroyRenderTask);
      },
      destroyPage(page) {
        if (!page) return;
  
        page._destroy();
        if (this.renderTask) this.renderTask.cancel();
      },
  
      destroyRenderTask() {
        if (!this.renderTask) return;
  
        this.renderTask.cancel();
        delete this.renderTask;
      },
    },
    render(h) {
      const { canvasAttrs: attrs } = this;
      return h(&quot;canvas&quot;, { attrs });
    },
    created() {
      this.viewport = this.page.getViewport({
        scale: this.scale,
      });
    },
    computed: {
      canvasAttrs() {
        let { width, height } = this.viewport;
        [width, height] = [width, height].map((dim) =&gt; Math.ceil(dim));
  
        const style = this.canvasStyle;
  
        return {
          style,
          class: &quot;pdf-page&quot;,
        };
      },
  
      canvasStyle() {
        const {
          width: actualSizeWidth,
          height: actualSizeHeight,
        } = this.actualSizeViewport;
        const pixelRatio = window.devicePixelRatio || 1;
        const [pixelWidth, pixelHeight] = [
          actualSizeWidth,
          actualSizeHeight,
        ].map((dim) =&gt; Math.ceil(dim / pixelRatio));
        return `width: ${pixelWidth}px; height: ${pixelHeight}px;`;
      },
  
      actualSizeViewport() {
        return this.viewport.clone({ scale: this.scale });
      },
    },
    watch: {
      page(page, oldPage) {
        this.destroyPage(oldPage);
      },
    },
  };
  &lt;/script&gt;
  </code></pre>