Untitled



>>>>>>>>>>>>>>>>>>>>>>>>>>>> Use this code as it is in a new file <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

    // Variables to store mouse coordinates
   let isDrawing = false;
   let startX, startY, endX, endY;


   // Event listener for mouse down
   canvas.addEventListener('mousedown', (e) => {
     startX = e.clientX - canvas.offsetLeft;
     startY = e.clientY - canvas.offsetTop;
     isDrawing = true;
   });

   // Event listener for mouse move
   canvas.addEventListener('mousemove', (e) => {
     if (!isDrawing) return;
     endX = e.clientX - canvas.offsetLeft;
     endY = e.clientY - canvas.offsetTop;

    //  context.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    clearCanvas();
     drawLineH(startX, startY, endX,endY); // Draw the line
     drawLineV(startX, startY, endX,endY);
   });

   // Event listener for mouse up
   canvas.addEventListener('mouseup', () => {
     isDrawing = false;
   });

   // Function to draw a line between two points (restricted to horizontal and vertical directions)
   function drawLineH(x1, y1, x2,y2) {
     context.beginPath();
     context.moveTo(x1, y2);

       context.lineTo(x2, y2);

     context.stroke();
   }

   function drawLineV(x1, y1,x2,y2) {
     context.beginPath();
     context.moveTo(x1, y1);

       context.lineTo(x1, y2);

     context.stroke();
   }


========================================================================================================================

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head><!DOCTYPE html>
<html>
<head>
  <title>Mouse Drag Line Drawing</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500" style="border: 1px solid black;"></canvas>

  <script>
    // Variables to store mouse coordinates
    let isDrawing = false;
    let startX, startY, endX, endY;

    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Event listener for mouse down
    canvas.addEventListener('mousedown', (e) => {
      startX = e.clientX - canvas.offsetLeft;
      startY = e.clientY - canvas.offsetTop;
      isDrawing = true;
    });

    // Event listener for mouse move
    canvas.addEventListener('mousemove', (e) => {
      if (!isDrawing) return;
      endX = e.clientX - canvas.offsetLeft;
      endY = e.clientY - canvas.offsetTop;

      ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
      drawLineH(startX, startY, endX,endY); // Draw the line
      drawLineV(startX, startY, endX,endY);
    });

    // Event listener for mouse up
    canvas.addEventListener('mouseup', () => {
      isDrawing = false;
    });

    // Function to draw a line between two points (restricted to horizontal and vertical directions)
    function drawLineH(x1, y1, x2,y2) {
      ctx.beginPath();
      ctx.moveTo(x1, y2);

        ctx.lineTo(x2, y2);

      ctx.stroke();
    }

    function drawLineV(x1, y1,x2,y2) {
      ctx.beginPath();
      ctx.moveTo(x1, y1);

        ctx.lineTo(x1, y2);

      ctx.stroke();
    }
  </script>
</body>
</html>