You have mixed concepts.
There is no "Canvas" in a PNG file. A Png file is a rectangular bitmap, so the shape is rectangular.
What you need is two characteristics:
Transparency. So all the background is fully transparent and not affected by the manipulation you make in the CSS.
Cropping to the nontransparent zone of the image, so every excess zone outside the shirt shape is not present at all.
You can do both in an editing application. Ps, Gimp, Krita, Paint Net, Etc.
Using the magic wand or Fuzzy selection on Gimp or similar marks some walking ants, the dotted line in this image:
You can delete this zone. Technically there are still pixels there but now they are transparent.
Then you crop the excess of the sides:
If you change the background of the the background of the image will change accordingly.
Any CSS transform of colors will not affect the transparent zone.
Canvas is the size of a document, but when you are working in layers. This is different because you can have small objects floating on that space, you can paint on that space. But once you save it on a simple format, like PNG or JPG, all those elements are merged into one single layer, so there is no difference now between the "canvas" and the image itself.