function draw (g, state, drawInfo) {
    var x = drawInfo.texArea[0];
    var y = drawInfo.texArea[1];
    var w = drawInfo.texArea[2] - drawInfo.texArea[0];
    var h = drawInfo.texArea[3] - drawInfo.texArea[1];
    var routeInfo = drawInfo.routeInfo;
    g.setColor(Color.WHITE);
    g.fillRect(x, y, w, h);
    if (routeInfo != null && routeInfo != undefined) {
        const thisStn = routeInfo.drawStations[drawInfo.index];
        const thisStnDL = getNonExtraParts(thisStn.stationName);
        const font = loadResource("font", "mtrsteamloco:fonts/simhei.otf");
        const fontEN = loadResource("font", "mtrsteamloco:fonts/arial.ttf");
        const stationName = parseStr(thisStnDL);
        g.setColor(Color.BLACK);
        drawStrDL(g, font, fontEN, stationName[0] + "|" + stationName[1], widthPercent(0.5), heightPercent(0.25), h * 0.4, 1, 1);
        if (drawInfo.index < routeInfo.drawStations.length - 1) {
            const nextStnDL = getNonExtraParts(routeInfo.drawStations[drawInfo.index + 1].stationName);
            const nextStationName = parseStr(nextStnDL);
            drawStrDL(g, font, fontEN, "下一站|Next Station", widthPercent(0.05), heightPercent(0.3), h * 0.175, 0, 0);
            drawStrDL(g, font, fontEN, nextStationName[0] + "|" + nextStationName[1], widthPercent(0.05), heightPercent(0.5), h * 0.225, 0, 0);
        }
    }
    function widthPercent(p) {
        return x + w * p;
    }
    function heightPercent(p) {
        return y + h * p;
    }
    function parseStr(src) {
        return String(src).split('|');
    }
}