LIMS-1496: Fix offset grid scan heatmaps in Safari

[ndg63276]

JIRA ticket: LIMS-1496

Summary:

When viewing vertical grid scans in Safari, the image is offset and so the heatmap doesn't align with the drawn grid. This seems to be because Safari doesn't like negative numbers being passed to drawImage. To test this, go to https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage and replace the drawImage line with

  ctx.drawImage(img, -250, 0, 500, 300, 0, 0, 250, 300);

On Firefox or Chrome, you see a squashed image in the right half of the frame. On Safari, you see the normal image.

It turns out Safari doesn't like negative values for the second parameter (sx), so it ignores them and uses 0 instead. It also doesn't like if sx + swidth is larger than the source image width, and scales down swidth to compensate. (Firefox and Chrome just extend the source image).

Changes:

• If sx is negative, set it to zero, move the image with dx and scale the swidth and dwidth if needed
• If sx + swidth is greater than the source image width, adjust swidth so it is not, and scale dwidth by the same amount

To test:

• In Firefox or Chrome, go to a vertical gridscan eg /dc/visit/mx38113-1/id/15459994, check the heatmap matches up with the drawn grid. This is the sx<0 case.
• Click on a box, check the box number is shown correctly on the left hand side (labelled as "Image")
• Repeat in Safari
• Repeat at a couple of screen widths (eg 1000px, 1440px)
• Repeat with the grid scan /dc/visit/cm40607-1/id/16363900, this is the (sx+swidth>img.width) case

Before:

After:

Before:

After: