Can you please take a look at following demo and let me know how I can enable the code to draw 100% straight Line on the canvas?

$(function() {
    var drawLine = false;

    var theCanvas = document.getElementById('map');
    var ctx = theCanvas.getContext('2d');
    theCanvas.width = 420;
    theCanvas.height = 300;

    var canvasOffset = $('#map').offset();

    $('#map').mousemove(function(e) {
        if (drawLine === true) {
            ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
            ctx.stroke();
        }
    });

    $('#map').mousedown(function() {
        drawLine = true;
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 5;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
    });

    $(window).mouseup(function() {
        drawLine = false;
    });
});

#map{border:solid; margin-top: 50px;}

<script src=".0.3/jquery.min.js"></script>
<canvas id="map"></canvas>

Can you please take a look at following demo and let me know how I can enable the code to draw 100% straight Line on the canvas?

$(function() {
    var drawLine = false;

    var theCanvas = document.getElementById('map');
    var ctx = theCanvas.getContext('2d');
    theCanvas.width = 420;
    theCanvas.height = 300;

    var canvasOffset = $('#map').offset();

    $('#map').mousemove(function(e) {
        if (drawLine === true) {
            ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
            ctx.stroke();
        }
    });

    $('#map').mousedown(function() {
        drawLine = true;
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 5;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
    });

    $(window).mouseup(function() {
        drawLine = false;
    });
});

#map{border:solid; margin-top: 50px;}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<canvas id="map"></canvas>

As you can see the code is working fine but what I want is drawing a straight line on drawing

Thanks

• javascript
• jquery
• html5-canvas

Share Improve this question Follow edited Feb 5, 2015 at 18:28 Suffii asked Feb 5, 2015 at 18:00 SuffiiSuffii 5,7841515 gold badges6262 silver badges9494 bronze badges 3

• Move the mouse perfectly straight? ..If E_p's answer isn't correct, I'm not sure I know what you are looking for. Can you please edit your question to provide more information? – mambrow Commented Feb 5, 2015 at 18:23
• @mambrow, what I want is something like this sample jsfiddle/URWru drawing straight line, why do you think this is unclear? – Suffii Commented Feb 5, 2015 at 18:27
• 1 Use E_p's answer, but also save the starting+ending points of all previous lines. In addition to clearing the canvas each time, you would redraw all the previous lines also. ;-) – markE Commented Feb 5, 2015 at 20:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You would need to have 2 canvases:

1. temporary for animation
2. permanent to store drawing.

Algorithm:

1. ondown write start coordinates.
2. onmove record endpoint, clear canvas 1, draw a line on canvas 1 from start point to end point.
3. onup draw final line on 2nd canvas clear 1st canvas.

Too lazy create second canvas (it'll clear it every try now); Put a ment where pass different canvas for permanent draw

$(function() {
    var drawLine = false;

    var theCanvas = document.getElementById('map');
    var finalPos = {x:0, y:0};
    var startPos = {x:0, y:0};
    var ctx = theCanvas.getContext('2d');
    theCanvas.width = 420;
    theCanvas.height = 300;

    var canvasOffset = $('#map').offset();

    function line(cnvs) {
        cnvs.beginPath();
        cnvs.moveTo(startPos.x, startPos.y);
        cnvs.lineTo(finalPos.x, finalPos.y);
        cnvs.stroke();
    }

    function clearCanvas()
    {
       ctx.clearRect(0, 0, theCanvas.width, theCanvas.height);
    }

    $('#map').mousemove(function(e) {
        if (drawLine === true) {
            finalPos = {x: e.pageX - canvasOffset.left, y:e.pageY - canvasOffset.top};

            clearCanvas();
            line(ctx);
            
        }
    });

    $('#map').mousedown(function(e) {
        drawLine = true;
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 5;
        ctx.lineCap = 'round';
        ctx.beginPath();
        startPos = { x: e.pageX - canvasOffset.left, y: e.pageY - canvasOffset.top};
    });

    $(window).mouseup(function() {
        clearCanvas();
        // Replace with var that is second canvas
        line(ctx);
        finalPos = {x:0, y:0};
        startPos = {x:0, y:0};
        drawLine = false;
    });
});

#map{border:solid; margin-top: 50px;}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<canvas id="map"></canvas>