feat: improved freedraw (#3512)

Co-authored-by: dwelle <luzar.david@gmail.com>

package.json

     "nanoid": "3.1.22",
     "open-color": "1.8.0",
     "pako": "1.0.11",
+    "perfect-freehand": "0.4.7",
     "png-chunk-text": "1.0.0",
     "png-chunks-encode": "1.0.0",
     "png-chunks-extract": "1.0.0",

src/actions/actionFinalize.tsx

 
     const multiPointElement = appState.multiElement
       ? appState.multiElement
-      : appState.editingElement?.type === "draw"
+      : appState.editingElement?.type === "freedraw"
       ? appState.editingElement
       : null;
 
     if (multiPointElement) {
       // pen and mouse have hover
       if (
-        multiPointElement.type !== "draw" &&
+        multiPointElement.type !== "freedraw" &&
         appState.lastPointerDownWith !== "touch"
       ) {
         const { points, lastCommittedPoint } = multiPointElement;
       const isLoop = isPathALoop(multiPointElement.points, appState.zoom.value);
       if (
         multiPointElement.type === "line" ||
-        multiPointElement.type === "draw"
+        multiPointElement.type === "freedraw"
       ) {
         if (isLoop) {
           const linePoints = multiPointElement.points;
         );
       }
 
-      if (!appState.elementLocked && appState.elementType !== "draw") {
+      if (!appState.elementLocked && appState.elementType !== "freedraw") {
         appState.selectedElementIds[multiPointElement.id] = true;
       }
     }
+
     if (
-      (!appState.elementLocked && appState.elementType !== "draw") ||
+      (!appState.elementLocked && appState.elementType !== "freedraw") ||
       !multiPointElement
     ) {
       resetCursor(canvas);
     }
+
     return {
       elements: newElements,
       appState: {
         ...appState,
         elementType:
-          (appState.elementLocked || appState.elementType === "draw") &&
+          (appState.elementLocked || appState.elementType === "freedraw") &&
           multiPointElement
             ? appState.elementType
             : "selection",
         selectedElementIds:
           multiPointElement &&
           !appState.elementLocked &&
-          appState.elementType !== "draw"
+          appState.elementType !== "freedraw"
             ? {
                 ...appState.selectedElementIds,
                 [multiPointElement.id]: true,
               }
             : appState.selectedElementIds,
       },
-      commitToHistory: appState.elementType === "draw",
+      commitToHistory: appState.elementType === "freedraw",
     };
   },
   keyTest: (event, appState) =>

src/actions/actionFlip.ts

 import { normalizeAngle, resizeSingleElement } from "../element/resizeElements";
 import { AppState } from "../types";
 import { getTransformHandles } from "../element/transformHandles";
-import { isLinearElement } from "../element/typeChecks";
+import { isFreeDrawElement, isLinearElement } from "../element/typeChecks";
 import { updateBoundElements } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 
   const originalAngle = normalizeAngle(element.angle);
 
   let finalOffsetX = 0;
-  if (isLinearElement(element)) {
+  if (isLinearElement(element) || isFreeDrawElement(element)) {
     finalOffsetX =
       element.points.reduce((max, point) => Math.max(max, point[0]), 0) * 2 -
       element.width;

src/actions/types.ts

   | "changeBackgroundColor"
   | "changeFillStyle"
   | "changeStrokeWidth"
+  | "changeStrokeShape"
   | "changeSloppiness"
   | "changeStrokeStyle"
   | "changeArrowhead"

src/components/Actions.tsx

   canHaveArrowheads,
   getTargetElements,
   hasBackground,
-  hasStroke,
+  hasStrokeStyle,
+  hasStrokeWidth,
   hasText,
 } from "../scene";
 import { SHAPES } from "../shapes";
       {showChangeBackgroundIcons && renderAction("changeBackgroundColor")}
       {showFillIcons && renderAction("changeFillStyle")}
 
-      {(hasStroke(elementType) ||
-        targetElements.some((element) => hasStroke(element.type))) && (
+      {(hasStrokeWidth(elementType) ||
+        targetElements.some((element) => hasStrokeWidth(element.type))) &&
+        renderAction("changeStrokeWidth")}
+
+      {(elementType === "freedraw" ||
+        targetElements.some((element) => element.type === "freedraw")) &&
+        renderAction("changeStrokeShape")}
+
+      {(hasStrokeStyle(elementType) ||
+        targetElements.some((element) => hasStrokeStyle(element.type))) && (
         <>
-          {renderAction("changeStrokeWidth")}
           {renderAction("changeStrokeStyle")}
           {renderAction("changeSloppiness")}
         </>

src/components/App.tsx

-import { Point, simplify } from "points-on-curve";
 import React, { useContext } from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import rough from "roughjs/bin/rough";
 import { loadFromBlob } from "../data";
 import { isValidLibrary } from "../data/json";
 import Library from "../data/library";
-import { restore } from "../data/restore";
+import { restore, restoreElements } from "../data/restore";
 import {
   dragNewElement,
   dragSelectedElements,
 } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { mutateElement } from "../element/mutateElement";
-import { deepCopyElement } from "../element/newElement";
+import { deepCopyElement, newFreeDrawElement } from "../element/newElement";
 import { MaybeTransformHandleType } from "../element/transformHandles";
 import {
   isBindingElement,
 import {
   ExcalidrawBindableElement,
   ExcalidrawElement,
+  ExcalidrawFreeDrawElement,
   ExcalidrawGenericElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
         });
       } else if (data.elements) {
         this.addElementsFromPasteOrLibrary({
-          elements: data.elements,
+          elements: restoreElements(data.elements),
           position: "cursor",
         });
       } else if (data.text) {
       return;
     } else if (
       this.state.elementType === "arrow" ||
-      this.state.elementType === "draw" ||
       this.state.elementType === "line"
     ) {
       this.handleLinearElementOnPointerDown(
         this.state.elementType,
         pointerDownState,
       );
+    } else if (this.state.elementType === "freedraw") {
+      this.handleFreeDrawElementOnPointerDown(
+        event,
+        this.state.elementType,
+        pointerDownState,
+      );
     } else {
       this.createGenericElementOnPointerDown(
         this.state.elementType,
     }
   };
 
+  private handleFreeDrawElementOnPointerDown = (
+    event: React.PointerEvent<HTMLCanvasElement>,
+    elementType: ExcalidrawFreeDrawElement["type"],
+    pointerDownState: PointerDownState,
+  ) => {
+    // Begin a mark capture. This does not have to update state yet.
+    const [gridX, gridY] = getGridPoint(
+      pointerDownState.origin.x,
+      pointerDownState.origin.y,
+      null,
+    );
+
+    const element = newFreeDrawElement({
+      type: elementType,
+      x: gridX,
+      y: gridY,
+      strokeColor: this.state.currentItemStrokeColor,
+      backgroundColor: this.state.currentItemBackgroundColor,
+      fillStyle: this.state.currentItemFillStyle,
+      strokeWidth: this.state.currentItemStrokeWidth,
+      strokeStyle: this.state.currentItemStrokeStyle,
+      roughness: this.state.currentItemRoughness,
+      opacity: this.state.currentItemOpacity,
+      strokeSharpness: this.state.currentItemLinearStrokeSharpness,
+      simulatePressure: event.pressure === 0.5,
+    });
+
+    this.setState((prevState) => ({
+      selectedElementIds: {
+        ...prevState.selectedElementIds,
+        [element.id]: false,
+      },
+    }));
+
+    const pressures = element.simulatePressure
+      ? element.pressures
+      : [...element.pressures, event.pressure];
+
+    mutateElement(element, {
+      points: [[0, 0]],
+      pressures,
+    });
+
+    const boundElement = getHoveredElementForBinding(
+      pointerDownState.origin,
+      this.scene,
+    );
+    this.scene.replaceAllElements([
+      ...this.scene.getElementsIncludingDeleted(),
+      element,
+    ]);
+    this.setState({
+      draggingElement: element,
+      editingElement: element,
+      startBoundElement: boundElement,
+      suggestedBindings: [],
+    });
+  };
+
   private handleLinearElementOnPointerDown = (
     event: React.PointerEvent<HTMLCanvasElement>,
     elementType: ExcalidrawLinearElement["type"],
       const [gridX, gridY] = getGridPoint(
         pointerDownState.origin.x,
         pointerDownState.origin.y,
-        elementType === "draw" ? null : this.state.gridSize,
+        this.state.gridSize,
       );
 
       /* If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.
       const hasHitASelectedElement = pointerDownState.hit.allHitElements.some(
         (element) => this.isASelectedElement(element),
       );
+
       if (
         hasHitASelectedElement ||
         pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements
         return;
       }
 
-      if (isLinearElement(draggingElement)) {
+      if (draggingElement.type === "freedraw") {
+        const points = draggingElement.points;
+        const dx = pointerCoords.x - draggingElement.x;
+        const dy = pointerCoords.y - draggingElement.y;
+
+        const pressures = draggingElement.simulatePressure
+          ? draggingElement.pressures
+          : [...draggingElement.pressures, event.pressure];
+
+        mutateElement(draggingElement, {
+          points: [...points, [dx, dy]],
+          pressures,
+        });
+      } else if (isLinearElement(draggingElement)) {
         pointerDownState.drag.hasOccurred = true;
         const points = draggingElement.points;
-        let dx: number;
-        let dy: number;
-        if (draggingElement.type === "draw") {
-          dx = pointerCoords.x - draggingElement.x;
-          dy = pointerCoords.y - draggingElement.y;
-        } else {
-          dx = gridX - draggingElement.x;
-          dy = gridY - draggingElement.y;
-        }
+        let dx = gridX - draggingElement.x;
+        let dy = gridY - draggingElement.y;
 
         if (getRotateWithDiscreteAngleKey(event) && points.length === 2) {
           ({ width: dx, height: dy } = getPerfectElementSize(
         if (points.length === 1) {
           mutateElement(draggingElement, { points: [...points, [dx, dy]] });
         } else if (points.length > 1) {
-          if (draggingElement.type === "draw") {
-            mutateElement(draggingElement, {
-              points: simplify(
-                [...(points as Point[]), [dx, dy]],
-                0.7 / this.state.zoom.value,
-              ),
-            });
-          } else {
-            mutateElement(draggingElement, {
-              points: [...points.slice(0, -1), [dx, dy]],
-            });
-          }
+          mutateElement(draggingElement, {
+            points: [...points.slice(0, -1), [dx, dy]],
+          });
         }
+
         if (isBindingElement(draggingElement)) {
           // When creating a linear element by dragging
           this.maybeSuggestBindingForLinearElementAtCursor(
         pointerDownState.eventListeners.onKeyUp!,
       );
 
-      if (draggingElement?.type === "draw") {
+      if (draggingElement?.type === "freedraw") {
+        const pointerCoords = viewportCoordsToSceneCoords(
+          childEvent,
+          this.state,
+        );
+
+        const points = draggingElement.points;
+        let dx = pointerCoords.x - draggingElement.x;
+        let dy = pointerCoords.y - draggingElement.y;
+
+        // Allows dots to avoid being flagged as infinitely small
+        if (dx === points[0][0] && dy === points[0][1]) {
+          dy += 0.0001;
+          dx += 0.0001;
+        }
+
+        const pressures = draggingElement.simulatePressure
+          ? []
+          : [...draggingElement.pressures, childEvent.pressure];
+
+        mutateElement(draggingElement, {
+          points: [...points, [dx, dy]],
+          pressures,
+        });
+
         this.actionManager.executeAction(actionFinalize);
+
         return;
       }
 
             );
           }
           this.setState({ suggestedBindings: [], startBoundElement: null });
-          if (!elementLocked && elementType !== "draw") {
+          if (!elementLocked) {
             resetCursor(this.canvas);
             this.setState((prevState) => ({
               draggingElement: null,
         return;
       }
 
-      if (!elementLocked && elementType !== "draw" && draggingElement) {
+      if (!elementLocked && elementType !== "freedraw" && draggingElement) {
         this.setState((prevState) => ({
           selectedElementIds: {
             ...prevState.selectedElementIds,
         );
       }
 
-      if (!elementLocked && elementType !== "draw") {
+      if (!elementLocked && elementType !== "freedraw") {
         resetCursor(this.canvas);
         this.setState({
           draggingElement: null,

src/components/HelpDialog.tsx

                 <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
                 <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
                 <Shortcut
-                  label={t("toolBar.draw")}
+                  label={t("toolBar.freedraw")}
                   shortcuts={["Shift+P", "7"]}
                 />
                 <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />

src/components/HintViewer.tsx

     return t("hints.linearElementMulti");
   }
 
-  if (elementType === "draw") {
+  if (elementType === "freedraw") {
     return t("hints.freeDraw");
   }
 

src/data/restore.ts

 
 const restoreElementWithProperties = <T extends ExcalidrawElement>(
   element: Required<T>,
-  extra: Omit<Required<T>, keyof ExcalidrawElement>,
+  extra: Omit<Required<T>, keyof ExcalidrawElement> & {
+    type?: ExcalidrawElement["type"];
+  },
 ): T => {
   const base: Pick<T, keyof ExcalidrawElement> = {
-    type: element.type,
+    type: extra.type || element.type,
     // all elements must have version > 0 so getSceneVersion() will pick up
     // newly added elements
     version: element.version || 1,
         textAlign: element.textAlign || DEFAULT_TEXT_ALIGN,
         verticalAlign: element.verticalAlign || DEFAULT_VERTICAL_ALIGN,
       });
+    case "freedraw": {
+      return restoreElementWithProperties(element, {
+        points: element.points,
+        lastCommittedPoint: null,
+        simulatePressure: element.simulatePressure,
+        pressures: element.pressures,
+      });
+    }
     case "draw":
     case "line":
     case "arrow": {
       } = element;
 
       return restoreElementWithProperties(element, {
+        type: element.type === "draw" ? "line" : element.type,
         startBinding: element.startBinding,
         endBinding: element.endBinding,
         points:

src/element/bounds.ts

-import { ExcalidrawElement, ExcalidrawLinearElement, Arrowhead } from "./types";
+import {
+  ExcalidrawElement,
+  ExcalidrawLinearElement,
+  Arrowhead,
+  ExcalidrawFreeDrawElement,
+} from "./types";
 import { distance2d, rotate } from "../math";
 import rough from "roughjs/bin/rough";
 import { Drawable, Op } from "roughjs/bin/core";
   getShapeForElement,
   generateRoughOptions,
 } from "../renderer/renderElement";
-import { isLinearElement } from "./typeChecks";
+import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 import { rescalePoints } from "../points";
 
 // x and y position of top left corner, x and y position of bottom right corner
 export const getElementAbsoluteCoords = (
   element: ExcalidrawElement,
 ): Bounds => {
-  if (isLinearElement(element)) {
+  if (isFreeDrawElement(element)) {
+    return getFreeDrawElementAbsoluteCoords(element);
+  } else if (isLinearElement(element)) {
     return getLinearElementAbsoluteCoords(element);
   }
   return [
   return [minX, minY, maxX, maxY];
 };
 
+const getBoundsFromPoints = (
+  points: ExcalidrawFreeDrawElement["points"],
+): [number, number, number, number] => {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const [x, y] of points) {
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  }
+
+  return [minX, minY, maxX, maxY];
+};
+
+const getFreeDrawElementAbsoluteCoords = (
+  element: ExcalidrawFreeDrawElement,
+): [number, number, number, number] => {
+  const [minX, minY, maxX, maxY] = getBoundsFromPoints(element.points);
+
+  return [
+    minX + element.x,
+    minY + element.y,
+    maxX + element.x,
+    maxY + element.y,
+  ];
+};
+
 const getLinearElementAbsoluteCoords = (
   element: ExcalidrawLinearElement,
 ): [number, number, number, number] => {
+  let coords: [number, number, number, number];
+
   if (element.points.length < 2 || !getShapeForElement(element)) {
     // XXX this is just a poor estimate and not very useful
     const { minX, minY, maxX, maxY } = element.points.reduce(
       },
       { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
     );
-    return [
+    coords = [
       minX + element.x,
       minY + element.y,
       maxX + element.x,
       maxY + element.y,
     ];
-  }
+  } else {
+    const shape = getShapeForElement(element) as Drawable[];
 
-  const shape = getShapeForElement(element) as Drawable[];
+    // first element is always the curve
+    const ops = getCurvePathOps(shape[0]);
 
-  // first element is always the curve
-  const ops = getCurvePathOps(shape[0]);
+    const [minX, minY, maxX, maxY] = getMinMaxXYFromCurvePathOps(ops);
 
-  const [minX, minY, maxX, maxY] = getMinMaxXYFromCurvePathOps(ops);
+    coords = [
+      minX + element.x,
+      minY + element.y,
+      maxX + element.x,
+      maxY + element.y,
+    ];
+  }
 
-  return [
-    minX + element.x,
-    minY + element.y,
-    maxX + element.x,
-    maxY + element.y,
-  ];
+  return coords;
 };
 
 export const getArrowheadPoints = (
   const ys = y2 - ny * minSize;
 
   if (arrowhead === "dot") {
-    const r = Math.hypot(ys - y2, xs - x2);
+    const r = Math.hypot(ys - y2, xs - x2) + element.strokeWidth;
     return [x2, y2, r];
   }
 
   return getMinMaxXYFromCurvePathOps(ops, transformXY);
 };
 
+// We could cache this stuff
 export const getElementBounds = (
   element: ExcalidrawElement,
 ): [number, number, number, number] => {
+  let bounds: [number, number, number, number];
+
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
-  if (isLinearElement(element)) {
-    return getLinearElementRotatedBounds(element, cx, cy);
-  }
-  if (element.type === "diamond") {
+  if (isFreeDrawElement(element)) {
+    const [minX, minY, maxX, maxY] = getBoundsFromPoints(
+      element.points.map(([x, y]) =>
+        rotate(x, y, cx - element.x, cy - element.y, element.angle),
+      ),
+    );
+
+    return [
+      minX + element.x,
+      minY + element.y,
+      maxX + element.x,
+      maxY + element.y,
+    ];
+  } else if (isLinearElement(element)) {
+    bounds = getLinearElementRotatedBounds(element, cx, cy);
+  } else if (element.type === "diamond") {
     const [x11, y11] = rotate(cx, y1, cx, cy, element.angle);
     const [x12, y12] = rotate(cx, y2, cx, cy, element.angle);
     const [x22, y22] = rotate(x1, cy, cx, cy, element.angle);
     const minY = Math.min(y11, y12, y22, y21);
     const maxX = Math.max(x11, x12, x22, x21);
     const maxY = Math.max(y11, y12, y22, y21);
-    return [minX, minY, maxX, maxY];
-  }
-  if (element.type === "ellipse") {
+    bounds = [minX, minY, maxX, maxY];
+  } else if (element.type === "ellipse") {
     const w = (x2 - x1) / 2;
     const h = (y2 - y1) / 2;
     const cos = Math.cos(element.angle);
     const sin = Math.sin(element.angle);
     const ww = Math.hypot(w * cos, h * sin);
     const hh = Math.hypot(h * cos, w * sin);
-    return [cx - ww, cy - hh, cx + ww, cy + hh];
+    bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
+  } else {
+    const [x11, y11] = rotate(x1, y1, cx, cy, element.angle);
+    const [x12, y12] = rotate(x1, y2, cx, cy, element.angle);
+    const [x22, y22] = rotate(x2, y2, cx, cy, element.angle);
+    const [x21, y21] = rotate(x2, y1, cx, cy, element.angle);
+    const minX = Math.min(x11, x12, x22, x21);
+    const minY = Math.min(y11, y12, y22, y21);
+    const maxX = Math.max(x11, x12, x22, x21);
+    const maxY = Math.max(y11, y12, y22, y21);
+    bounds = [minX, minY, maxX, maxY];
   }
-  const [x11, y11] = rotate(x1, y1, cx, cy, element.angle);
-  const [x12, y12] = rotate(x1, y2, cx, cy, element.angle);
-  const [x22, y22] = rotate(x2, y2, cx, cy, element.angle);
-  const [x21, y21] = rotate(x2, y1, cx, cy, element.angle);
-  const minX = Math.min(x11, x12, x22, x21);
-  const minY = Math.min(y11, y12, y22, y21);
-  const maxX = Math.max(x11, x12, x22, x21);
-  const maxY = Math.max(y11, y12, y22, y21);
-  return [minX, minY, maxX, maxY];
+
+  return bounds;
 };
 
 export const getCommonBounds = (
   nextWidth: number,
   nextHeight: number,
 ): [number, number, number, number] => {
-  if (!isLinearElement(element)) {
+  if (!(isLinearElement(element) || isFreeDrawElement(element))) {
     return [
       element.x,
       element.y,
     rescalePoints(1, nextHeight, element.points),
   );
 
-  const gen = rough.generator();
-  const curve =
-    element.strokeSharpness === "sharp"
-      ? gen.linearPath(
-          points as [number, number][],
-          generateRoughOptions(element),
-        )
-      : gen.curve(points as [number, number][], generateRoughOptions(element));
-  const ops = getCurvePathOps(curve);
-  const [minX, minY, maxX, maxY] = getMinMaxXYFromCurvePathOps(ops);
+  let bounds: [number, number, number, number];
+
+  if (isFreeDrawElement(element)) {
+    // Free Draw
+    bounds = getBoundsFromPoints(points);
+  } else {
+    // Line
+    const gen = rough.generator();
+    const curve =
+      element.strokeSharpness === "sharp"
+        ? gen.linearPath(
+            points as [number, number][],
+            generateRoughOptions(element),
+          )
+        : gen.curve(
+            points as [number, number][],
+            generateRoughOptions(element),
+          );
+    const ops = getCurvePathOps(curve);
+    bounds = getMinMaxXYFromCurvePathOps(ops);
+  }
+
+  const [minX, minY, maxX, maxY] = bounds;
   return [
     minX + element.x,
     minY + element.y,

src/element/collision.ts

 import * as GALine from "../galines";
 import * as GATransform from "../gatransforms";
 
-import { isPathALoop, isPointInPolygon, rotate } from "../math";
+import {
+  distance2d,
+  rotatePoint,
+  isPathALoop,
+  isPointInPolygon,
+  rotate,
+} from "../math";
 import { pointsOnBezierCurves } from "points-on-curve";
 
 import {
   ExcalidrawTextElement,
   ExcalidrawEllipseElement,
   NonDeleted,
+  ExcalidrawFreeDrawElement,
 } from "./types";
 
 import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
   if (element.type === "arrow") {
     return false;
   }
+
+  if (element.type === "freedraw") {
+    return true;
+  }
+
   const isDraggableFromInside = element.backgroundColor !== "transparent";
-  if (element.type === "line" || element.type === "draw") {
+
+  if (element.type === "line") {
     return isDraggableFromInside && isPathALoop(element.points);
   }
+
   return isDraggableFromInside;
 };
 
       : isElementDraggableFromInside(element)
       ? isInsideCheck
       : isNearCheck;
+
   return hitTestPointAgainstElement({ element, point, threshold, check });
 };
 
     case "ellipse":
       const distance = distanceToBindableElement(args.element, args.point);
       return args.check(distance, args.threshold);
+    case "freedraw": {
+      if (
+        !args.check(
+          distanceToRectangle(args.element, args.point),
+          args.threshold,
+        )
+      ) {
+        return false;
+      }
+
+      return hitTestFreeDrawElement(args.element, args.point, args.threshold);
+    }
     case "arrow":
     case "line":
     case "draw":
 };
 
 const distanceToRectangle = (
-  element: ExcalidrawRectangleElement | ExcalidrawTextElement,
+  element:
+    | ExcalidrawRectangleElement
+    | ExcalidrawTextElement
+    | ExcalidrawFreeDrawElement,
   point: Point,
 ): number => {
   const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
   return [pointRel, tangent];
 };
 
+const hitTestFreeDrawElement = (
+  element: ExcalidrawFreeDrawElement,
+  point: Point,
+  threshold: number,
+): boolean => {
+  // Check point-distance-to-line-segment for every segment in the
+  // element's points (its input points, not its outline points).
+  // This is... okay? It's plenty fast, but the GA library may
+  // have a faster option.
+
+  let x: number;
+  let y: number;
+
+  if (element.angle === 0) {
+    x = point[0] - element.x;
+    y = point[1] - element.y;
+  } else {
+    // Counter-rotate the point around center before testing
+    const [minX, minY, maxX, maxY] = getElementAbsoluteCoords(element);
+    const rotatedPoint = rotatePoint(
+      point,
+      [minX + (maxX - minX) / 2, minY + (maxY - minY) / 2],
+      -element.angle,
+    );
+    x = rotatedPoint[0] - element.x;
+    y = rotatedPoint[1] - element.y;
+  }
+
+  let [A, B] = element.points;
+  let P: readonly [number, number];
+
+  // For freedraw dots
+  if (element.points.length === 2) {
+    return (
+      distance2d(A[0], A[1], x, y) < threshold ||
+      distance2d(B[0], B[1], x, y) < threshold
+    );
+  }
+
+  // For freedraw lines
+  for (let i = 1; i < element.points.length - 1; i++) {
+    const delta = [B[0] - A[0], B[1] - A[1]];
+    const length = Math.hypot(delta[1], delta[0]);
+
+    const U = [delta[0] / length, delta[1] / length];
+    const C = [x - A[0], y - A[1]];
+    const d = (C[0] * U[0] + C[1] * U[1]) / Math.hypot(U[1], U[0]);
+    P = [A[0] + U[0] * d, A[1] + U[1] * d];
+
+    const da = distance2d(P[0], P[1], A[0], A[1]);
+    const db = distance2d(P[0], P[1], B[0], B[1]);
+
+    P = db < da && da > length ? B : da < db && db > length ? A : P;
+
+    if (Math.hypot(y - P[1], x - P[0]) < threshold) {
+      return true;
+    }
+
+    A = B;
+    B = element.points[i + 1];
+  }
+
+  return false;
+};
+
 const hitTestLinear = (args: HitTestArgs): boolean => {
   const { element, threshold } = args;
   if (!getShapeForElement(element)) {

src/element/newElement.ts

   GroupId,
   VerticalAlign,
   Arrowhead,
+  ExcalidrawFreeDrawElement,
 } from "../element/types";
 import { measureText, getFontString } from "../utils";
 import { randomInteger, randomId } from "../random";
   });
 };
 
+export const newFreeDrawElement = (
+  opts: {
+    type: "freedraw";
+    points?: ExcalidrawFreeDrawElement["points"];
+    simulatePressure: boolean;
+  } & ElementConstructorOpts,
+): NonDeleted<ExcalidrawFreeDrawElement> => {
+  return {
+    ..._newElementBase<ExcalidrawFreeDrawElement>(opts.type, opts),
+    points: opts.points || [],
+    pressures: [],
+    simulatePressure: opts.simulatePressure,
+    lastCommittedPoint: null,
+  };
+};
+
 export const newLinearElement = (
   opts: {
     type: ExcalidrawLinearElement["type"];

src/element/resizeElements.ts

   getCommonBounds,
   getResizedElementAbsoluteCoords,
 } from "./bounds";
-import { isLinearElement, isTextElement } from "./typeChecks";
+import {
+  isFreeDrawElement,
+  isLinearElement,
+  isTextElement,
+} from "./typeChecks";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import { measureText, getFontString } from "../utils";
   width: number,
   height: number,
 ) =>
-  isLinearElement(element)
+  isLinearElement(element) || isFreeDrawElement(element)
     ? {
         points: rescalePoints(
           0,
     -stateAtResizeStart.angle,
   );
 
-  //Get bounds corners rendered on screen
+  // Get bounds corners rendered on screen
   const [esx1, esy1, esx2, esy2] = getResizedElementAbsoluteCoords(
     element,
     element.width,
           font = { fontSize: nextFont.size, baseline: nextFont.baseline };
         }
         const origCoords = getElementAbsoluteCoords(element);
+
         const rescaledPoints = rescalePointsInElement(element, width, height);
+
         updateBoundElements(element, {
           newSize: { width, height },
           simultaneouslyUpdated: elements,
         });
+
         const finalCoords = getResizedElementAbsoluteCoords(
           {
             ...element,
           width,
           height,
         );
+
         const { x, y } = getNextXY(element, origCoords, finalCoords);
         return [...prev, { width, height, x, y, ...rescaledPoints, ...font }];
       },

src/element/sizeHelpers.ts

 import { ExcalidrawElement } from "./types";
 import { mutateElement } from "./mutateElement";
-import { isLinearElement } from "./typeChecks";
+import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 import { SHIFT_LOCKING_ANGLE } from "../constants";
 
 export const isInvisiblySmallElement = (
   element: ExcalidrawElement,
 ): boolean => {
-  if (isLinearElement(element)) {
+  if (isLinearElement(element) || isFreeDrawElement(element)) {
     return element.points.length < 2;
   }
   return element.width === 0 && element.height === 0;
   if (
     elementType === "line" ||
     elementType === "arrow" ||
-    elementType === "draw"
+    elementType === "freedraw"
   ) {
     const lockedAngle =
       Math.round(Math.atan(absHeight / absWidth) / SHIFT_LOCKING_ANGLE) *

src/element/transformHandles.ts

   if (
     element.type === "arrow" ||
     element.type === "line" ||
-    element.type === "draw"
+    element.type === "freedraw"
   ) {
     if (element.points.length === 2) {
       // only check the last point because starting point is always (0,0)

src/element/typeChecks.ts

   ExcalidrawLinearElement,
   ExcalidrawBindableElement,
   ExcalidrawGenericElement,
+  ExcalidrawFreeDrawElement,
 } from "./types";
 
 export const isGenericElement = (
   return element != null && element.type === "text";
 };
 
+export const isFreeDrawElement = (
+  element?: ExcalidrawElement | null,
+): element is ExcalidrawFreeDrawElement => {
+  return element != null && isFreeDrawElementType(element.type);
+};
+
+export const isFreeDrawElementType = (
+  elementType: ExcalidrawElement["type"],
+): boolean => {
+  return elementType === "freedraw";
+};
+
 export const isLinearElement = (
   element?: ExcalidrawElement | null,
 ): element is ExcalidrawLinearElement => {
   elementType: ExcalidrawElement["type"],
 ): boolean => {
   return (
-    elementType === "arrow" || elementType === "line" || elementType === "draw"
+    elementType === "arrow" || elementType === "line" // || elementType === "freedraw"
   );
 };
 
     element?.type === "rectangle" ||
     element?.type === "ellipse" ||
     element?.type === "arrow" ||
-    element?.type === "draw" ||
+    element?.type === "freedraw" ||
     element?.type === "line"
   );
 };

src/element/types.ts

 export type ExcalidrawElement =
   | ExcalidrawGenericElement
   | ExcalidrawTextElement
-  | ExcalidrawLinearElement;
+  | ExcalidrawLinearElement
+  | ExcalidrawFreeDrawElement;
 
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
   isDeleted: false;
     startArrowhead: Arrowhead | null;
     endArrowhead: Arrowhead | null;
   }>;
+
+export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase &
+  Readonly<{
+    type: "freedraw";
+    points: readonly Point[];
+    pressures: readonly number[];
+    simulatePressure: boolean;
+    lastCommittedPoint: Point | null;
+  }>;

src/locales/ar-SA.json

   },
   "toolBar": {
     "selection": "تحديد",
-    "draw": "الكتابة الحرة",
+    "freedraw": "الكتابة الحرة",
     "rectangle": "مستطيل",
     "diamond": "مضلع",
     "ellipse": "دائرة",

src/locales/bg-BG.json

   },
   "toolBar": {
     "selection": "Селекция",
-    "draw": "Рисуване",
+    "freedraw": "Рисуване",
     "rectangle": "Правоъгълник",
     "diamond": "Диамант",
     "ellipse": "Елипс",

src/locales/ca-ES.json

   },
   "toolBar": {
     "selection": "Selecció",
-    "draw": "Dibuix lliure",
+    "freedraw": "Dibuix lliure",
     "rectangle": "Rectangle",
     "diamond": "Rombe",
     "ellipse": "El·lipse",

src/locales/de-DE.json

   },
   "toolBar": {
     "selection": "Auswahl",
-    "draw": "Freies Zeichnen",
+    "freedraw": "Freies Zeichnen",
     "rectangle": "Rechteck",
     "diamond": "Raute",
     "ellipse": "Ellipse",

src/locales/el-GR.json

   },
   "toolBar": {
     "selection": "Επιλογή",
-    "draw": "Ελεύθερο σχέδιο",
+    "freedraw": "Ελεύθερο σχέδιο",
     "rectangle": "Ορθογώνιο",
     "diamond": "Ρόμβος",
     "ellipse": "Έλλειψη",

src/locales/en.json

     "background": "Background",
     "fill": "Fill",
     "strokeWidth": "Stroke width",
+    "strokeShape": "Stroke shape",
+    "strokeShape_gel": "Gel pen",
+    "strokeShape_fountain": "Fountain pen",
+    "strokeShape_brush": "Brush pen",
     "strokeStyle": "Stroke style",
     "strokeStyle_solid": "Solid",
     "strokeStyle_dashed": "Dashed",
   },
   "toolBar": {
     "selection": "Selection",
-    "draw": "Free draw",
     "rectangle": "Rectangle",
     "diamond": "Diamond",
     "ellipse": "Ellipse",

src/locales/es-ES.json

   },
   "toolBar": {
     "selection": "Selección",
-    "draw": "Dibujo libre",
+    "freedraw": "Dibujo libre",
     "rectangle": "Rectángulo",
     "diamond": "Diamante",
     "ellipse": "Elipse",

src/locales/fa-IR.json

   },
   "toolBar": {
     "selection": "گزینش",
-    "draw": "طراحی آزاد",
+    "freedraw": "طراحی آزاد",
     "rectangle": "مستطیل",
     "diamond": "لوزی",
     "ellipse": "بیضی",

src/locales/fi-FI.json

   },
   "toolBar": {
     "selection": "Valinta",
-    "draw": "Vapaa piirto",
+    "freedraw": "Vapaa piirto",
     "rectangle": "Suorakulmio",
     "diamond": "Vinoneliö",
     "ellipse": "Soikio",

src/locales/fr-FR.json

   },
   "toolBar": {
     "selection": "Sélection",
-    "draw": "Dessin libre",
+    "freedraw": "Dessin libre",
     "rectangle": "Rectangle",
     "diamond": "Losange",
     "ellipse": "Ellipse",

src/locales/he-IL.json

   },
   "toolBar": {
     "selection": "בחירה",
-    "draw": "ציור חופשי",
+    "freedraw": "ציור חופשי",
     "rectangle": "מרובע",
     "diamond": "מעוין",
     "ellipse": "אליפסה",

src/locales/hi-IN.json

   },
   "toolBar": {
     "selection": "चयन",
-    "draw": "मुफ्त ड्रा",
+    "freedraw": "मुफ्त ड्रा",
     "rectangle": "आयात",
     "diamond": "तिर्यग्वर्ग",
     "ellipse": "दीर्घवृत्त",

src/locales/hu-HU.json

   },
   "toolBar": {
     "selection": "Kijelölés",
-    "draw": "Szabadkézi rajz",
+    "freedraw": "Szabadkézi rajz",
     "rectangle": "Téglalap",
     "diamond": "Rombusz",
     "ellipse": "Ellipszis",

src/locales/id-ID.json

   },
   "toolBar": {
     "selection": "Pilihan",
-    "draw": "Menggambar bebas",
+    "freedraw": "Menggambar bebas",
     "rectangle": "Persegi",
     "diamond": "Berlian",
     "ellipse": "Elips",

src/locales/it-IT.json

   },
   "toolBar": {
     "selection": "Selezione",
-    "draw": "Disegno libero",
+    "freedraw": "Disegno libero",
     "rectangle": "Rettangolo",
     "diamond": "Rombo",
     "ellipse": "Ellisse",

src/locales/ja-JP.json

   },
   "toolBar": {
     "selection": "選択",
-    "draw": "手書き",
+    "freedraw": "手書き",
     "rectangle": "矩形",
     "diamond": "ひし形",
     "ellipse": "楕円",

src/locales/kab-KAB.json

   },
   "toolBar": {
     "selection": "Tafrayt",
-    "draw": "Unuɣ ilelli",
+    "freedraw": "Unuɣ ilelli",
     "rectangle": "Asrem",
     "diamond": "Ameɣṛun",
     "ellipse": "Taglayt",

src/locales/ko-KR.json

   },
   "toolBar": {
     "selection": "선택",
-    "draw": "자유롭게 그리기",
+    "freedraw": "자유롭게 그리기",
     "rectangle": "사각형",
     "diamond": "다이아몬드",
     "ellipse": "타원",

src/locales/my-MM.json

   },
   "toolBar": {
     "selection": "ရွေးချယ်",
-    "draw": "အလွတ်ရေးဆွဲ",
+    "freedraw": "အလွတ်ရေးဆွဲ",
     "rectangle": "စတုဂံ",
     "diamond": "စိန်",
     "ellipse": "အဝိုင်း",

src/locales/nb-NO.json

   },
   "toolBar": {
     "selection": "Velg",
-    "draw": "Frihåndstegning",
+    "freedraw": "Frihåndstegning",
     "rectangle": "Rektangel",
     "diamond": "Diamant",
     "ellipse": "Ellipse",

src/locales/nl-NL.json

   },
   "toolBar": {
     "selection": "Selectie",
-    "draw": "Vrij tekenen",
+    "freedraw": "Vrij tekenen",
     "rectangle": "Rechthoek",
     "diamond": "Ruit",
     "ellipse": "Ovaal",

src/locales/nn-NO.json

   },
   "toolBar": {
     "selection": "Vel",
-    "draw": "Frihandsteikning",
+    "freedraw": "Frihandsteikning",
     "rectangle": "Rektangel",
     "diamond": "Diamant",
     "ellipse": "Ellipse",

src/locales/oc-FR.json

   },
   "toolBar": {
     "selection": "Seleccion",
-    "draw": "Dessenh liure",
+    "freedraw": "Dessenh liure",
     "rectangle": "Rectangle",
     "diamond": "Lausange",
     "ellipse": "Ellipsa",

src/locales/pa-IN.json

   },
   "toolBar": {
     "selection": "ਚੋਣਕਾਰ",
-    "draw": "ਖੁੱਲ੍ਹੀ ਵਾਹੀ",
+    "freedraw": "ਖੁੱਲ੍ਹੀ ਵਾਹੀ",
     "rectangle": "ਆਇਤ",
     "diamond": "ਹੀਰਾ",
     "ellipse": "ਅੰਡਾਕਾਰ",

src/locales/pl-PL.json

   },
   "toolBar": {
     "selection": "Zaznaczenie",
-    "draw": "Swobodne rysowanie",
+    "freedraw": "Swobodne rysowanie",
     "rectangle": "Prostokąt",
     "diamond": "Romb",
     "ellipse": "Elipsa",

src/locales/pt-BR.json

   },
   "toolBar": {
     "selection": "Seleção",
-    "draw": "Desenho livre",
+    "freedraw": "Desenho livre",
     "rectangle": "Retângulo",
     "diamond": "Losango",
     "ellipse": "Elipse",

src/locales/pt-PT.json

   },
   "toolBar": {
     "selection": "Seleção",
-    "draw": "Desenho livre",
+    "freedraw": "Desenho livre",
     "rectangle": "Retângulo",
     "diamond": "Losango",
     "ellipse": "Elipse",

src/locales/ro-RO.json

   },
   "toolBar": {
     "selection": "Selecție",
-    "draw": "Desenare liberă",
+    "freedraw": "Desenare liberă",
     "rectangle": "Dreptunghi",
     "diamond": "Romb",
     "ellipse": "Elipsă",

src/locales/ru-RU.json

   },
   "toolBar": {
     "selection": "Выделение области",
-    "draw": "Свободное рисование",
+    "freedraw": "Свободное рисование",
     "rectangle": "Прямоугольник",
     "diamond": "Ромб",
     "ellipse": "Эллипс",

src/locales/sk-SK.json

   },
   "toolBar": {
     "selection": "Výber",
-    "draw": "Voľné kreslenie",
+    "freedraw": "Voľné kreslenie",
     "rectangle": "Obdĺžnik",
     "diamond": "Diamant",
     "ellipse": "Elipsa",

src/locales/sv-SE.json

   },
   "toolBar": {
     "selection": "Markering",
-    "draw": "Frihand",
+    "freedraw": "Frihand",
     "rectangle": "Rektangel",
     "diamond": "Diamant",
     "ellipse": "Ellips",

src/locales/tr-TR.json

   },
   "toolBar": {
     "selection": "Seçme",
-    "draw": "Serbest çizim",
+    "freedraw": "Serbest çizim",
     "rectangle": "Dikdörtgen",
     "diamond": "Elmas",
     "ellipse": "Elips",

src/locales/uk-UA.json

   },
   "toolBar": {
     "selection": "Виділення",
-    "draw": "Вільне креслення",
+    "freedraw": "Вільне креслення",
     "rectangle": "Прямокутник",
     "diamond": "Ромб",
     "ellipse": "Еліпс",

src/locales/zh-CN.json

   },
   "toolBar": {
     "selection": "选择",
-    "draw": "自由书写",
+    "freedraw": "自由书写",
     "rectangle": "矩形",
     "diamond": "菱形",
     "ellipse": "椭圆",

src/locales/zh-TW.json

   },
   "toolBar": {
     "selection": "選取",
-    "draw": "繪圖",
+    "freedraw": "繪圖",
     "rectangle": "長方形",
     "diamond": "菱形",
     "ellipse": "橢圓",

src/math.ts

   return false;
 };
 
+// TODO: Rounding this point causes some shake when free drawing
 export const getGridPoint = (
   x: number,
   y: number,

src/points.ts

     height: Math.max(...ys) - Math.min(...ys),
   };
 };
+
 export const rescalePoints = (
   dimension: 0 | 1,
   nextDimensionSize: number,

src/renderer/renderElement.ts

   ExcalidrawTextElement,
   Arrowhead,
   NonDeletedExcalidrawElement,
+  ExcalidrawFreeDrawElement,
 } from "../element/types";
-import { isTextElement, isLinearElement } from "../element/typeChecks";
+import {
+  isTextElement,
+  isLinearElement,
+  isFreeDrawElement,
+} from "../element/typeChecks";
 import {
   getDiamondPoints,
   getElementAbsoluteCoords,
 import rough from "roughjs/bin/rough";
 import { Zoom } from "../types";
 import { getDefaultAppState } from "../appState";
+import getFreeDrawShape from "perfect-freehand";
 
 const defaultAppState = getDefaultAppState();
 
-const CANVAS_PADDING = 20;
-
 const getDashArrayDashed = (strokeWidth: number) => [8, 8 + strokeWidth];
+
 const getDashArrayDotted = (strokeWidth: number) => [1.5, 6 + strokeWidth];
 
+const getCanvasPadding = (element: ExcalidrawElement) =>
+  element.type === "freedraw" ? element.strokeWidth * 12 : 20;
+
 export interface ExcalidrawElementWithCanvas {
   element: ExcalidrawElement | ExcalidrawTextElement;
   canvas: HTMLCanvasElement;
 ): ExcalidrawElementWithCanvas => {
   const canvas = document.createElement("canvas");
   const context = canvas.getContext("2d")!;
+  const padding = getCanvasPadding(element);
 
   let canvasOffsetX = 0;
   let canvasOffsetY = 0;
 
-  if (isLinearElement(element)) {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+  if (isLinearElement(element) || isFreeDrawElement(element)) {
+    let [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+
+    x1 = Math.floor(x1);
+    x2 = Math.ceil(x2);
+    y1 = Math.floor(y1);
+    y2 = Math.ceil(y2);
+
     canvas.width =
       distance(x1, x2) * window.devicePixelRatio * zoom.value +
-      CANVAS_PADDING * zoom.value * 2;
+      padding * zoom.value * 2;
     canvas.height =
       distance(y1, y2) * window.devicePixelRatio * zoom.value +
-      CANVAS_PADDING * zoom.value * 2;
+      padding * zoom.value * 2;
 
     canvasOffsetX =
       element.x > x1
   } else {
     canvas.width =
       element.width * window.devicePixelRatio * zoom.value +
-      CANVAS_PADDING * zoom.value * 2;
+      padding * zoom.value * 2;
     canvas.height =
       element.height * window.devicePixelRatio * zoom.value +
-      CANVAS_PADDING * zoom.value * 2;
+      padding * zoom.value * 2;
   }
 
-  context.translate(CANVAS_PADDING * zoom.value, CANVAS_PADDING * zoom.value);
+  context.translate(padding * zoom.value, padding * zoom.value);
 
   context.scale(
     window.devicePixelRatio * zoom.value,
   );
 
   const rc = rough.canvas(canvas);
+
   drawElementOnCanvas(element, rc, context);
-  context.translate(
-    -(CANVAS_PADDING * zoom.value),
-    -(CANVAS_PADDING * zoom.value),
-  );
+
+  context.translate(-(padding * zoom.value), -(padding * zoom.value));
   context.scale(
     1 / (window.devicePixelRatio * zoom.value),
     1 / (window.devicePixelRatio * zoom.value),
       });
       break;
     }
+    case "freedraw": {
+      // Draw directly to canvas
+      context.save();
+      context.fillStyle = element.strokeColor;
+
+      const path = getFreeDrawPath2D(element) as Path2D;
+
+      context.fillStyle = element.strokeColor;
+      context.fill(path);
+
+      context.restore();
+      break;
+    }
     default: {
       if (isTextElement(element)) {
         const rtl = isRTL(element.text);
       }
       return options;
     }
-    case "line":
-    case "draw": {
-      // If shape is a line and is a closed shape,
-      // fill the shape if a color is set.
+    case "draw":
+    case "line": {
       if (isPathALoop(element.points)) {
         options.fillStyle = element.fillStyle;
         options.fill =
       }
       return options;
     }
+    case "freedraw":
     case "arrow":
       return options;
     default: {
   }
 };
 
+/**
+ * Generates the element's shape and puts it into the cache.
+ * @param element
+ * @param generator
+ */
 const generateElementShape = (
   element: NonDeletedExcalidrawElement,
   generator: RoughGenerator,
 ) => {
   let shape = shapeCache.get(element) || null;
+
   if (!shape) {
     elementWithCanvasCache.delete(element);
 
           generateRoughOptions(element),
         );
         break;
-      case "line":
       case "draw":
+      case "line":
       case "arrow": {
         const options = generateRoughOptions(element);
 
                   ...options,
                   fill: element.strokeColor,
                   fillStyle: "solid",
+                  stroke: "none",
                 }),
               ];
             }
 
             // Arrow arrowheads
             const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
+
             if (element.strokeStyle === "dotted") {
               // for dotted arrows caps, reduce gap to make it more legible
-              options.strokeLineDash = [3, 4];
+              const dash = getDashArrayDotted(element.strokeWidth - 1);
+              options.strokeLineDash = [dash[0], dash[1] - 1];
             } else {
               // for solid/dashed, keep solid arrow cap
               delete options.strokeLineDash;
             shape.push(...shapes);
           }
         }
+
+        break;
+      }
+      case "freedraw": {
+        generateFreeDrawShape(element);
+        shape = [];
         break;
       }
       case "text": {
     !sceneState?.shouldCacheIgnoreZoom;
   if (!prevElementWithCanvas || shouldRegenerateBecauseZoom) {
     const elementWithCanvas = generateElementCanvas(element, zoom);
+
     elementWithCanvasCache.set(element, elementWithCanvas);
+
     return elementWithCanvas;
   }
   return prevElementWithCanvas;
   sceneState: SceneState,
 ) => {
   const element = elementWithCanvas.element;
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+  const padding = getCanvasPadding(element);
+  let [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+
+  // Free draw elements will otherwise "shuffle" as the min x and y change
+  if (isFreeDrawElement(element)) {
+    x1 = Math.floor(x1);
+    x2 = Math.ceil(x2);
+    y1 = Math.floor(y1);
+    y2 = Math.ceil(y2);
+  }
+
   const cx = ((x1 + x2) / 2 + sceneState.scrollX) * window.devicePixelRatio;
   const cy = ((y1 + y2) / 2 + sceneState.scrollY) * window.devicePixelRatio;
   context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
   context.translate(cx, cy);
   context.rotate(element.angle);
+
   context.drawImage(
     elementWithCanvas.canvas!,
     (-(x2 - x1) / 2) * window.devicePixelRatio -
-      (CANVAS_PADDING * elementWithCanvas.canvasZoom) /
-        elementWithCanvas.canvasZoom,
+      (padding * elementWithCanvas.canvasZoom) / elementWithCanvas.canvasZoom,
     (-(y2 - y1) / 2) * window.devicePixelRatio -
-      (CANVAS_PADDING * elementWithCanvas.canvasZoom) /
-        elementWithCanvas.canvasZoom,
+      (padding * elementWithCanvas.canvasZoom) / elementWithCanvas.canvasZoom,
     elementWithCanvas.canvas!.width / elementWithCanvas.canvasZoom,
     elementWithCanvas.canvas!.height / elementWithCanvas.canvasZoom,
   );
       );
       break;
     }
+    case "freedraw": {
+      generateElementShape(element, generator);
+
+      if (renderOptimizations) {
+        const elementWithCanvas = generateElementWithCanvas(
+          element,
+          sceneState,
+        );
+        drawElementFromCanvas(elementWithCanvas, rc, context, sceneState);
+      } else {
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+        const cx = (x1 + x2) / 2 + sceneState.scrollX;
+        const cy = (y1 + y2) / 2 + sceneState.scrollY;
+        const shiftX = (x2 - x1) / 2 - (element.x - x1);
+        const shiftY = (y2 - y1) / 2 - (element.y - y1);
+        context.translate(cx, cy);
+        context.rotate(element.angle);
+        context.translate(-shiftX, -shiftY);
+        drawElementOnCanvas(element, rc, context);
+        context.translate(shiftX, shiftY);
+        context.rotate(-element.angle);
+        context.translate(-cx, -cy);
+      }
+
+      break;
+    }
     case "rectangle":
     case "diamond":
     case "ellipse":
-    case "line":
     case "draw":
+    case "line":
     case "arrow":
     case "text": {
       generateElementShape(element, generator);
       svgRoot.appendChild(node);
       break;
     }
-    case "line":
     case "draw":
+    case "line":
     case "arrow": {
       generateElementShape(element, generator);
       const group = svgRoot.ownerDocument!.createElementNS(SVG_NS, "g");
           }) rotate(${degree} ${cx} ${cy})`,
         );
         if (
-          (element.type === "line" || element.type === "draw") &&
+          element.type === "line" &&
           isPathALoop(element.points) &&
           element.backgroundColor !== "transparent"
         ) {
       svgRoot.appendChild(group);
       break;
     }
+    case "freedraw": {
+      generateFreeDrawShape(element);
+      const opacity = element.opacity / 100;
+      const node = svgRoot.ownerDocument!.createElementNS(SVG_NS, "g");
+      if (opacity !== 1) {
+        node.setAttribute("stroke-opacity", `${opacity}`);
+        node.setAttribute("fill-opacity", `${opacity}`);
+      }
+      node.setAttribute(
+        "transform",
+        `translate(${offsetX || 0} ${
+          offsetY || 0
+        }) rotate(${degree} ${cx} ${cy})`,
+      );
+      const path = svgRoot.ownerDocument!.createElementNS(SVG_NS, "path");
+      node.setAttribute("stroke", "none");
+      node.setAttribute("fill", element.strokeStyle);
+      path.setAttribute("d", getFreeDrawSvgPath(element));
+      node.appendChild(path);
+      svgRoot.appendChild(node);
+      break;
+    }
     default: {
       if (isTextElement(element)) {
         const opacity = element.opacity / 100;
     }
   }
 };
+
+export const pathsCache = new WeakMap<ExcalidrawFreeDrawElement, Path2D>([]);
+
+export function generateFreeDrawShape(element: ExcalidrawFreeDrawElement) {
+  const svgPathData = getFreeDrawSvgPath(element);
+  const path = new Path2D(svgPathData);
+  pathsCache.set(element, path);
+  return path;
+}
+
+export function getFreeDrawPath2D(element: ExcalidrawFreeDrawElement) {
+  return pathsCache.get(element);
+}
+
+export function getFreeDrawSvgPath(element: ExcalidrawFreeDrawElement) {
+  const inputPoints = element.simulatePressure
+    ? element.points
+    : element.points.length
+    ? element.points.map(([x, y], i) => [x, y, element.pressures[i]])
+    : [[0, 0, 0]];
+
+  // Consider changing the options for simulated pressure vs real pressure
+  const options = {
+    simulatePressure: element.simulatePressure,
+    size: element.strokeWidth * 6,
+    thinning: 0.5,
+    smoothing: 0.5,
+    streamline: 0.5,
+    easing: (t: number) => t * (2 - t),
+    last: true,
+  };
+
+  const points = getFreeDrawShape(inputPoints as number[][], options);
+  const d: (string | number)[] = [];
+
+  let [p0, p1] = points;
+
+  d.push("M", p0[0], p0[1], "Q");
+
+  for (let i = 0; i < points.length; i++) {
+    d.push(p0[0], p0[1], (p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2);
+    p0 = p1;
+    p1 = points[i];
+  }
+
+  p1 = points[0];
+  d.push(p0[0], p0[1], (p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2);
+
+  d.push("Z");
+
+  return d.join(" ");
+}

src/renderer/renderScene.ts

     renderGrid?: boolean;
   } = {},
 ) => {
-  if (!canvas) {
+  if (canvas === null) {
     return { atLeastOneVisibleElement: false };
   }
 
   const context = canvas.getContext("2d")!;
+
   context.scale(scale, scale);
 
   // When doing calculations based on canvas width we should used normalized one

src/scene/comparisons.ts

   type === "rectangle" ||
   type === "ellipse" ||
   type === "diamond" ||
-  type === "draw" ||
   type === "line";
 
-export const hasStroke = (type: string) =>
+export const hasStrokeWidth = (type: string) =>
   type === "rectangle" ||
   type === "ellipse" ||
   type === "diamond" ||
+  type === "freedraw" ||
   type === "arrow" ||
-  type === "draw" ||
   type === "line";
 
-export const canChangeSharpness = (type: string) =>
+export const hasStrokeStyle = (type: string) =>
   type === "rectangle" ||
+  type === "ellipse" ||
+  type === "diamond" ||
   type === "arrow" ||
-  type === "draw" ||
   type === "line";
 
+export const canChangeSharpness = (type: string) =>
+  type === "rectangle" || type === "arrow" || type === "line";
+
 export const hasText = (type: string) => type === "text";
 
 export const canHaveArrowheads = (type: string) => type === "arrow";

src/scene/index.ts

 export { calculateScrollCenter } from "./scroll";
 export {
   hasBackground,
-  hasStroke,
+  hasStrokeWidth,
+  hasStrokeStyle,
   canHaveArrowheads,
   canChangeSharpness,
   getElementAtPosition,

src/shapes.tsx

         ></path>
       </svg>
     ),
-    value: "draw",
+    value: "freedraw",
     key: KEYS.X,
   },
   {

src/tests/__snapshots__/regressionTests.test.tsx.snap

   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "draw",
+  "elementType": "freedraw",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElementIds": null,
-  "endArrowhead": null,
-  "endBinding": null,
   "fillStyle": "hachure",
   "groupIds": Array [],
   "height": 10,
       50,
       10,
     ],
+    Array [
+      50,
+      10,
+    ],
+  ],
+  "pressures": Array [
+    0,
+    0,
+    0,
   ],
   "roughness": 1,
   "seed": 941653321,
-  "startArrowhead": null,
-  "startBinding": null,
+  "simulatePressure": false,
   "strokeColor": "#000000",
   "strokeSharpness": "round",
   "strokeStyle": "solid",
   "strokeWidth": 1,
-  "type": "draw",
-  "version": 3,
-  "versionNonce": 1402203177,
+  "type": "freedraw",
+  "version": 4,
+  "versionNonce": 1359939303,
   "width": 50,
   "x": 550,
   "y": -10,
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElementIds": null,
-          "endArrowhead": null,
-          "endBinding": null,
           "fillStyle": "hachure",
           "groupIds": Array [],
           "height": 10,
               50,
               10,
             ],
+            Array [
+              50,
+              10,
+            ],
+          ],
+          "pressures": Array [
+            0,
+            0,
+            0,
           ],
           "roughness": 1,
           "seed": 941653321,
-          "startArrowhead": null,
-          "startBinding": null,
+          "simulatePressure": false,
           "strokeColor": "#000000",
           "strokeSharpness": "round",
           "strokeStyle": "solid",
           "strokeWidth": 1,
-          "type": "draw",
-          "version": 3,
-          "versionNonce": 1402203177,
+          "type": "freedraw",
+          "version": 4,
+          "versionNonce": 1359939303,
           "width": 50,
           "x": 550,
           "y": -10,
 
 exports[`regression tests key 6 selects line tool: [end of test] number of renders 1`] = `8`;
 
-exports[`regression tests key 7 selects draw tool: [end of test] appState 1`] = `
+exports[`regression tests key 7 selects freedraw tool: [end of test] appState 1`] = `
 Object {
   "collaborators": Map {},
   "currentChartType": "bar",
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "draw",
+  "elementType": "freedraw",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
 }
 `;
 
-exports[`regression tests key 7 selects draw tool: [end of test] element 0 1`] = `
+exports[`regression tests key 7 selects freedraw tool: [end of test] element 0 1`] = `
 Object {
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElementIds": null,
-  "endArrowhead": null,
-  "endBinding": null,
   "fillStyle": "hachure",
   "groupIds": Array [],
   "height": 10,
       10,
       10,
     ],
+    Array [
+      10,
+      10,
+    ],
+  ],
+  "pressures": Array [
+    0,
+    0,
+    0,
   ],
   "roughness": 1,
   "seed": 337897,
-  "startArrowhead": null,
-  "startBinding": null,
+  "simulatePressure": false,
   "strokeColor": "#000000",
   "strokeSharpness": "round",
   "strokeStyle": "solid",
   "strokeWidth": 1,
-  "type": "draw",
-  "version": 3,
-  "versionNonce": 449462985,
+  "type": "freedraw",
+  "version": 4,
+  "versionNonce": 453191,
   "width": 10,
   "x": 10,
   "y": 10,
 }
 `;
 
-exports[`regression tests key 7 selects draw tool: [end of test] history 1`] = `
+exports[`regression tests key 7 selects freedraw tool: [end of test] history 1`] = `
 Object {
   "recording": false,
   "redoStack": Array [],
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElementIds": null,
-          "endArrowhead": null,
-          "endBinding": null,
           "fillStyle": "hachure",
           "groupIds": Array [],
           "height": 10,
               10,
               10,
             ],
+            Array [
+              10,
+              10,
+            ],
+          ],
+          "pressures": Array [
+            0,
+            0,
+            0,
           ],
           "roughness": 1,
           "seed": 337897,
-          "startArrowhead": null,
-          "startBinding": null,
+          "simulatePressure": false,
           "strokeColor": "#000000",
           "strokeSharpness": "round",
           "strokeStyle": "solid",
           "strokeWidth": 1,
-          "type": "draw",
-          "version": 3,
-          "versionNonce": 449462985,
+          "type": "freedraw",
+          "version": 4,
+          "versionNonce": 453191,
           "width": 10,
           "x": 10,
           "y": 10,
 }
 `;
 
-exports[`regression tests key 7 selects draw tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 7 selects freedraw tool: [end of test] number of elements 1`] = `1`;
 
-exports[`regression tests key 7 selects draw tool: [end of test] number of renders 1`] = `8`;
+exports[`regression tests key 7 selects freedraw tool: [end of test] number of renders 1`] = `8`;
 
 exports[`regression tests key a selects arrow tool: [end of test] appState 1`] = `
 Object {
 
 exports[`regression tests key r selects rectangle tool: [end of test] number of renders 1`] = `8`;
 
-exports[`regression tests key x selects draw tool: [end of test] appState 1`] = `
+exports[`regression tests key x selects freedraw tool: [end of test] appState 1`] = `
 Object {
   "collaborators": Map {},
   "currentChartType": "bar",
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "draw",
+  "elementType": "freedraw",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
 }
 `;
 
-exports[`regression tests key x selects draw tool: [end of test] element 0 1`] = `
+exports[`regression tests key x selects freedraw tool: [end of test] element 0 1`] = `
 Object {
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElementIds": null,
-  "endArrowhead": null,
-  "endBinding": null,
   "fillStyle": "hachure",
   "groupIds": Array [],
   "height": 10,
       10,
       10,
     ],
+    Array [
+      10,
+      10,
+    ],
+  ],
+  "pressures": Array [
+    0,
+    0,
+    0,
   ],
   "roughness": 1,
   "seed": 337897,
-  "startArrowhead": null,
-  "startBinding": null,
+  "simulatePressure": false,
   "strokeColor": "#000000",
   "strokeSharpness": "round",
   "strokeStyle": "solid",
   "strokeWidth": 1,
-  "type": "draw",
-  "version": 3,
-  "versionNonce": 449462985,
+  "type": "freedraw",
+  "version": 4,
+  "versionNonce": 453191,
   "width": 10,
   "x": 10,
   "y": 10,
 }
 `;
 
-exports[`regression tests key x selects draw tool: [end of test] history 1`] = `
+exports[`regression tests key x selects freedraw tool: [end of test] history 1`] = `
 Object {
   "recording": false,
   "redoStack": Array [],
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElementIds": null,
-          "endArrowhead": null,
-          "endBinding": null,
           "fillStyle": "hachure",
           "groupIds": Array [],
           "height": 10,
               10,
               10,
             ],
+            Array [
+              10,
+              10,
+            ],
+          ],
+          "pressures": Array [
+            0,
+            0,
+            0,
           ],
           "roughness": 1,
           "seed": 337897,
-          "startArrowhead": null,
-          "startBinding": null,
+          "simulatePressure": false,
           "strokeColor": "#000000",
           "strokeSharpness": "round",
           "strokeStyle": "solid",
           "strokeWidth": 1,
-          "type": "draw",
-          "version": 3,
-          "versionNonce": 449462985,
+          "type": "freedraw",
+          "version": 4,
+          "versionNonce": 453191,
           "width": 10,
           "x": 10,
           "y": 10,
 }
 `;
 
-exports[`regression tests key x selects draw tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key x selects freedraw tool: [end of test] number of elements 1`] = `1`;
 
-exports[`regression tests key x selects draw tool: [end of test] number of renders 1`] = `8`;
+exports[`regression tests key x selects freedraw tool: [end of test] number of renders 1`] = `8`;
 
 exports[`regression tests make a group and duplicate it: [end of test] appState 1`] = `
 Object {

src/tests/flip.test.tsx

 };
 
 const createAndReturnOneDraw = (angle: number = 0) => {
-  return UI.createElement("draw", {
+  return UI.createElement("freedraw", {
     x: 0,
     y: 0,
     width: 50,

src/tests/helpers/api.ts

   ExcalidrawGenericElement,
   ExcalidrawTextElement,
   ExcalidrawLinearElement,
+  ExcalidrawFreeDrawElement,
 } from "../../element/types";
 import { newElement, newTextElement, newLinearElement } from "../../element";
 import { DEFAULT_VERTICAL_ALIGN } from "../../constants";
 import util from "util";
 import path from "path";
 import { getMimeType } from "../../data/blob";
+import { newFreeDrawElement } from "../../element/newElement";
 
 const readFile = util.promisify(fs.readFile);
 
     verticalAlign?: T extends "text"
       ? ExcalidrawTextElement["verticalAlign"]
       : never;
-  }): T extends "arrow" | "line" | "draw"
+  }): T extends "arrow" | "line"
     ? ExcalidrawLinearElement
+    : T extends "freedraw"
+    ? ExcalidrawFreeDrawElement
     : T extends "text"
     ? ExcalidrawTextElement
     : ExcalidrawGenericElement => {
           verticalAlign: rest.verticalAlign ?? DEFAULT_VERTICAL_ALIGN,
         });
         break;
+      case "freedraw":
+        element = newFreeDrawElement({
+          type: type as "freedraw",
+          simulatePressure: true,
+          ...base,
+        });
+        break;
       case "arrow":
       case "line":
-      case "draw":
         element = newLinearElement({
-          type: type as "arrow" | "line" | "draw",
+          type: type as "arrow" | "line",
           startArrowhead: null,
           endArrowhead: null,
           ...base,

src/tests/helpers/ui.ts

       height?: number;
       angle?: number;
     } = {},
-  ): (T extends "arrow" | "line" | "draw"
+  ): (T extends "arrow" | "line" | "freedraw"
     ? ExcalidrawLinearElement
     : T extends "text"
     ? ExcalidrawTextElement
     : ExcalidrawElement) & {
     /** Returns the actual, current element from the elements array, instead
         of the proxy */
-    get(): T extends "arrow" | "line" | "draw"
+    get(): T extends "arrow" | "line" | "freedraw"
       ? ExcalidrawLinearElement
       : T extends "text"
       ? ExcalidrawTextElement

src/tests/queries/toolQueries.ts

   ellipse: "ellipse",
   arrow: "arrow",
   line: "line",
-  draw: "draw",
+  freedraw: "freedraw",
   text: "text",
 };
 

src/tests/regressionTests.test.tsx

     mouse.click(30, 10);
     Keyboard.keyPress(KEYS.ENTER);
 
-    UI.clickTool("draw");
+    UI.clickTool("freedraw");
     mouse.down(40, -20);
     mouse.up(50, 10);
 
       "line",
       "arrow",
       "line",
-      "draw",
+      "freedraw",
     ]);
   });
 
     [`4${KEYS.E}`, "ellipse", true],
     [`5${KEYS.A}`, "arrow", true],
     [`6${KEYS.L}`, "line", true],
-    [`7${KEYS.X}`, "draw", false],
+    [`7${KEYS.X}`, "freedraw", false],
   ] as [string, ExcalidrawElement["type"], boolean][]) {
     for (const key of keys) {
       it(`key ${key} selects ${shape} tool`, () => {

yarn.lock

   version "0.5.3"
   resolved "https://registry.npmjs.org/pepjs/-/pepjs-0.5.3.tgz"
 
+perfect-freehand@0.4.7:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/perfect-freehand/-/perfect-freehand-0.4.7.tgz#4d85fd64881ba81b2a4eaa6ac4e8983ccb21dd43"
+  integrity sha512-SSSFL8VzXiOHQdUTyNyOb0JC+btVZRy9bi6jos7Nb7PBTI0PHX5jM6RgCTSrubQ8Ul9qOYWmWgJBrwVGHwyJZQ==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"