0

I am trying to draw a straight line on canvas using mouse events.I am new to java script. Can anybody help or refer something from where i can get help?

Mohsin
  • 263
  • 2
  • 19
  • Possible duplicate of [Draw on HTML5 Canvas using a mouse](https://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse) – Angel Luis Apr 17 '18 at 18:25

1 Answers1

8

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <style>
   body {
    background-color: black;
   }
   
   canvas {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    border: solid 1px white;
    border-radius: 10px;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas"></canvas>
  <script type="application/javascript">
  
   var canvasWidth = 180;
   var canvasHeight = 160;
   var canvas = null;
   var bounds = null;
   var ctx = null;
   var hasLoaded = false;
   
   var startX = 0;
   var startY = 0;
   var mouseX = 0;
   var mouseY = 0;
   var isDrawing = false;
   var existingLines = [];
   
   function draw() {
    ctx.fillStyle = "#333333";
    ctx.fillRect(0,0,canvasWidth,canvasHeight);
    
    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;
    ctx.beginPath();
    
    for (var i = 0; i < existingLines.length; ++i) {
     var line = existingLines[i];
     ctx.moveTo(line.startX,line.startY);
     ctx.lineTo(line.endX,line.endY);
    }
    
    ctx.stroke();
    
    if (isDrawing) {
     ctx.strokeStyle = "darkred";
     ctx.lineWidth = 3;
     ctx.beginPath();
     ctx.moveTo(startX,startY);
     ctx.lineTo(mouseX,mouseY);
     ctx.stroke();
    }
   }
   
   function onmousedown(e) {
    if (hasLoaded && e.button === 0) {
     if (!isDrawing) {
      startX = e.clientX - bounds.left;
      startY = e.clientY - bounds.top;
      
      isDrawing = true;
     }
     
     draw();
    }
   }
   
   function onmouseup(e) {
    if (hasLoaded && e.button === 0) {
     if (isDrawing) {
      existingLines.push({
       startX: startX,
       startY: startY,
       endX: mouseX,
       endY: mouseY
      });
      
      isDrawing = false;
     }
     
     draw();
    }
   }
   
   function onmousemove(e) {
    if (hasLoaded) {
     mouseX = e.clientX - bounds.left;
     mouseY = e.clientY - bounds.top;
     
     if (isDrawing) {
      draw();
     }
    }
   }
   
   window.onload = function() {
    canvas = document.getElementById("canvas");
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    canvas.onmousedown = onmousedown;
    canvas.onmouseup = onmouseup;
    canvas.onmousemove = onmousemove;
    
    bounds = canvas.getBoundingClientRect();
    ctx = canvas.getContext("2d");
    hasLoaded = true;
    
    draw();
   }
   
  </script>
 </body>
</html>
Mr. Reddy
  • 1,073
  • 6
  • 8
  • Hi I copied above code but if i remove the fillStyle and fillrect then it shows weird following mouse cursor everywhere and drawing many strokes like this. Can you help where it went wrong? https://postimg.cc/k6vLmxmS – Shashank Bhatt Jan 20 '23 at 13:36