$ JS Drawing

<html>
  <head>
    <title>JS Drawing</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
      var canvas = document.getElementById("gameCanvas");
      var ctx = canvas.getContext("2d");

      var isDrawing = false;
      var lastX = 0;
      var lastY = 0;

      canvas.addEventListener("mousedown", function(event) {
        isDrawing = true;
        lastX = event.offsetX;
        lastY = event.offsetY;
      });

      canvas.addEventListener("mousemove", function(event) {
        if (isDrawing) {
          var x = event.offsetX;
          var y = event.offsetY;

          ctx.beginPath();
          ctx.moveTo(lastX, lastY);
          ctx.lineTo(x, y);
          ctx.stroke();

          lastX = x;
          lastY = y;
        }
      });

      canvas.addEventListener("mouseup", function(event) {
        isDrawing = false;
      });

      canvas.addEventListener("mouseleave", function(event) {
        isDrawing = false;
      });
    </script>
  </body>
</html>