This document describes a train layout editor created by François Crevola that allows users to design train track layouts on an HTML5 canvas. Some key features include putting, moving, and removing track pieces on a virtual layout. The editor also supports zooming, creating new tracks by merging existing ones, and importing/exporting layouts in XML format. Initially, Crevola took pictures of physical train layouts but later experimented with drag-and-drop bitmap images in code, which had limitations. He discovered using vector graphics with Canvas allowed for rotation, mirroring, zooming of tracks and easy merging of track pieces as polygons. The editor was optimized to use three canvas layers for performance.

1. A train layout editor
on an Html5 canvas
François Crevola - June 2013http://geotrain.crevola.org/

2. Features
● Inspired by real world toy : Geotrax® from
FisherPrice®
● Put / get / move / remove tracks on the layout
● Move map up, down, left or right (virtually
infinite world/map)
● Zoom in or out
● Create new tracks (merge existing tracks)
● XML Import / export
François Crevolahttp://geotrain.crevola.org/

3. Before
François Crevola
● Eventually take pictures
of layouts created by my
children.
● Graph paper (« papier
à petits carreaux ») 5mm
x 5mm / pencil
http://geotrain.crevola.org/

4. First tries
Drag'n drop of bitmap pictures
François Crevola
Pro :
● Easy
ctx.drawImage(...)
Cons :
● Doesn't nicely fit (can but
is time consuming)
● Ugly (I'm a programmer,
not a graphic artist)
● Too much work to add a
new type of track
● Can't zoom
http://geotrain.crevola.org/

5. Eurêka !
● One day, just for fun : looking for a javascript/canvas
implémentation of the logo programming language. Playing
with the turtle.
François Crevola
…. conclusion : I will use vector graphics !!
( http://www.calormen.com/logo/ )
cs repeat 4 [fd 20 rt 90 fd 20 rt 90 fd 20 rt -90]
http://geotrain.crevola.org/

6. Benefits
● Rotate, mirror, ..
● Zoom (any level)
François Crevolahttp://geotrain.crevola.org/

7. Benefits
● Merge : each track is a polygon, so we just
have to make the union of polygons
François Crevola
+ =
Easy !
(thanks to ClipperJs)
http://geotrain.crevola.org/

8. Optimization
François Crevola
Use 3 canvas (transparent)
instead of only 1 :
- background
- track layout
- foreground (track being
moved under mouse pointer,
selecting area for merge, ….)
Take full advantage of GPU !
http://geotrain.crevola.org/
(idea from
http://www.html5rocks.com/en/tutorials/canvas/performance/ )

9. Optimization
François Crevolahttp://geotrain.crevola.org/

10. Optimization
François Crevolahttp://geotrain.crevola.org/