Need help with pdf coords to viewport point conversion

[jorgebenaventee]

I am building some application where I need to draw some HTML elements above a pdf. I have a pdf document with a grid and the coordinates of the pdf. I am storing pdf coordinates in each object X and Y property. However, I am getting some offset when positioning my boxes. Here are some snippets.

Box object:

{
  height: 50,
  width: 50,
  x: 500,
  y: 100,
}

Box rendering logic:

const [viewportX, viewportY] = viewport.convertToViewportPoint(
  box.x,
  box.y,
)

console.log({
  viewportX,
  viewportY,
  boxX: box.x,
  boxY: box.y,
  transform: viewport.transform,
})


container.style.position = 'absolute'
container.style.left = `${viewportX}px`
container.style.top = `${viewportY}px`
container.style.width = `${box.width * viewport.scale}px`
container.style.height = `${box.height * viewport.scale}px`

Box position:

What I am expecting is my box getting correctly positioned in its coords.

Thanks in advance!

[calixteman]

You can do something similar to what we do when rendering an annotation:

pdf.js/src/display/annotation_layer.js

Line 265 in f180de4

_createContainer(ignoreBorder) {

data.rect contains the rect dimensions of the annotation bbox as defined in the pdf.

[jorgebenaventee]

It worked! Thank you so much!