Make IO polygon markers centred and transparent (#3989)

* make polygon markers centred and transparent

* centre active line

* set perPixelTargetFind per object, and not on the canvas

otherwise it can't be overridden for a specific object
see 4c305baae6/src/canvas.class.js (L786)

ts/routes/image-occlusion/mask-editor.ts

@@ -95,7 +95,7 @@ function initCanvas(): fabric.Canvas {
     undoStack.setCanvas(canvas);
     // find object per-pixel basis rather than according to bounding box,
     // allow click through transparent area
-    canvas.perPixelTargetFind = true;
+    fabric.Object.prototype.perPixelTargetFind = true;
     // Disable uniform scaling
     canvas.uniformScaling = false;
     canvas.uniScaleKey = "none";

ts/routes/image-occlusion/tools/tool-polygon.ts

@@ -87,22 +87,23 @@ const addPoint = (canvas: fabric.Canvas, options): void => {
 
     const point = new fabric.Circle({
         radius: 5,
-        fill: "#ffffff",
+        fill: "transparent",
         stroke: "#333333",
-        strokeWidth: 0.5,
-        originX: "left",
-        originY: "top",
+        strokeWidth: 1.5,
+        originX: "center",
+        originY: "center",
         left: origX,
         top: origY,
         selectable: false,
         hasBorders: false,
         hasControls: false,
         objectCaching: false,
+        perPixelTargetFind: false,
     });
 
     if (pointsList.length === 0) {
         point.set({
-            fill: "red",
+            stroke: "red",
         });
     }
 
@@ -112,8 +113,8 @@ const addPoint = (canvas: fabric.Canvas, options): void => {
         strokeWidth: 2,
         fill: "#999999",
         stroke: "#999999",
-        originX: "left",
-        originY: "top",
+        originX: "center",
+        originY: "center",
         selectable: false,
         hasBorders: false,
         hasControls: false,