canvas :/

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    
    canvas {
      border: 1px solid red;
    }
    
  </style>
</head>

<body>
  
  <canvas width="500", height="400"></canvas>
  
  <script>
   
    let paths;
    let canvas = document.querySelector('canvas');
    let c1 = canvas.getContext('2d');
    
    let canvas2 = document.createElement('canvas');
    let c2 = canvas2.getContext('2d');
    
    canvas.addEventListener('mousedown', function (e) {
      paths.push([{ x: this.clientX, y: this.clientY }]);
      
      
      canvas.addEventListener('mousemove', function (e) {
      
        for (var i = 0; i < this.paths.length; ++i) {
            var path = this.paths[i];

if (path.length < 1) {
                continue;
            }

c1.beginPath();
            c1.moveTo(path[0].x, path[0].y);

for (var j = 1; j < path.length; ++j) {
                c1.lineTo(path[j].x, path[j].y);
            }

c1.stroke();
             c1.drawImage(this.offScreenLayer, 0, 0);
          
    	});
    
      canvas.addEventListener('mouseup', function (e) {
        canvas.removeEventListener('mousemove');
        canvas.removeEventListener('mouseup');
      });
    });

</script>
</body>

https://d3js.org/d3.v4.min.js