This was an interesting scenario that I came across with. PDF.JS by default can let you select text and copy them to the clipboard. However, since my requirement had us do with creating annotations and since it is messy to mess around the DIV layers of the PDF.JS pages, we had to create a separate Canvas element to draw out annotations in.

Now, the problem is that since there is an extra Canvas layer on top of the existing Canvas layer of PDF.JS where they draw their images if the PDF contains pictures, selecting text is not possible.

However, through a CSS attribute it is possible to let mouse clicks pass through the Canvas element using the pointer-event attribute. The values for these are auto for enabled and none for disabled.

If you plan to use Javascript, use = ‘auto|none’

Changing the mouse cursor when you hover it over a Surface object in is very easy. You do not have to explicitly turn on the mouseover and mouseout events of the Surface just to change cursors.

Simply specify it within the Surface property attribute when you create a new instance of it, like this:

That’s it! When you hover your mouse cursor on the Surface object, its cursor will change. It will also change the cursor back to default when your cursor moves out of the Surface area.

Related Posts Plugin for WordPress, Blogger...