Design and Optimization of a 100,000‑Seat Venue Seat‑Mapping System: From Flash to Canvas

Background – Large‑scale venues such as concerts and sports events can have up to 100 000 seats, far exceeding the capacity of typical cinema halls. The seat‑mapping problem is therefore complex, with variable seat layouts and non‑fixed seating.

1. Network Ticket Seat‑Mapping – Alibaba Entertainment’s ticketing platform (Damai) must render venue seat maps for online purchase. The legacy system was Flash‑based, drawing each stand independently and only providing a rough positional diagram.

2. Evolution of the Seat‑Mapping System – In 2017 the system was rebuilt from scratch, switching the tech stack from .NET/Flash (C/S) to Java/Browser‑based (B/S). The new system uses SVG as the core vector format and renders it on an HTML5 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> element.

3. Flash Is Dead – Canvas Arrives – Adobe announced the end‑of‑life for Flash in 2020, forcing a migration. SVG was chosen as the long‑term vector solution, but rendering tens of thousands of SVG elements directly would overwhelm the DOM. The team therefore adopted Canvas, which treats the entire drawing as a single DOM node, avoiding DOM‑bloat.

4. Technical Selection – Over‑using the DOM is slow; a Canvas‑plus‑SVG hybrid was prototyped, rendering up to 100 000 seats with drag‑and‑zoom. However, a single large Canvas still caused performance stalls when the canvas size grew too big. The solution was to split the canvas into a matrix of smaller canvases, each handling a subset of the venue, eliminating the single‑canvas bottleneck.

5. Viewport‑Based Incremental Loading – Instead of loading the whole venue at once, the front‑end now loads only the stands that intersect the current viewport. This “tile‑loading” approach reduces initial load time from minutes to 1–2 seconds for large venues.

6. Seat‑Matrix Deformation (Bezier Curve) – To support arbitrary seat‑layout transformations (tilt, offset, spacing, rotation, curvature), a quadratic Bézier curve is used. Seats are evenly distributed along the curve by computing the perpendicular from each seat to the P0‑P2 line, finding the intersection point, and then mapping the seat onto the Bézier path.

7. Printing Order Calculation – Ticket printing requires seats to be ordered according to physical proximity, not simply by index. The venue is divided into eight quadrants; each quadrant’s sorting rule (X‑axis or Y‑axis) is determined by the slope of the first‑row line. Seats are then sorted accordingly to produce the desired printing sequence.

8. Further Optimizations – After the major performance and deformation issues were solved, the team added features such as region editing (rectangles, circles, polygons), one‑click auto‑deformation, seat copy/mirror, automatic orientation toward the stage, and an undo/redo history implemented via a “history array” that records seat‑position data for each operation.

Conclusion – The rebuilt seat‑mapping system now supports any large venue, offers high performance, flexible deformation, and reliable printing order, and continues to evolve with additional product improvements.