From ec0ab3da5c8f01ac5d2b0a7573e9d65d2adbf552 Mon Sep 17 00:00:00 2001
From: Benedikt Brandtner <benedikt@bikemap.net>
Date: Fri, 7 Oct 2022 13:25:27 +0200
Subject: [PATCH] updated documentation for linecap parameter in staticmaps
 endpoint; added linejoin parameter to staticmaps endpoint;

---
 docs/endpoints.rst    | 3 ++-
 src/serve_rendered.js | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/docs/endpoints.rst b/docs/endpoints.rst
index 2411d7c..06066f0 100644
--- a/docs/endpoints.rst
+++ b/docs/endpoints.rst
@@ -43,7 +43,8 @@ Static images
   * ``fill`` - color to use as the fill (e.g. ``red``, ``rgba(255,255,255,0.5)``, ``#0000ff``)
   * ``stroke`` - color of the path stroke
   * ``width`` - width of the stroke
-  * ``linecap`` - line cap of the path stroke
+  * ``linecap`` - rendering style for the start and end points of the path
+  * ``linejoin`` - rendering style for overlapping segments of the path with differing directions
   * ``border`` - color of the optional border path stroke
   * ``borderwidth`` - width of the border stroke (default 10% of width)
   * ``marker`` - Marker in format ``lng,lat|iconPath|option|option|...``
diff --git a/src/serve_rendered.js b/src/serve_rendered.js
index 6ad9442..32d035f 100644
--- a/src/serve_rendered.js
+++ b/src/serve_rendered.js
@@ -410,9 +410,14 @@ const drawPath = async (ctx, path, query, z) => {
     const borderWidth = query.borderwidth !== undefined ?
       parseFloat(query.borderwidth) : lineWidth * 0.1;
 
-    // Set line start/endpoint style
+    // Set rendering style for the start and end points of the path
+    // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
     ctx.lineCap = query.linecap || 'butt';
 
+    // Set rendering style for overlapping segments of the path with differing directions
+    // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
+    ctx.lineJoin = query.linejoin || 'miter';
+
     // In order to simulate a border we draw the path two times with the first
     // beeing the wider border part.
     if (query.border !== undefined && borderWidth > 0) {