Using PointerEvents to set isDrawingMode clears the canvas

[Rhywden]

Code basically looks like this:

var pointerId = -1;

pointerDownHandler(e) {
    pointerId = e.pointerId;
    if(e.pointerType === "pen") {
      canvas.isDrawingMode = true;
    }
  }
  pointerUpHandler(e) {
    if(e.pointerId === pointerId) {
      pointerId = -1;
      canvas.isDrawingMode = false;
    }
  }
if(window.PointerEvent) {
      let pointerzone = document.getElementById('pointer');
      pointerzone.addEventListener("pointerdown", this.pointerDownHandler, false);
      pointerzone.addEventListener("pointerup", this.pointerUpHandler, false);
      pointerzone.addEventListener("pointercancel", this.pointerUpHandler, false);
      pointerzone.addEventListener("pointerout", this.pointerUpHandler, false);
      pointerzone.addEventListener("pointerleave", this.pointerUpHandler, false);
    }

and

<div id="pointer">
          <canvas id="canvas" width="400" height="400" style="border: '1px solid black'"></canvas>
        </div>

The idea is that if you're using a pen (e.g. Surface Pen) then the canvas will enter drawing mode automatically.

This does work - up to a point. You touch the pen to the surface, it draws a beautiful line and then disengages drawingMode again upon removing the pen.

However, when you then try to draw a second line (or use your mouse/finger to select something) the canvas will be erased. If you set the drawingMode after the click on a button or something (like in the demo), the canvas will not be erased.
This is somewhat sub-optimal and I'm not sure where this is coming from.

If you don't have a pen you can easily simulate this by doing if(e.pointerType === "mouse")instead.

[Rhywden]

After some more tries, I found the source of the problem: Basically, the pointerUp event fires first which sets the DrawingMode to false. Which in turn seems to prevent the canvas from "finalizing" the drawn path - i.e. while it gets drawn, it's not stored persistently.