Images with pixel density srcset are clipped on devicePixelRatio > 1

[jebibot]

Bug reports:

Images with multiple srcset specified by pixel density descriptors, for example:

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

get clipped if html2canvas is run on devices where window.devicePixelRatio > 1.

Reproduction:

How to reproduce:

1. Open https://jebibot.github.io/html2canvas-dpr/
2. Open DevTools (Ctrl+Shift+I)
3. Enable device toolbar (Ctrl+Shift+M)
4. Select Responsive or a device with higher device pixel ratio
5. Refresh the page

Possible cause and workaround

This issue seems to be caused by naturalWidth and naturalHeight of an image being different from actual image sizes on higher device pixel ratio.

This can be worked around by removing sub-rectangle parameters from drawImage() in renderReplacedElement() (https://github.com/jebibot/html2canvas/commit/d5f2bb3e19e4c4ffa662ceb0cddd04c1f2f3867b, see patched above):

html2canvas/src/render/canvas/canvas-renderer.ts

Lines 281 to 284 in 5dea36b

	0,
	0,
	container.intrinsicWidth,
	container.intrinsicHeight,

However, I guess this would not cover every/other use cases.

Specifications:

• html2canvas version tested with: 1.1.4
• Browser & version: Chrome 92