# Open PDF in the canvas

**URL:** https://forum.babylonjs.com/t/open-pdf-in-the-canvas/19815
**Category:** Questions
**Created:** [April 8, 2021, 12:51pm UTC](https://forum.babylonjs.com/t/open-pdf-in-the-canvas/19815 "2021-04-08T12:51:46Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)
#### Post date: [April 8, 2021, 12:51pm UTC](https://forum.babylonjs.com/t/open-pdf-in-the-canvas/19815/1 "2021-04-08T12:51:46Z")

</div>

Hi,

I would like to know if it is possible to open a PDF onto a canvas like an iframe view. Are there any examples?

---

<div class="post-metadata">

### Author: ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)
#### Post date: [April 8, 2021, 1:16pm UTC](https://forum.babylonjs.com/t/open-pdf-in-the-canvas/19815/2 "2021-04-08T13:16:03Z")

</div>

Well, question is not really Babylon related, but this might help you.

> **[PDF.js Viewer: Annotate, Form Fill | Easy Setup | PDF.js Express](https://pdfjs.express/?utm_source=google&utm_medium=cpc&utm_campaign=main-express&utm_content=broad&utm_term=pdf.js&gclid=CjwKCAjw07qDBhBxEiwA6pPbHnJlm2iQqiiGI55ktMs0z8CQ1sgJnKtssJuFqLj0toK5CPA8xwGMqRoC0UEQAvD_BwE)**
>
> Fast & easy PDF.js Viewer integration with PDF.js Express. Add annotations, fill forms & sign PDFs in a web browser. Fully supported - download & try it free

---

<div class="post-metadata">

### Author: ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)
#### Post date: [April 8, 2021, 2:37pm UTC](https://forum.babylonjs.com/t/open-pdf-in-the-canvas/19815/3 "2021-04-08T14:37:00Z")

</div>

For this purpose I would recommend to use pdf.js from Mozilla. You may use iframe or put ctx to Dynamic Texture inside 3D scene, it is up to you.  
[https://mozilla.github.io/pdf.js/](https://mozilla.github.io/pdf.js/)

---

<div class="post-metadata">

### Author: ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)
#### Post date: [April 8, 2021, 2:39pm UTC](https://forum.babylonjs.com/t/open-pdf-in-the-canvas/19815/4 "2021-04-08T14:39:59Z")

</div>

Thanks! Can you recommend any example to follow ? Because I am not sure how to integrate it in Babylon.

---

<div class="post-metadata">

### Author: ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)
#### Post date: [April 8, 2021, 2:56pm UTC](https://forum.babylonjs.com/t/open-pdf-in-the-canvas/19815/5 "2021-04-08T14:56:58Z")

</div>

Take the simplest one as at [https://jsfiddle.net/pdfjs/9engc9mw/](https://jsfiddle.net/pdfjs/9engc9mw/)  
Get the content of PDF to canvas, then do with this canvas what you need to.  
To use this canvas for Dynamic Texture see [Dynamic Textures | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/materials/using/dynamicTexture)

---

<div class="post-metadata">

### Author: ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)
#### Post date: [April 8, 2021, 5:00pm UTC](https://forum.babylonjs.com/t/open-pdf-in-the-canvas/19815/6 "2021-04-08T17:00:10Z")

</div>

Would be nice to see your implementation 🙂

---

<div class="post-metadata">

### Author: ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)
#### Post date: [April 8, 2021, 5:10pm UTC](https://forum.babylonjs.com/t/open-pdf-in-the-canvas/19815/7 "2021-04-08T17:10:11Z")

</div>

Hey I used as simple as an iframe with higher z-index. It works as expected 🙂 I can add http links, images and also pdfs 🙂

```auto

    <iframe
  src="myPDF.pdf"
  style="
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
    height: 100%;
  ">
</iframe>
```