Image Padding

In HTML and CSS, adding padding is incredibly simple: you just write padding: 20px 40px and the browser's layout engine automatically pushes the content inward.

But when dealing with raw rasterized image files on an HTML5 Canvas, there is no automatic "Box Model". The code has to calculate the math manually and literally redraw the entire image from scratch.

If you have a 500x500 image, and you want 10px of top padding and 20px of bottom padding, the new image height is not simply stretched to 520.

The system calculates: Original Height (500) + Top Padding (10) + Bottom Padding (20) resulting in a brand new target height of 530px.

To render this padding, the tool creates a new 500x530 Canvas and fills it with your chosen background color.

Crucially, it cannot just draw the original image at coordinate 0,0 (the top left), because that would completely ignore the top and left padding.

Instead, it must instruct the canvas API to draw the original image exactly at the coordinate (LeftPadding, TopPadding). By displacing the origin point of the drawing, it perfectly simulates the CSS padding effect on a flat, rasterized image.