Fixed stroke radius not being synchronised correctly

src/canvas.js

@@ -73,10 +73,10 @@ const smoothPath = ([...path]) => {
   return path
 }
 
-const getStrokeRadius = (pressure) => {
+const getStrokeRadius = (pressure, radius) => {
   return (
     MIN_STROKE_RADIUS +
-    (stroke_radius + pressure) * (MAX_STROKE_RADIUS - MIN_STROKE_RADIUS)
+    (radius + pressure) * (MAX_STROKE_RADIUS - MIN_STROKE_RADIUS)
   )
 }
 
@@ -92,11 +92,13 @@ const createPathElem = (d, width) => {
 export const renderPath = (id, points) => {
   points = points.filter(([x]) => x != null)
   let colour = ""
+  var radius = 0
 
   // Split up points into completely non-erased segments.
   let segments = [[]]
   for (const point of points) {
     colour = point[3]
+    radius = point[4]
     if (point[5] != false) {
       segments[segments.length - 1].push(point)
     } else {
@@ -134,8 +136,8 @@ export const renderPath = (id, points) => {
       circleElem.setAttribute("fill", colour)
       circleElem.setAttribute("cx", subpath[0][0])
       circleElem.setAttribute("cy", subpath[0][1])
-      circleElem.setAttribute("r", getStrokeRadius(subpath[0][2]))
-      console.log(getStrokeRadius(subpath[0][2]))
+      circleElem.setAttribute("r", getStrokeRadius(subpath[0][2], radius))
+      console.log(getStrokeRadius(subpath[0][2], radius))
       pathGroupElem.appendChild(circleElem)
     } else {
       // Further split up segments based on thickness.
@@ -144,13 +146,17 @@ export const renderPath = (id, points) => {
       for (let i = 1; i < subpath_.length; i++) {
         if (subpath_[i][2] != w) {
           const d = lineFn([...subpath_.splice(0, i), subpath_[0]])
-          pathGroupElem.appendChild(createPathElem(d, getStrokeRadius(w) * 2))
+          pathGroupElem.appendChild(
+            createPathElem(d, getStrokeRadius(w, radius) * 2),
+          )
           w = subpath_[0][2]
           i = 1
         }
       }
       const d = lineFn(subpath_)
-      pathGroupElem.appendChild(createPathElem(d, getStrokeRadius(w) * 2))
+      pathGroupElem.appendChild(
+        createPathElem(d, getStrokeRadius(w, radius) * 2),
+      )
     }
   }
 }

src/room.js

@@ -23,14 +23,14 @@ class Room extends EventTarget {
     this._y.destroy()
   }
 
-  addPath([x, y, w, colour]) {
+  addPath([x, y, w, colour, radius]) {
     const id = uuidv4()
-    this._y.share.strokeAdd.set(id, Y.Array).push([[x, y, w, colour]])
+    this._y.share.strokeAdd.set(id, Y.Array).push([[x, y, w, colour, radius]])
     return id
   }
 
-  extendPath(id, [x, y, w, colour]) {
-    this._y.share.strokeAdd.get(id).push([[x, y, w, colour]])
+  extendPath(id, [x, y, w, colour, radius]) {
+    this._y.share.strokeAdd.get(id).push([[x, y, w, colour, radius]])
   }
 
   getPaths() {