2 files changed, 27 insertions, 9 deletions
diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index 6d7821cd2..abe6990b6 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -1,12 +1,11 @@
 @import "global_variables";
 
-.inkingCanvas-paths, .inkingCanvas-paths-none {
+.inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-paths {
     position: absolute;
     top: -50000px;
     left: -50000px;
     width: 100000px;
     height: 100000px;
-    //z-index: 10000; // z-index: 99; //overlays ink on top of everything but that messes up blending and events don't propagate down to nested collections
     .highlight {
         mix-blend-mode: multiply;
     }
@@ -18,8 +17,12 @@
     pointer-events: auto;
     
 }
-.inkingCanvas-paths-none {
+.inkingCanvas-paths-ink, .inkingCanvas-paths-markers  {
     pointer-events: none;
+    z-index: 10000; // overlays ink on top of everything 
     cursor: "arrow";
 }
+.inkingCanvas-paths-markers {
+    mix-blend-mode: multiply;
+}
 
diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx
index a971264b9..fd9e6826a 100644
--- a/src/client/views/InkingCanvas.tsx
+++ b/src/client/views/InkingCanvas.tsx
@@ -137,8 +137,20 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
     render() {
         // parse data from server
         let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1)
-        let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => {
-            if (strokeData.page == -1 || strokeData.page == curPage)
+        let markerpaths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => {
+            if ((strokeData.page == -1 || strokeData.page == curPage) &&
+                strokeData.tool == InkTool.Highlighter)
+                paths.push(<InkingStroke key={id} id={id}
+                    line={strokeData.pathData}
+                    color={strokeData.color}
+                    width={strokeData.width}
+                    tool={strokeData.tool}
+                    deleteCallback={this.removeLine} />)
+            return paths;
+        }, [] as JSX.Element[]);
+        let penpaths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => {
+            if ((strokeData.page == -1 || strokeData.page == curPage) &&
+                strokeData.tool == InkTool.Pen)
                 paths.push(<InkingStroke key={id} id={id}
                     line={strokeData.pathData}
                     color={strokeData.color}
@@ -147,14 +159,17 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
                     deleteCallback={this.removeLine} />)
             return paths;
         }, [] as JSX.Element[]);
-        let svgCanvasStyle = InkingControl.Instance.selectedTool == InkTool.None ? "-none" : "";
 
         return (
             <div className="inkingCanvas" >
-                <svg className={`inkingCanvas-paths${svgCanvasStyle}`} onPointerDown={this.onPointerDown} >
-                    {paths}
-                </svg>
+                <svg className={`inkingCanvas-paths`} onPointerDown={this.onPointerDown} />
                 {this.props.children}
+                <svg className={`inkingCanvas-paths-markers`}  >
+                    {markerpaths}
+                </svg>
+                <svg className={`inkingCanvas-paths-ink`}  >
+                    {penpaths}
+                </svg>
             </div >
         )
     }