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.