JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.js"></script>	
	</head>
	<body>
		<canvas id="canvas"></canvas>
	</body>
</html>

CSS

canvas {
  width: 500px; 
  height: 500px; 
  position: absolute; 
  top: 10; left: 10; 
  border: 1px solid black;
}

JavaScript

var stift;
var c = document.getElementById("canvas");
var rect = c.getBoundingClientRect();

var context = c.getContext("2d");
var e = 0;

$("#canvas").mousedown(function(){
  var x = event.clientX - rect.left;
  var y = event.clientY -rect.top;
  context.moveTo(x, y);
  context.beginPath();
  context.lineWidth = "1px";
  context.strokeStyle = "black";
  e = 1;
});

$("#canvas").mousemove(function(){
    if(e == 1){
      var x = event.clientX - rect.left;
      var y = event.clientY - rect.top;
      console.log(x+"; "+y)
      context.lineTo(x, y);
      context.stroke();
    }
  })

$("#canvas").mouseup(function(){
  e=2;
  context.stroke()
  context.closePath();
});