It’s usually a mistake to hand-implement low-level graphics primitives like this. Dealing with wavy or nested borders and edge conditions is bug-attracting code.
I’d suggest creating a small HTML
canvas, drawing Croatia on it with
path primitives and
fill, then reading back its content with
getImageData. Each fully black pixel corresponds to a square you want to draw. (Size the canvas to ensure this.)
(Or, if you just want the aesthetic, use an SVG pattern fill. That’d be less work.)
I decided to use SVGs to generate squares and images I need. SVGs are flexible and that should work with me.
I can’t figure out how can I generate squares to fit inside the border of Croatia. End result I’d like to have can be seen in (see image below).
It’s pretty easy to generate squares in some rectangular shape. Since border of Croatia is not rectangular the only thing I have in mind is to do it manually, but this is not flexible. What if I want to create bigger or smaller squares just to test it out and fit them within borders.
Currently I don’t have it, since I don’t know which would be the best. Any web based data structure would be good
If you have the data as xy points, iterate top to bottom/left to right and start/stop drawing squares whenever you cross a boundary.