diff --git a/src/features/preview/PreviewManager.js b/src/features/preview/PreviewManager.js
index 71a19c46..30944ffc 100644
--- a/src/features/preview/PreviewManager.js
+++ b/src/features/preview/PreviewManager.js
@@ -4,7 +4,9 @@ import React, { useRef } from "react"
 import { useSelector, useDispatch } from "react-redux"
 import Select from "react-select"
 import Slider from "rc-slider"
+import Button from "react-bootstrap/Button"
 import "rc-slider/assets/index.css"
+import { FaPencilAlt } from "react-icons/fa"
 import {
   updateEffect,
   selectCurrentEffect,
@@ -12,12 +14,17 @@ import {
 import {
   selectPreviewSliderValue,
   selectPreviewZoom,
+  selectDrawingMode,
 } from "@/features/preview/previewSlice"
 import { updateLayer, selectCurrentLayer } from "@/features/layers/layersSlice"
 import { getShape } from "@/features/shapes/shapeFactory"
 import { getEffect } from "@/features/effects/effectFactory"
 import "./PreviewManager.scss"
-import { updatePreview } from "./previewSlice"
+import {
+  updatePreview,
+  toggleDrawingMode,
+  exitDrawingMode,
+} from "./previewSlice"
 import PreviewWindow from "./PreviewWindow"
 
 const PreviewManager = ({ isActive }) => {
@@ -26,6 +33,7 @@ const PreviewManager = ({ isActive }) => {
   const currentEffectLayer = useSelector(selectCurrentEffect)
   const sliderValue = useSelector(selectPreviewSliderValue)
   const zoom = useSelector(selectPreviewZoom)
+  const drawingMode = useSelector(selectDrawingMode)
   const wrapperRef = useRef()
 
   const currentShape = getShape(currentLayer?.type || "polygon")
@@ -48,6 +56,10 @@ const PreviewManager = ({ isActive }) => {
     dispatch(updatePreview({ zoom: option.value }))
   }
 
+  const handleDrawToggle = () => {
+    dispatch(toggleDrawingMode())
+  }
+
   const arrowKeyChange = (layer, event) => {
     if (!layer) {
       return
@@ -77,6 +89,11 @@ const PreviewManager = ({ isActive }) => {
   }
 
   const handleKeyDown = (event) => {
+    if (event.key === "Escape" && drawingMode) {
+      dispatch(exitDrawingMode())
+      return
+    }
+
     if (currentLayer) {
       if (currentShape.canMove(currentLayer)) {
         const attrs = arrowKeyChange(currentLayer, event)
@@ -115,6 +132,16 @@ const PreviewManager = ({ isActive }) => {
 
         <div className="mt-auto py-2 bg-white d-flex align-items-center">
           <div className="mx-2">
+            <Button
+              variant={drawingMode ? "primary" : "outline-secondary"}
+              size="sm"
+              onClick={handleDrawToggle}
+              title={drawingMode ? "Exit draw mode (Esc)" : "Draw on canvas"}
+            >
+              <FaPencilAlt />
+            </Button>
+          </div>
+          <div className="mx-1">
             <Select
               id="zoom-select"
               options={zoomChoices}
diff --git a/src/features/preview/PreviewWindow.js b/src/features/preview/PreviewWindow.js
index 715c5205..8983065a 100644
--- a/src/features/preview/PreviewWindow.js
+++ b/src/features/preview/PreviewWindow.js
@@ -1,21 +1,31 @@
 /* global document, getComputedStyle, window */
 
-import React, { useEffect, useRef } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 import { useSelector, useDispatch } from "react-redux"
 import { isEqual } from "lodash"
-import { Stage, Layer, Circle, Rect } from "react-konva"
+import { Stage, Layer, Circle, Rect, Line } from "react-konva"
 import throttle from "lodash/throttle"
 import { selectPreviewState } from "@/features/preview/previewSlice"
 import { selectCurrentMachine } from "@/features/machines/machinesSlice"
 import { getMachine } from "@/features/machines/machineFactory"
 import {
+  addLayer,
   selectSelectedLayer,
   selectVisibleLayerIds,
   setCurrentLayer,
 } from "@/features/layers/layersSlice"
 import ShapePreview from "./ShapePreview"
 import ConnectorPreview from "./ConnectorPreview"
-import { setPreviewSize, selectPreviewZoom } from "./previewSlice"
+import {
+  setPreviewSize,
+  selectPreviewZoom,
+  selectDrawingMode,
+  selectDrawingPoints,
+  addDrawingPoint,
+  exitDrawingMode,
+  clearDrawingPoints,
+} from "./previewSlice"
+import LayerFactory from "@/features/layers/Layer"
 
 const PreviewWindow = ({ isActive }) => {
   const dispatch = useDispatch()
@@ -25,10 +35,14 @@ const PreviewWindow = ({ isActive }) => {
   const selectedLayer = useSelector(selectSelectedLayer, isEqual)
   const layerIds = useSelector(selectVisibleLayerIds, isEqual)
   const zoom = useSelector(selectPreviewZoom)
+  const drawingMode = useSelector(selectDrawingMode)
+  const drawingPoints = useSelector(selectDrawingPoints)
+  const [isDrawing, setIsDrawing] = useState(false)
   const stageZoom = zoom > 1 ? zoom : 1
   const offsetZoom = zoom > 1 ? 1 : zoom
   const remainingLayerIds = layerIds.filter((id) => id !== selectedLayer?.id)
   const layerRef = useRef()
+  const stageRef = useRef()
   const stagePadding = 22
 
   useEffect(() => {
@@ -70,9 +84,58 @@ const PreviewWindow = ({ isActive }) => {
       ? layerIds[selectedIdx + 1]
       : null
 
-  // add hidden debugging option to toggle the hit canvas on the layer when the user
-  // clicks on the layer while pressing the Alt key
+  // Get machine coordinates from a pointer event
+  const getPointerMachineCoords = useCallback(() => {
+    const stage = stageRef.current
+    if (!stage) return null
+    const pos = stage.getRelativePointerPosition()
+    if (!pos) return null
+    return { x: pos.x, y: -pos.y } // flip Y: Konva Y-down → Sandify Y-up
+  }, [])
+
+  // Drawing event handlers
+  const handleDrawStart = useCallback(
+    (e) => {
+      if (!drawingMode) return
+      e.cancelBubble = true
+      setIsDrawing(true)
+      dispatch(clearDrawingPoints())
+      const pt = getPointerMachineCoords()
+      if (pt) dispatch(addDrawingPoint(pt))
+    },
+    [drawingMode, dispatch, getPointerMachineCoords],
+  )
+
+  const handleDrawMove = useCallback(
+    (e) => {
+      if (!drawingMode || !isDrawing) return
+      e.cancelBubble = true
+      const pt = getPointerMachineCoords()
+      if (pt) dispatch(addDrawingPoint(pt))
+    },
+    [drawingMode, isDrawing, dispatch, getPointerMachineCoords],
+  )
+
+  const handleDrawEnd = useCallback(() => {
+    if (!drawingMode || !isDrawing) return
+    setIsDrawing(false)
+
+    if (drawingPoints.length >= 2) {
+      const layer = new LayerFactory("drawing")
+      const attrs = layer.getInitialState({
+        machine,
+        drawingPoints,
+      })
+      attrs.name = "Drawing"
+      dispatch(addLayer(attrs))
+    }
+
+    dispatch(exitDrawingMode())
+  }, [drawingMode, isDrawing, drawingPoints, machine, dispatch])
+
+  // Normal click handler (deselect layers)
   const handleStageClick = (e) => {
+    if (drawingMode) return
     dispatch(setCurrentLayer(null))
     if (e.evt.altKey && layerRef.current) {
       layerRef.current.toggleHitCanvas()
@@ -80,10 +143,16 @@ const PreviewWindow = ({ isActive }) => {
     }
   }
 
+  // Convert drawing points to flat [x1,y1,x2,y2,...] for Konva Line
+  const drawingLinePoints = drawingPoints.flatMap((p) => [p.x, -p.y]) // flip Y back for Konva rendering
+
+  const cursorStyle = drawingMode ? "crosshair" : "default"
+
   // some awkward rendering to put the current layer as the last child in the layer to ensure
   // transformer rotation works; this is a Konva restriction.
   return (
     <Stage
+      ref={stageRef}
       scaleX={scale * zoom}
       scaleY={scale * zoom}
       height={height * scaleHeight * stageZoom + stagePadding}
@@ -95,6 +164,13 @@ const PreviewWindow = ({ isActive }) => {
         (-height * (scaleHeight / scale / offsetZoom) - stagePadding * 0.5) / 2
       }
       onClick={handleStageClick}
+      onMouseDown={handleDrawStart}
+      onMouseMove={handleDrawMove}
+      onMouseUp={handleDrawEnd}
+      onTouchStart={handleDrawStart}
+      onTouchMove={handleDrawMove}
+      onTouchEnd={handleDrawEnd}
+      style={{ cursor: cursorStyle }}
     >
       <Layer ref={layerRef}>
         {machine.type === "polar" && (
@@ -154,6 +230,15 @@ const PreviewWindow = ({ isActive }) => {
         ]
           .flat()
           .filter((e) => e !== null)}
+        {drawingMode && drawingPoints.length > 0 && (
+          <Line
+            points={drawingLinePoints}
+            stroke="#00ff00"
+            strokeWidth={1 / (scale * zoom)}
+            lineCap="round"
+            lineJoin="round"
+          />
+        )}
       </Layer>
     </Stage>
   )
diff --git a/src/features/preview/previewSlice.js b/src/features/preview/previewSlice.js
index b66f3d80..056a82b0 100644
--- a/src/features/preview/previewSlice.js
+++ b/src/features/preview/previewSlice.js
@@ -13,6 +13,8 @@ const previewSlice = createSlice({
     canvasHeight: 600,
     sliderValue: 0.0,
     zoom: 1.0,
+    drawingMode: false,
+    drawingPoints: [],
   },
   reducers: {
     updatePreview(state, action) {
@@ -22,10 +24,31 @@ const previewSlice = createSlice({
       state.canvasHeight = action.payload.height
       state.canvasWidth = action.payload.width
     },
+    toggleDrawingMode(state) {
+      state.drawingMode = !state.drawingMode
+      state.drawingPoints = []
+    },
+    exitDrawingMode(state) {
+      state.drawingMode = false
+      state.drawingPoints = []
+    },
+    addDrawingPoint(state, action) {
+      state.drawingPoints.push(action.payload)
+    },
+    clearDrawingPoints(state) {
+      state.drawingPoints = []
+    },
   },
 })
 
-export const { updatePreview, setPreviewSize } = previewSlice.actions
+export const {
+  updatePreview,
+  setPreviewSize,
+  toggleDrawingMode,
+  exitDrawingMode,
+  addDrawingPoint,
+  clearDrawingPoints,
+} = previewSlice.actions
 export default previewSlice.reducer
 
 // ------------------------------
@@ -46,3 +69,13 @@ export const selectPreviewZoom = createSelector(
   selectPreviewState,
   (state) => state.zoom,
 )
+
+export const selectDrawingMode = createSelector(
+  selectPreviewState,
+  (state) => state.drawingMode ?? false,
+)
+
+export const selectDrawingPoints = createSelector(
+  selectPreviewState,
+  (state) => state.drawingPoints ?? [],
+)
diff --git a/src/features/preview/previewSlice.spec.js b/src/features/preview/previewSlice.spec.js
index 249fb0c9..6d4d6879 100644
--- a/src/features/preview/previewSlice.spec.js
+++ b/src/features/preview/previewSlice.spec.js
@@ -7,6 +7,8 @@ describe("preview reducer", () => {
       canvasHeight: 600,
       sliderValue: 0,
       zoom: 1,
+      drawingMode: false,
+      drawingPoints: [],
     })
   })
 
diff --git a/src/features/shapes/Drawing.js b/src/features/shapes/Drawing.js
new file mode 100644
index 00000000..6203496c
--- /dev/null
+++ b/src/features/shapes/Drawing.js
@@ -0,0 +1,138 @@
+import Victor from "victor"
+import Shape from "./Shape"
+import { dimensions } from "@/common/geometry"
+
+const options = {
+  drawingSimplify: {
+    title: "Simplify tolerance",
+    min: 0,
+    max: 5,
+    step: 0.5,
+  },
+  drawingSmooth: {
+    title: "Smoothing iterations",
+    min: 0,
+    max: 8,
+    step: 1,
+  },
+}
+
+export default class Drawing extends Shape {
+  constructor() {
+    super("drawing")
+    this.label = "Drawing"
+    this.selectGroup = "import"
+    this.randomizable = false
+  }
+
+  canChangeAspectRatio() {
+    return true
+  }
+
+  getInitialState(props) {
+    return {
+      ...super.getInitialState(),
+      ...{
+        drawingPoints: [],
+        drawingSimplify: 1,
+        drawingSmooth: 3,
+        maintainAspectRatio: false,
+      },
+      ...(props === undefined
+        ? {}
+        : {
+            drawingPoints: props.drawingPoints || [],
+          }),
+    }
+  }
+
+  initialDimensions(props) {
+    if (!props || !props.drawingPoints || props.drawingPoints.length < 2) {
+      return { width: 100, height: 100, aspectRatio: 1 }
+    }
+
+    const vertices = props.drawingPoints.map((p) => new Victor(p.x, p.y))
+    const dim = dimensions(vertices)
+    const w = Math.max(dim.width, 1)
+    const h = Math.max(dim.height, 1)
+    return { width: w, height: h, aspectRatio: w / h }
+  }
+
+  getVertices(state) {
+    const points = state.shape.drawingPoints
+    if (!points || points.length < 2) {
+      return [new Victor(0, 0)]
+    }
+
+    let vertices = points.map((p) => new Victor(p.x, p.y))
+
+    const tolerance = state.shape.drawingSimplify
+    if (tolerance > 0) {
+      vertices = douglasPeucker(vertices, tolerance)
+    }
+
+    const smoothIter = state.shape.drawingSmooth || 0
+    if (smoothIter > 0) {
+      vertices = chaikinSmooth(vertices, smoothIter)
+    }
+
+    return vertices
+  }
+
+  getOptions() {
+    return options
+  }
+}
+
+function chaikinSmooth(points, iterations) {
+  let result = points
+  for (let iter = 0; iter < iterations; iter++) {
+    if (result.length < 2) return result
+    const smoothed = [result[0]]
+    for (let i = 0; i < result.length - 1; i++) {
+      const p0 = result[i]
+      const p1 = result[i + 1]
+      smoothed.push(
+        new Victor(0.75 * p0.x + 0.25 * p1.x, 0.75 * p0.y + 0.25 * p1.y),
+      )
+      smoothed.push(
+        new Victor(0.25 * p0.x + 0.75 * p1.x, 0.25 * p0.y + 0.75 * p1.y),
+      )
+    }
+    smoothed.push(result[result.length - 1])
+    result = smoothed
+  }
+  return result
+}
+
+function perpendicularDist(pt, a, b) {
+  const dx = b.x - a.x
+  const dy = b.y - a.y
+  const lenSq = dx * dx + dy * dy
+  if (lenSq === 0) return pt.distance(a)
+  return Math.abs((pt.x - a.x) * dy - (pt.y - a.y) * dx) / Math.sqrt(lenSq)
+}
+
+function douglasPeucker(points, tolerance) {
+  if (points.length <= 2) return points
+
+  const first = points[0]
+  const last = points[points.length - 1]
+  let maxDist = 0
+  let maxIdx = 0
+
+  for (let i = 1; i < points.length - 1; i++) {
+    const d = perpendicularDist(points[i], first, last)
+    if (d > maxDist) {
+      maxDist = d
+      maxIdx = i
+    }
+  }
+
+  if (maxDist > tolerance) {
+    const left = douglasPeucker(points.slice(0, maxIdx + 1), tolerance)
+    const right = douglasPeucker(points.slice(maxIdx), tolerance)
+    return left.slice(0, -1).concat(right)
+  }
+  return [first, last]
+}
diff --git a/src/features/shapes/shapeFactory.js b/src/features/shapes/shapeFactory.js
index b9b1297f..a3ec920f 100644
--- a/src/features/shapes/shapeFactory.js
+++ b/src/features/shapes/shapeFactory.js
@@ -1,6 +1,7 @@
 /* global localStorage */
 
 import Circle from "./Circle"
+import Drawing from "./Drawing"
 import Epicycloid from "./Epicycloid"
 import FancyText from "./FancyText"
 import LayerImport from "./LayerImport"
@@ -46,6 +47,7 @@ export const shapeFactory = {
   wiper: Wiper,
   spaceFiller: SpaceFiller,
   noise_wave: NoiseWave,
+  drawing: Drawing,
   fileImport: LayerImport,
   imageImport: ImageImport,
 }