How To Create Annotations In PDF.JS

Please refer to this link: Annotationeer: My Web Application That Can Create Annotations In PDF.JS.

Here is a video of what I did in action.

Here is a video of more annotations as well as a right sidebar list syncing the actions of annotations done in the canvas with the list.

If you have inquiries regarding Annotationeer, please use the Contact link at the top of the page.

Related Posts Plugin for WordPress, Blogger...


  1. Hi!
    That seems quite feasible. I haven’t yet tested it out.
    Can you provide a working demo?

    1. @sandeep that image is already my working application. if you need outsourcing help on thia do let me know

  2. HI there, I’m looking to do exactly the same thing with PDF.JS but I’m not a javascript expert by any means. Are you able to point me towards some sample code or demo etc I could run through? Thanks!

    1. @nathan: there are already source codes that create shapes in a canvas. You can Google it. With regards to PDF.JS, the points mentioned in my article should help you get started.

  3. Hello.
    I need a little help.
    I want to put my remarks with comments on pdf.js. Individual users should be able to comment. Should I keep notes on display at a later stage of group users.
    Can you help and what will be the price, please answer my mail.

  4. Does it work in all web browsers? For some reason cloned canvas turns to black once I call getContext(“2d”) on it. This happens in Firefox only. :-/

    1. hi. yes it works in all browsers. that happened to me too on new versions of pdf.js so i changed the way i cloned the canvas.

        1. Checking on my current code, I did not clone it this time. instead i created a new canvas element from scratch, then copied the attributes of the PDF.JS canvas and set them manually to my created canvas object.

          1. I am creating a new canvas element and adding it to pageContainer div, still the same. Canvas turns black the same moment i call getContext. :-/

  5. So how did you compute the rectangular bound when scaling or figuring out the bounds for the scale of 1 when the user draws an annotation at 1.25?

    1. @kyle: mouse listeners will calculate the width and height rectangular bound width then divide it by scale value

  6. Hi blogmeister

    I’ve made it so far that I am able to initially draw annotations in PDF.JS
    and made it also possible to create new annotations and resize/move those.

    But I have one issue, when I scroll down in PDF.JS, my annotations also scroll (good!)
    but, I am not able to correctly reconnect the mouse to them.
    ie. when I scroll 5 pixels down, I have to pick up the annotation 5 pixels below the annotation otherwise I can’t move it.

    Any advise?

    Best regards

    1. @ka: hi. sorry, i can only guess. does this happen when you do the scroll after you resize or move the annotation? because if that is the case, then perhaps your annotation bound is not calculated correctly.

      1. Hi !

        Yes, it is scrolling/moving after resizing/drawing.
        I suppose I have to recalculate the bounds of all annotations during scrolling?


        1. @ka: hi, the way i understood is that moving the annotation is not the same as scrolling since you are scrolling the browser, right? So if you move or resize the annotation, recalculate its x, y, width and height. but also keep a value of these at 100% zoom value since this is the basis of an annotation’s original size. I keep 2 values of them whenever i resize and/or move the annotation and when the annotation gets saved to the database, only the x, y, width and height value at 100% zoom value is kept.

    1. @prabhu: hi. have not tried it but it should since it is only an added layer on top of a pdf.js page. if pdf.js can show it without lag, there should be no problem as well with annotationeer.

Leave a Reply

Your email address will not be published. Required fields are marked *