: How to make the canvas fit the shape of my image? I have the following image: I would like the canvas fit the exact shape of the room shown on this image. The goal is to include this

@Ogunnowo857

Yea. You can't save your image like that.



You could do the clickable areas with image map.

Image Map example:




Example code
I used this image map generator to draw the outlines of the floor plan. You can find many of these types of tools online.


Basically you upload the image and click to create points around the shape you want to turn into a clickable area, and repeat that for each shape.

Used jquery to switch the src of the img based on which area was hovered over.




Also, you could do it using svg.

SVG Example:




Example code
Brought the image over to Illustrator and traced over the raster image to create 2 separate objects that cover the outline of the floor plan.
Exported as svg.
Used css to color in the fill and stroke, when each polygon is hovered.


You would probably have to do this in Inkscape. Pretty much any vector application should work, as long as you can export it to svg easily.

This method is more or less how these types of maps are usually made these days.

Vote Up Vote Down

@Cofer715

You can't do this in GIMP and, as far as I know, in any raster graphics editor. None of PNG, JPEG, GIF, WEBP formats can hold image that is not in rectangular shape. And the web browsers could not handle this.

However, it can be done in HTML after you export the image. Do you (or your webmaster) have access to the source code? Or you use Blogger, WordPress or Tumblr etc.?

EDIT: According to your taskbar, you can edit the source ;) Have a look at HTML <map> tag. I recommend using <area shape="poly">.

Vote Up Vote Down