So, I need a transparent image so that I can color it in css. But, the issue is if I set color to the image, it also sets it to the canvas of the image as the canvas is part of the image too.

So, can I export a PNG that has the same canvas shape and size as the image? Here's what I mean: https://prnt.sc/sdcbe9


All raster images are rectangular. All of them.

If a raster image appears to not be a rectangle, it is because the image contains areas of transparency, but it's still a rectangle.

| improve this answer | |

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:

  1. Transparency. So all the background is fully transparent and not affected by the manipulation you make in the CSS.

  2. 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:

enter image description here

You can delete this zone. Technically there are still pixels there but now they are transparent.

enter image description here

Then you crop the excess of the sides:

enter image description here

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.

The same with Html canvas. It is a space, where different elements can be drawn using javascript.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.