CODEWITHSUNDEEP
javascripthtmlcanvas
user3188826
user3188826

Reputation: 53

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?

Upvotes: 0

Views: 3949

Answers (2)

loxxy
loxxy

Reputation: 13151

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;
}

Upvotes: 1

markE
markE

Reputation: 105035

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>

Upvotes: 4

Related Questions