How Alibaba Scaled Seat Mapping for 100,000‑Seat Venues Using Canvas & SVG

Background

Alibaba's ticketing business (Damai) needed a way to draw seats for massive venues such as concerts and sports events, where traditional movie‑ticket seat selection is insufficient. The old system was a Flash‑based, standalone program that rendered each stand independently with only schematic positions.

Evolution of Seat Drawing

The legacy interface showed a simple schematic (see image). In 2017 a complete rewrite was started, switching the tech stack from .NET/Flash to Java and a browser‑based architecture.

The new system uses SVG vectors as the core representation and draws them on an HTML5 Canvas, overcoming many performance bottlenecks.

Flash Is Gone, Canvas Arrives

Adobe announced the end of Flash support in 2020, forcing a migration. The team evaluated SVG‑only solutions but rejected them because rendering tens of thousands of SVG elements would overload the DOM. Instead, they adopted Canvas, which treats the entire drawing as a single DOM element.

Example Canvas tag:

<canvas id="myCanvas" width="200" height="100"></canvas>

All seat graphics are drawn via JavaScript on this canvas, with updates performed by clearing and redrawing.

Key Technical Challenges and Solutions

Performance : Loading an entire venue at once caused minutes‑long delays. The solution split data loading by viewport, fetching only the stands visible to the user, reducing load time to 1–2 seconds for large venues.

Seat Deformation : To support arbitrary stand shapes, a matrix‑based approach divides the canvas into multiple smaller canvases, avoiding single‑canvas size limits.

Bezier Curve Deformation : Seats can be curved using a quadratic Bézier formula. Each row is evenly distributed along the curve, allowing realistic arc seating.

Printing Order Calculation

Ticket printing requires seats to be ordered according to physical proximity. The venue is divided into eight quadrants; each quadrant defines whether to sort by X or Y coordinate. Seats are first grouped, the slope of the first row determines the quadrant, and then sorting is applied accordingly.

Additional Features

Region editing: free drawing of rectangles, circles, polygons with deformation.

One‑click auto‑deformation: automatically fits seats to stand shape.

Seat copy & mirror: supports duplication, mirroring, and automatic numbering.

One‑click orientation: aligns a stand toward the stage.

Undo/redo: maintains a history array of seat states and re‑renders on rollback.

After continuous optimization, the new seat‑drawing system now handles any large venue efficiently, with fast loading, flexible deformation, and reliable printing order.