For any given shape drawn on a graph paper, a kid can calculate the area of any shape by counting the tiles with a simple formula: any edge covering 50% or more, mark the tile; total area = sum all the tiles.
Question: How can I "straighten" these paths so that it follows the grid's horizontal and vertical lines. In another words, the new path will match the orange tiles.
Note: Assume each tile is 1x1 square and we have simple paths intersecting these squares (eg: a smooth path with only one entry point and one exit point, doesn't have complex paths inside a 1x1 square).
Simplified question: how do I determine that for each tile the path intersects, the area is >50% ?
Am thinking of using <canvas>, fill the shape with a different color, then take a 1x1 square, count the # of pixels against # of white (background) pixels.
Edit: New image, old one had errors (thank you readers).
Update 20/10 Stackover question on generating tiles.