Neural networks are data-hungry. To train a model that survives a 35-degree tilt, we need thousands of examples. Taking physical photographs is impossible. Instead, we use the Browser-as-a-Generator.
We use the browser's 2D canvas API to programmatically "draw" our 21x21 grid in the background. This allows us to generate thousands of training frames without ever touching the DOM.
To teach the network that only the Geometry of the corner matters, we randomize everything else. For every frame, we change:
When we apply a mathematical Perspective Warp to the canvas, we compute the new floating-point coordinates of the four corners in real-time. This creates a "Perfect Label"—an error-free ground truth that no human annotator could ever achieve.