I am trying to draw a line on canvas by using mouse events

I am trying to draw a line on canvas using mousedown, mousemove, mouseup events, but I am unable to set coordinates for drawing a line on Canvas. Here I am using the following JavaScript code:

function line() 
{
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    canvas.onmousedown = startLine;
    canvas.onmouseup =   drawLine;
    canvas.onmouseout = stopLine;
    //canvas.onmousemove =drawLine;
};

function startLine(e) 
{
    isLine = true;
    context.beginPath();
    context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);

}

function drawLine(e) 
{
    if (isLine==true) 
    {
        var x = e.pageX - canvas.offsetLeft;
        var y = e.pageY - canvas.offsetTop;
        context.lineTo(x ,y);
        context.stroke();
        context.closePath();
    }
    cPush();
}  
function stopLine() 
{
    isLine = false;
}

When I am using mousemove event for drawLine() method it is drawing multiple lines. Can you lease tell me what wrong in my code?

Answers


Basically, you need to refactor your code to do beginPath+moveTo+lineTo+stroke inside mousemove.

Otherwise you will get those multiple lines...

In mouseDown: Save the startX/startY and set the isDown flag to indicate the drag has started:

function handleMouseDown(e){
  e.preventDefault();
  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);
  isDown=true;
}

In mouseMove: Draw a new line from startX/Y to mouseX/Y and reset startX/Y=mouseX/Y

function handleMouseMove(e){
  if(!isDown){return;}
  e.preventDefault();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  ctx.beginPath();  // use beginPath for every segment of the line
  ctx.moveTo(startX,startY);
  ctx.lineTo(mouseX,mouseY);
  ctx.stroke();
  startX=mouseX;
  startY=mouseY;
}

In mouseUP: Clear the isDown flag to indicate the drag has ended:

function handleMouseUp(e){
  e.preventDefault();
  isDown=false;
}

Here's code and a Fiddle: http://jsfiddle.net/m1erickson/hzNg4/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    var isDown=false;
    var startX;
    var startY;


    function handleMouseDown(e){
      e.preventDefault();
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);
      isDown=true;
    }

    function handleMouseUp(e){
      e.preventDefault();
      isDown=false;
    }

    function handleMouseOut(e){
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      isDown=false;
    }

    function handleMouseMove(e){
      if(!isDown){return;}
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      ctx.beginPath();
      ctx.moveTo(startX,startY);
      ctx.lineTo(mouseX,mouseY);
      ctx.stroke();
      startX=mouseX;
      startY=mouseY;

    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});



}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Try this way (DEMO) :

function line() {
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    canvas.onmousedown = startLine;
    canvas.onmouseup = canvas.onmouseout = stopLine;
    canvas.onmousemove = drawLine;
};

function startLine(e) {
    isLine = true;
    context.beginPath();
    context.moveTo(startX = (e.pageX - canvas.offsetLeft),
    startY = (e.pageY - canvas.offsetTop));
}

function drawLine(e) {
    if (isLine) {
        var x = e.pageX - canvas.offsetLeft;
        var y = e.pageY - canvas.offsetTop;
        context.clearRect(0, 0, 300, 150);    // width = 300, height = 150
        context.beginPath();
        context.moveTo(startX, startY);
        context.lineTo(x, y);
        context.stroke();
        context.closePath();
    }
    //cPush();
}

function stopLine() {
    isLine = false;
}

Need Your Help

Java lib or function that is similar to scipy.optimize.minimize()?

optimization machine-learning neural-network

I m programming a neural network. I m at the step where I implemented the cost function and calculated the gradients. Now I need to optimize the paramters that minimize my cost function.