2 files changed, 12 insertions, 13 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index cddac01ad..82d6dee73 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -457,7 +457,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             case GestureUtils.Gestures.Stroke:
                 const points = ge.points;
                 const B = this.getTransform().transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height);
-                const inkDoc = Docs.Create.InkDocument(ActiveInkColor(), Doc.GetSelectedTool(), ActiveInkWidth(), ActiveInkBezierApprox(), points, { title: "ink stroke", x: B.x, y: B.y, _width: B.width, _height: B.height });
+                const inkDoc = Docs.Create.InkDocument(ActiveInkColor(), Doc.GetSelectedTool(), ActiveInkWidth(), ActiveInkBezierApprox(), points,
+                    { title: "ink stroke", x: B.x - Number(ActiveInkWidth()) / 2, y: B.y - Number(ActiveInkWidth()) / 2, _width: B.width + Number(ActiveInkWidth()), _height: B.height + Number(ActiveInkWidth()) });
                 this.addDocument(inkDoc);
                 e.stopPropagation();
                 break;
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index e7ef4cbd2..647847b68 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -99,16 +99,14 @@ export default class InkOptionsMenu extends AntimodeMenu {
     }
 
     @computed get shapeButtons() {
-        return <>
-            {this._buttons.map((btn, i) => <button
-                className="antimodeMenu-button"
-                title={`Draw ${btn}`}
-                key={btn}
-                onPointerDown={action(e => GestureOverlay.Instance.InkShape = btn)}
-                style={{ backgroundColor: btn === GestureOverlay.Instance?.InkShape ? "121212" : "" }}>
-                {this._icons[i]}
-            </button>)}
-        </>;
+        return this._buttons.map((btn, i) => <button
+            className="antimodeMenu-button"
+            title={`Draw ${btn}`}
+            key={i}
+            onPointerDown={action(e => GestureOverlay.Instance.InkShape = btn)}
+            style={{ backgroundColor: btn === GestureOverlay.Instance.InkShape ? "121212" : "" }}>
+            {this._icons[i]}
+        </button>);
     }
 
     @computed get bezierButton() {
@@ -125,7 +123,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
     render() {
         const buttons = [
             <button className="antimodeMenu-button" title="Drag" key="drag" onPointerDown={e => this.dragStart(e)}>  ✜  </button>,
-            this.shapeButtons,
+            ...this.shapeButtons,
             this.bezierButton,
             this.widthPicker,
             this.colorPicker,
@@ -149,4 +147,4 @@ Scripting.addGlobal(function activatePen(penBtn: any) {
         Doc.SetSelectedTool(InkTool.None);
         InkOptionsMenu.Instance.fadeOut(true);
     }
-});
\ No newline at end of file
+});