JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="myspace" height="500" width="500">
  <defs xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="g" x1="0%" x2="100%" y1="0%" y2="100%">
      <stop style="stop-color: red;" offset="0"/>
      <stop style="stop-color: blue;" offset="1"/>
    </linearGradient>
  </defs>
  <rect xmlns="http://www.w3.org/2000/svg" style="fill: url(#g);" width="100%" height="100%"/>
  <line id="myline" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(255,255,255);stroke-width:2" />
</svg>

JavaScript

$("#myspace").data("draw_mode", false);

var draw = function(e) {
	console.debug("draw (" + e.pageX + "," + e.pageY + ")");
    var draw_start = $("#myspace").data("draw_start");
    var myline = $("#myline")[0];
    myline.setAttribute("x1", draw_start.x);
    myline.setAttribute("y1", draw_start.y);
    myline.setAttribute("x2", e.pageX);
    myline.setAttribute("y2", e.pageY);
};

var penup = function(e) {
    $("#myspace").data("draw_mode", false);
    console.debug("pen up = " + $("#myspace").data("draw_mode"));
    $("#myspace").off("mousemove", draw);
};

var pendown = function(e) {
    $("#myspace").data("draw_mode", true);
    console.debug("pen down = " + $("#myspace").data("draw_mode"));
    $("#myspace").data("draw_start", { "x" : e.pageX, "y" : e.pageY });
    $("#myspace").on("mousemove", draw);
};

$("#myspace").on("mouseup", penup);
//$("#myspace").on("mouseleave", penup);
$("#myspace").on("mousedown", pendown);