1509071 - Canvas based highlighters can become misaligned under certain circumstances

Status: NEW

(DevTools :: Inspector, enhancement, P2)

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Under certain circumstances canvas based highlighters can become misaligned e.g. if you make the window small or even if you collapse a section of a page.

It feels like the canvas position somehow gets out of sync.

At the moment we draw a canvas 4096 x 4096 and move it when we need to so as to keep it overlaying the screen. In the original canvas bug we were told that drawing a canvas that size isn't going to be very performant.

It would make a lot more sense to overlay only the viewport with a canvas and set it as position: fixed.

We could then either use the absolute coordinates relative to the page or change the canvas origin on scroll using:

this.ctx.translate(-scrollX, -scrollY)

This would give us some advantages:

- We could always use the absolute coordinates of items without worrying about offsets.
- Because even a 4K screen is only 3840 x 2160 the smaller canvas would give us a performance boost.
- We would never have to worry about moving the canvas onscroll because it always covers the whole viewport.

Of course, we should wait until we are not so busy in order to do this although it would fix the issue with the canvas getting out of sync.