<canvas id="mapCanvas" width="1000" height="700"></canvas>

function vykresliMapu(canvasId, mapa) {

    const canvas = document.getElementById(canvasId);
    const ctx = canvas.getContext("2d");

    ctx.clearRect(
        0,
        0,
        canvas.width,
        canvas.height
    );


    /*
     * ----------------------------------------
     * Rozsah mapy
     * ----------------------------------------
     */

    const minLon = mapa.bounds.minLon;
    const maxLon = mapa.bounds.maxLon;

    const minLat = mapa.bounds.minLat;
    const maxLat = mapa.bounds.maxLat;

    const padding = 30;

    const width =
        canvas.width - padding * 2;

    const height =
        canvas.height - padding * 2;

    const lonRange =
        maxLon - minLon;

    const latRange =
        maxLat - minLat;


    /*
     * Zachovanie pomeru strán.
     */

    const scale = Math.min(
        width / lonRange,
        height / latRange
    );


    const mapWidth =
        lonRange * scale;

    const mapHeight =
        latRange * scale;


    const offsetX =
        (canvas.width - mapWidth) / 2;

    const offsetY =
        (canvas.height - mapHeight) / 2;


    /*
     * GPS → Canvas
     */

    function gpsToCanvas(lon, lat) {

        const x =
            offsetX +
            (lon - minLon) * scale;

        const y =
            offsetY +
            (maxLat - lat) * scale;

        return {
            x: x,
            y: y
        };
    }


    /*
     * ----------------------------------------
     * Vykreslenie všetkých ciest
     * ----------------------------------------
     */

    for (const road of mapa.roads) {

        if (!road.nodes || road.nodes.length < 2) {
            continue;
        }

        ctx.beginPath();

        road.nodes.forEach((point, index) => {

            const p = gpsToCanvas(
                point.lon,
                point.lat
            );

            if (index === 0) {

                ctx.moveTo(
                    p.x,
                    p.y
                );

            } else {

                ctx.lineTo(
                    p.x,
                    p.y
                );
            }
        });


        /*
         * Hrúbka podľa typu cesty
         */

        let lineWidth = 1;

        switch (road.highway) {

            case "motorway":
                lineWidth = 6;
                break;

            case "trunk":
                lineWidth = 5;
                break;

            case "primary":
                lineWidth = 4;
                break;

            case "secondary":
                lineWidth = 3;
                break;

            case "tertiary":
                lineWidth = 2;
                break;

            case "residential":
                lineWidth = 1.5;
                break;

            default:
                lineWidth = 1;
        }

        ctx.lineWidth = lineWidth;

        ctx.strokeStyle = "#777";

        ctx.lineCap = "round";
        ctx.lineJoin = "round";

        ctx.stroke();
    }


    /*
     * ----------------------------------------
     * START
     * ----------------------------------------
     */

    const start =
        gpsToCanvas(
            mapa.start.lon,
            mapa.start.lat
        );

    ctx.beginPath();

    ctx.arc(
        start.x,
        start.y,
        8,
        0,
        Math.PI * 2
    );

    ctx.fillStyle = "green";

    ctx.fill();


    /*
     * ----------------------------------------
     * END
     * ----------------------------------------
     */

    const end =
        gpsToCanvas(
            mapa.end.lon,
            mapa.end.lat
        );

    ctx.beginPath();

    ctx.arc(
        end.x,
        end.y,
        8,
        0,
        Math.PI * 2
    );

    ctx.fillStyle = "red";

    ctx.fill();
    
    if (aktualnaPoloha) {
    vykresliGPS(aktualnaPoloha);
}
    
}


fetch("mapa.php?lon1=17.1077&lat1=48.1486&lon2=17.1150&lat2=48.1510")
    .then(response => response.json())
    .then(mapa => {

        vykresliMapu(
            "mapCanvas",
            mapa
        );

    });
    
    
function vykresliTrasu(ctx, route, gpsToCanvas) {

    if (!route || !route.points) {
        return;
    }

    if (route.points.length < 2) {
        return;
    }

    ctx.beginPath();

    route.points.forEach((point, index) => {

        const p = gpsToCanvas(
            point.lon,
            point.lat
        );

        if (index === 0) {

            ctx.moveTo(
                p.x,
                p.y
            );

        } else {

            ctx.lineTo(
                p.x,
                p.y
            );
        }
    });


    ctx.lineWidth = 8;
    ctx.strokeStyle = "#ff0000";

    ctx.lineCap = "round";
    ctx.lineJoin = "round";

    ctx.stroke();


    /*
     * Tenká svetlá línia uprostred.
     */

    ctx.beginPath();

    route.points.forEach((point, index) => {

        const p = gpsToCanvas(
            point.lon,
            point.lat
        );

        if (index === 0) {
            ctx.moveTo(p.x, p.y);
        } else {
            ctx.lineTo(p.x, p.y);
        }
    });

    ctx.lineWidth = 3;
    ctx.strokeStyle = "#ffffff";

    ctx.stroke();
}

A v vykresliMapu() po vykreslení ciest zavoláš:


vykresliTrasu(
    ctx,
    mapa.route,
    gpsToCanvas
);