(ml5717) Added comment explanation to shape smoothing

src/canvas.js

@@ -192,10 +192,14 @@ export const splitOnPressures = ([...path]) => {
 }
 
 export const renderPath = (id, points, pathEraseIntervals) => {
-  let index = -1
+  let rectShapeStartIndex = -1
+
+  // Rect recognition hint shape: pure rect with no erasure
   if (Object.keys(pathEraseIntervals).length == 0 && points.length == 5) {
-    index = 0
+    rectShapeStartIndex = 0
+    // Recognised rect shape: rect after completely erased raw data
   } else if (Object.keys(pathEraseIntervals).length > 0 && points.length > 5) {
+    // Check that the preceding raw data is completely erased
     for (let i = 0; i < points.length - 5; i++) {
       if (
         !pathEraseIntervals[i] ||
@@ -207,14 +211,16 @@ export const renderPath = (id, points, pathEraseIntervals) => {
       }
     }
 
-    index = points.length - 5
+    rectShapeStartIndex = points.length - 5
   }
+
+  // Only draw the path smooth if it is not a recognised rect shape, i.e. the last five points form a cycle
   const pathSmooth = !(
-    index >= 0 &&
-    points[index][0] == points[index + 4][0] &&
-    points[index][1] == points[index + 4][1] &&
-    points[index][2] == points[index + 4][2] &&
-    points[index][3] == points[index + 4][3]
+    rectShapeStartIndex >= 0 &&
+    points[rectShapeStartIndex][0] == points[rectShapeStartIndex + 4][0] &&
+    points[rectShapeStartIndex][1] == points[rectShapeStartIndex + 4][1] &&
+    points[rectShapeStartIndex][2] == points[rectShapeStartIndex + 4][2] &&
+    points[rectShapeStartIndex][3] == points[rectShapeStartIndex + 4][3]
   )
 
   let subpaths = applyErasureIntervals(points, pathEraseIntervals)
@@ -223,6 +229,7 @@ export const renderPath = (id, points, pathEraseIntervals) => {
   const subpathElems = subpaths.map((subpath) =>
     renderSubpath(subpath, pathSmooth),
   )
+
   const pathGroupElem = ensurePathGroupElem(id)
   subpathElems.forEach((subpathElem) => pathGroupElem.appendChild(subpathElem))
 }