update getPathFromSvgStroke for preview

packages/dev/src/state/shapes/draw.tsx

@@ -233,26 +233,44 @@ export class DrawUtil extends TLShapeUtil<T, E> {
 
 const average = (a: number, b: number) => (a + b) / 2
 
-function getSvgPathFromStroke(points: number[][]): string {
+/**
+ * Turn an array of points into a path of quadradic curves.
+ *
+ * @param points The points returned from perfect-freehand
+ * @param closed Whether the stroke is closed
+ */
+export function getSvgPathFromStroke(
+  points: number[][],
+  closed = true
+): string {
   const len = points.length
 
-  if (!len) {
-    return ''
+  if (len < 4) {
+    return ``
   }
 
-  const first = points[0]
-  let result = `M${first[0].toFixed(3)},${first[1].toFixed(3)}Q`
-
-  for (let i = 0, max = len - 1; i < max; i++) {
-    const a = points[i]
-    const b = points[i + 1]
-    result += `${a[0].toFixed(3)},${a[1].toFixed(3)} ${average(
-      a[0],
-      b[0]
-    ).toFixed(3)},${average(a[1], b[1]).toFixed(3)} `
+  let a = points[0]
+  let b = points[1]
+  const c = points[2]
+
+  let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(
+    2
+  )},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average(
+    b[1],
+    c[1]
+  ).toFixed(2)} T`
+
+  for (let i = 2, max = len - 1; i < max; i++) {
+    a = points[i]
+    b = points[i + 1]
+    result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(
+      2
+    )} `
   }
 
-  result += 'Z'
+  if (closed) {
+    result += 'Z'
+  }
 
   return result
 }