Question

I’m learning HTML5 canvas element. For my practice, I like to export pixcel data as base64 to a php file then save it as an image. While researching it, I saw an example of path.

http://www.html5canvastutorials.com/tutorials/html5-canvas-shape-fill/

is this possible to export only the path area? It looks like to me that I can only export an area of a rectangle.

Answer 1

Image files are rectangles defined by their width and height. There is no general, accepted format for storing non-rectangular bitmap data. If you only want to save the pixel data within a given path, you will need to write some specialized reading and writing code.

You could approach this by checking ctx.isPointInPath(x, y) for each pixel coordinate in your image. If the pixel is in the path, export it to your storage file. As long as you have some notion of an origin and a standardized procedure for visiting each pixel, you can use that information to save and restore pixel information within a path.

Note that this approach isn’t going to give you an anti-aliased representation of the pixel data within the path. Adding that requirement would make this much more challenging.