[BUG] When padding an image, the dimensions get stretched

[BritishWerewolf]

Fix that padding was stretching the original image, and the right side was overflowing the container.

Example

This is the code I used to generate the images.
I resize the images, so that they can be padded again to the same height as the original image.

RawImage.fromBlob(file)
.then(image => image.resize((256 / image.height) * image.width, 256))
.then(image => image.pad([128, 128, 128, 128]))
.then(image => image.save('padded.png'));

Original image	Old solution	New solution

As you can see above, the old solution will add the 128 pixel padding to the top and left, however the image is resized and drawn with the same size as the canvas, hence it is cropped by 128 pixels on the right and bottom.

However, the new solution will correctly draw the image with the provided padding all around as we now draw the image with the same dimensions that it was passed in with.

Explanation

The current implementation was drawing the image with a width of newWidth, where newWidth will be the entire width.
This is incorrect, since the width should remain unchanged when drawing, otherwise the image will become stretched.

As a result, we are getting the correct left padding and top padding, but the right and bottom of the image are getting cropped off since the image is being stretched out.

From the docs, the sWidth and sHeight should match dWidth and dHeight.

[xenova]

Hi there, thanks for the PR! 👋 Can you provide some example code/input to see the incorrect behavior observed, and then the proposed corrected behaviour?

[BritishWerewolf]

@xenova, I have updated the original PR to demonstrate how the proposed changes fix the previous bug.
I hope this is clear enough, although if you need further explanation please let me know.
Thank you.

[xenova]

Thanks again!

[HuggingFaceDocBuilderDev]

The docs for this PR live here. All of your documentation changes will be reflected on that endpoint. The docs are available until 30 days after the last update.