CODEWITHSUNDEEP
javascriptcanvaslineuser-input
Christopher Craven
Christopher Craven

Reputation: 41

Canvas point to point user line

I have been trying to create a drawing app and as one of the features, i want the user to draw a straight line. I want the user to click then drag the mouse and when they let go the secondary point to is plotted drawing a straight line from where they start and end.

However so far it just draws a diagonal line origination from the center a set length can any one help this is the code where the problem lies 

     var line = document.getElementById('line');

     // Function for the line to draw
    line.addEventListener('click', function () {
        // Removed extra code
        var putPoint2 = function (e) {
            if (dragging2) {
            var new_size = size/2;

              context.moveTo(e.offsetX, e.offsetY);


            }

        };
        engage2 = function (e) { // Made engage2() "global" to refer it in engage()
            dragging2 = true;
            putPoint2(e);
            disengage2(e);
            canvas.addEventListener('mousedown', putPoint2); // Repositioned event attachment
            //canvas.addEventListener('mousemove', disengage2); // Repositioned event attachment
        };
        var disengage2 = function (e) {
            dragging2 = false;
        context.lineTo(e.offsetX+10, e.offsetY+10);
context.stroke();
            context.beginPath();
            canvas.removeEventListener('mousedown', putPoint2); // Added event detachment
            canvas.removeEventListener('mouseup', disengage2); // Added event detachment
        };

Upvotes: 1

Views: 5236

Answers (1)

markE
markE

Reputation: 105015

You can use a second temporary canvas to let the user drag-draw your line.

An outline of how to do it:

Create a second temporary offscreen canvas which is exactly the same size as the onscreen canvas.

On mousedown:

  • Move the temp canvas exactly on top of the regular canvas
  • Save the starting drag XY
  • Set a flag indicating that dragging has started

On mousemove:

  • clear the temp canvas
  • on temp canvas: draw a line from the starting drag XY to the current mouse XY

On mouseup or mouseout:

  • dragging is over so clear the dragging flag
  • move the temp canvas offscreen
  • on main canvas: draw a line from the starting dragXY to the ending mouse XY

Here's code and a Demo: http://jsfiddle.net/m1erickson/2FaFw/

<!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; }
    #wrapper{
        position:relative;
        width:300px;
        height:200px;
    }
    #canvas,#canvasTemp{
        position:absolute; top:0px; left:0px;
        border:1px solid blue;
        width:100%;
        height:100%;
    }
    #canvasTemp{ border:1.5px solid green; }
    #canvas{ border:1px solid red; }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasTemp=document.getElementById("canvasTemp");
    var ctxTemp=canvasTemp.getContext("2d");
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;

    $("#canvasTemp").css({ left:-500, top:0 });

    function drawLine(toX,toY,context){
        context.beginPath();
        context.moveTo(startX, startY);
        context.lineTo(toX,toY);
        context.stroke();
    }

    function handleMouseDown(e){
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // save drag-startXY, 
      // move temp canvas over main canvas,
      // set dragging flag
      startX=mouseX;
      startY=mouseY;
      ctxTemp.clearRect(0,0,canvasTemp.width,canvasTemp.height);
      $("#canvasTemp").css({ left:0, top:0 });
      isDown=true;
    }

    function handleMouseUp(e){
      e.preventDefault();
      if(!isDown){return;}
      // clear dragging flag
      // move temp canvas offscreen
      // draw the user's line on the main canvas
      isDown=false;
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#canvasTemp").css({ left:-500, top:0 });
      drawLine(mouseX,mouseY,ctx);
    }

    function handleMouseMove(e){
      e.preventDefault();        
      if(!isDown){return;}
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      // clear the temp canvas
      // on temp canvas draw a line from drag-start to mouseXY
      ctxTemp.clearRect(0,0,canvasTemp.width,canvasTemp.height);
      drawLine(mouseX,mouseY,ctxTemp);
    }

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

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

</head>

<body>
    <div id="wrapper">
        <canvas id="canvasTemp" width=300 height=200></canvas>
        <canvas id="canvas" width=300 height=200></canvas>
    </div>
</body>
</html>

Upvotes: 2

Related Questions