CODEWITHSUNDEEP
htmlhtml5-canvas
ABHISHEK S
ABHISHEK S

Reputation: 71

how to free draw a straight line in html 5 canvas and get the coordinates of the line?

How to draw a line in html 5 canvas?

I achived to draw an rectangle but how to draw a straight line. Here is my code.

function redraw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                if (!path.length)
                    return;
                ctx.beginPath();
                ctx.moveTo.apply(ctx, path[0]);
                for (var i = 1,
                    len = path.length; i < len; ++i)
                    ctx.lineTo.apply(ctx, path[i]);
                ctx.strokeStyle = '#000';
                ctx.stroke();
                var start = new Date;
                var bounds = contextBoundingBox(ctx);
                ms.value = ms.value * 1 + Math.round(((new Date) - start - ms.value) / 4);
                ctx.strokeStyle = '#c00';
                ctx.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
            }

This above code is for drawing the rectangle, please modify the code to draw a straight line.

Upvotes: 0

Views: 2321

Answers (1)

Durga
Durga

Reputation: 15614

DEMO

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
//add event listner to canvas
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mousemove', mouseMove, false);
canvas.addEventListener('mouseup', mouseUp, false);
var mouseDown = false;
var points = [];
var lines = [];
var linePoint = [];
var stPoint;
var endPoint;

var imageObj = new Image();
imageObj.onload = function() {
   ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';


function Point(x, y) {
    this.x = x;
    this.y = y;
}

function lineP(stPoint, endPoint) {
    this.stPoint = stPoint;
    this.endPoint = endPoint;
}

function mouseDown(e) {
    mouseDown = true;
    stPoint = new Point(e.layerX, e.layerY); //get start point for line
}

function mouseMove(e) {
    if (!mouseDown) return;
    ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
    ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height); //redraw image
    drawLines(); //draw previous lines
    ctx.beginPath();
    ctx.moveTo(stPoint.x, stPoint.y);
    ctx.lineTo(e.layerX, e.layerY);
    ctx.stroke();
    ctx.closePath();
}

function mouseUp(e) {
    mouseDown = false;
    endPoint = new Point(e.layerX, e.layerY); //get end point
    linePoint.push(new lineP(stPoint, endPoint)); //store line points for next draw
    console.log(linePoint);
}

//draw all lines from stored point
function drawLines() {
    linePoint.forEach(function(item) {
        ctx.beginPath();
        ctx.moveTo(item['stPoint'].x, item['stPoint'].y);
        ctx.lineTo(item['endPoint'].x, item['endPoint'].y);
        ctx.stroke();
        ctx.closePath();
    })
}
canvas {
 border: 1px solid #999;
}
<canvas id="canvas" width="300" height="300"></canvas>

On mouse down store start value of line and on mouse up store end point of line. (event.layerX,event.layerY) will give the point cordinate.

Upvotes: 1

Related Questions